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>
<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="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)
}
}

6
src/router/index.js
View file

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