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="container-fluid overflow-hidden">
<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">
<span class="visually-hidden">Loading...</span>
</div>
@ -12,17 +12,7 @@
<div class="row">
<div class="col">
<div class="text-container slide">
<p>Finishing up
<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
<p>Assessing your damage
<span class="dot-1">.</span>
<span class="dot-2">.</span>
<span class="dot-3">.</span>
@ -32,7 +22,17 @@
<span class="dot-2">.</span>
<span class="dot-3">.</span>
</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-2">.</span>
<span class="dot-3">.</span>
@ -130,39 +130,39 @@ export default {
p {
margin: 0 175px;
transform: translateX(-2346px);
transform: translateX(180px);
}
@keyframes slide-in {
0% {
transform: translateX(-2346px)
transform: translateX(180px)
}
11% {
transform: translateX(-2010px)
transform: translateX(-80px)
}
22% {
transform: translateX(-2010px)
transform: translateX(-80px)
}
33% {
transform: translateX(-1490px)
transform: translateX(-600px)
}
44% {
transform: translateX(-1490px)
transform: translateX(-600px)
}
55% {
transform: translateX(-985px)
transform: translateX(-1110px)
}
66% {
transform: translateX(-985px)
transform: translateX(-1110px)
}
77% {
transform: translateX(-490px)
transform: translateX(-1600px)
}
88% {
transform: translateX(-490px)
transform: translateX(-1600px)
}
100% {
transform: translateX(-40px)
transform: translateX(-2050px)
}
}