jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WIP modal update.

Browse source 
Remove animated text. Set background color and z-index.
This commit is contained in:
bmauger 2022-05-20 10:49:58 -04:00
parent 269ee1390b
commit 03b771af5d
1 changed files with 5 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
src/common-components/loading-modal/loading-modal.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div v-if="isModalVisible" class="container modal-loader vh-100"> <div class="container modal-loader vh-100">
<div class="row h-100 d-flex align-items-center"> <div class="row h-100 d-flex align-items-center">
<div class="container-fluid"> <div class="container-fluid">
<div class="row h-100"> <div class="row h-100">
@ -11,18 +11,8 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<p class="m-0 fs-5 d-flex position-absolute justify-content-center" id="text-1"> <p class="mb-0 fs-5 text-center">We're processing your information.</p>
Assessing your damage... <p class="mb-0 fs-5 text-center">This could take up to 30 seconds...</p>
</p>
<p class="m-0 fs-5 d-flex position-absolute justify-content-center" id="text-2">
Finding your glass...
</p>
<p class="m-0 fs-5 d-flex position-absolute justify-content-center" id="text-3">
Generating your quote...
</p>
<p class="m-0 fs-5 d-flex position-absolute justify-content-center" id="text-4">
Seriously... don't go...
</p>
</div> </div>
</div> </div>
</div> </div>
@ -57,10 +47,10 @@ export default {
<style lang="scss"> <style lang="scss">
.modal-loader { .modal-loader {
background-color: $white;
z-index: 9999;
p { p {
font-family: Roboto; font-family: Roboto;
left: 0;
right: 0;
} }
.tagbg { .tagbg {
@ -77,44 +67,5 @@ export default {
border-right-color: transparent; border-right-color: transparent;
} }
#text-1 {
animation: 3s ease-in-out 5s normal forwards 1 fade1;
}
#text-2 {
opacity: 0;
animation: 6s ease-in-out 7s normal forwards 1 fade2;
}
#text-3 {
opacity: 0;
animation: 6s ease-in-out 12s normal forwards 1 fade3;
}
#text-4 {
opacity: 0;
animation: 3s ease-in-out 17s normal forwards 1 fade4;
}
@keyframes fade1 {
0% { opacity:1; }
100% { opacity:0; }
}
@keyframes fade2 {
0% { opacity:0; }
33% { opacity:1; }
66% { opacity:1; }
100% { opacity:0; }
}
@keyframes fade3 {
0% { opacity:0; }
33% { opacity:1; }
66% { opacity:1; }
100% { opacity:0; }
}
@keyframes fade4 {
0% { opacity:0; }
100% { opacity:1; }
}
} }
</style> </style>