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

Merge pull request #528 from Safelite/CSR-657-reverse-animated-text

Browse source 
CSR-657 reverse animated text
This commit is contained in:
bmauger 2022-06-01 10:21:31 -04:00 committed by GitHub
commit 5ee7b98ca2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 24 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,7 +3,7 @@
<div class="row g-2 h-100 d-flex align-items-center"> <div class="row g-2 h-100 d-flex align-items-center">
<div class="container-fluid overflow-hidden"> <div class="container-fluid overflow-hidden">
<div class="row h-100"> <div class="row h-100">
<div class="col text-center tagbg mb-2"> <div class="col text-center tagbg mb-4">
<div class="spinner-border text-danger" role="status"> <div class="spinner-border text-danger" role="status">
<span class="visually-hidden">Loading...</span> <span class="visually-hidden">Loading...</span>
</div> </div>
@ -12,17 +12,7 @@
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div class="text-container slide"> <div class="text-container slide">
<p>Finishing up <p>Assessing your damage
<span class="dot-1">.</span>
<span class="dot-2">.</span>
<span class="dot-3">.</span>
</p>
<p>Nearly there
<span class="dot-1">.</span>
<span class="dot-2">.</span>
<span class="dot-3">.</span>
</p>
<p>Generating your quote
<span class="dot-1">.</span> <span class="dot-1">.</span>
<span class="dot-2">.</span> <span class="dot-2">.</span>
<span class="dot-3">.</span> <span class="dot-3">.</span>
@ -32,7 +22,17 @@
<span class="dot-2">.</span> <span class="dot-2">.</span>
<span class="dot-3">.</span> <span class="dot-3">.</span>
</p> </p>
<p>Assessing your damage <p>Generating your quote
<span class="dot-1">.</span>
<span class="dot-2">.</span>
<span class="dot-3">.</span>
</p>
<p>Nearly there
<span class="dot-1">.</span>
<span class="dot-2">.</span>
<span class="dot-3">.</span>
</p>
<p>Finishing up
<span class="dot-1">.</span> <span class="dot-1">.</span>
<span class="dot-2">.</span> <span class="dot-2">.</span>
<span class="dot-3">.</span> <span class="dot-3">.</span>
@ -130,39 +130,39 @@ export default {
p { p {
margin: 0 175px; margin: 0 175px;
transform: translateX(-2346px); transform: translateX(180px);
} }
@keyframes slide-in { @keyframes slide-in {
0% { 0% {
transform: translateX(-2346px) transform: translateX(180px)
} }
11% { 11% {
transform: translateX(-2010px) transform: translateX(-80px)
} }
22% { 22% {
transform: translateX(-2010px) transform: translateX(-80px)
} }
33% { 33% {
transform: translateX(-1490px) transform: translateX(-600px)
} }
44% { 44% {
transform: translateX(-1490px) transform: translateX(-600px)
} }
55% { 55% {
transform: translateX(-985px) transform: translateX(-1110px)
} }
66% { 66% {
transform: translateX(-985px) transform: translateX(-1110px)
} }
77% { 77% {
transform: translateX(-490px) transform: translateX(-1600px)
} }
88% { 88% {
transform: translateX(-490px) transform: translateX(-1600px)
} }
100% { 100% {
transform: translateX(-40px) transform: translateX(-2050px)
} }
} }