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

Merge pull request #500 from Safelite/feature/CSR-550

Browse source 
WIP modal update.
This commit is contained in:
bmauger 2022-05-20 11:03:42 -04:00 committed by GitHub
commit 955fb2f840
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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>
<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="container-fluid">
<div class="row h-100">
@ -11,18 +11,8 @@
</div>
<div class="row">
<div class="col">
<p class="m-0 fs-5 d-flex position-absolute justify-content-center" id="text-1">
Assessing your damage...
</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>
<p class="mb-0 text-center">We're processing your information.</p>
<p class="mb-0 text-center">This could take up to 30 seconds...</p>
</div>
</div>
</div>
@ -57,10 +47,10 @@ export default {
<style lang="scss">
.modal-loader {
background-color: $gray-100;
z-index: 9999;
p {
font-family: Roboto;
left: 0;
right: 0;
}
.tagbg {
@ -77,44 +67,5 @@ export default {
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>