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

Update animated text to flow in reverse direction.

Browse source
This commit is contained in:
bmauger 2022-06-01 10:03:04 -04:00
parent 2b27eca24c
commit ddce966bb6
2 changed files with 31 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,9 +1,9 @@
<template> <template>
<div v-if="isModalVisible" class="container-fluid modal-loader"> <div class="container-fluid modal-loader">
<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)
} }
} }

6
src/router/index.js
View file

@ -21,6 +21,7 @@ import analyticsMixin from "@/mixins/analytics-mixin";
// Components // Components
import ComponentTest from "@/layouts/component-test/component-test.vue"; import ComponentTest from "@/layouts/component-test/component-test.vue";
import FormTest from "@/layouts/form-test/form-test.vue"; import FormTest from "@/layouts/form-test/form-test.vue";
import Modal from "@/common-components/loading-modal/loading-modal.vue";
const routes = [ const routes = [
@ -34,6 +35,11 @@ const routes = [
name: "FormTest", name: "FormTest",
component: FormTest, component: FormTest,
}, },
{
path: "/loading-modal", // This is a temporary route for testing.
name: "Modal",
component: Modal,
},
{ {
path: "/", path: "/",
name: "root", name: "root",