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

Merge pull request #978 from Safelite/feature/richardson/INSR-7779

Browse source 
Add heritage style loader
This commit is contained in:
brich1212safe 2025-12-11 10:52:46 -05:00 committed by GitHub
commit 08c17d444f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 121 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
src/assets/img/heritage-loader-blue.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 33 KiB

183
src/iss-components/loading-modal/loading-modal.vue
View file

@ -2,20 +2,24 @@
<div
v-if="showModalContent"
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-4">
<div
class="spinner-border text-danger"
role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="modal-loader-background"></div>
<div class="modal-loader-content">
<div class="modal-loader-content-container">
<div class="modal-loader-spinner-container">
<div class="modal-loader-text">
Processing...
</div>
<div
class="modal-loader-spinner"
role="status">
<img
src="~@/assets/img/heritage-loader-blue.gif"
alt="Loading spinner" />
</div>
</div>
<div
v-if="showTextCarouselContent"
class="row">
class="row modal-loader-text-container">
<div class="col">
<div class="text-container slide">
<p
@ -94,71 +98,116 @@ export default {
@import "@/styles/ux-variables-svg-strings.scss";
.modal-loader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1057;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
outline: 0;
background: $gray-100;
.modal-loader-background,
.modal-loader-content {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
outline: 0;
}
.tagbg {
background-image: url($svg-loading-modal-image);
background-repeat: no-repeat;
background-position: center center;
background-size: 96px;
.modal-loader-background {
z-index: 1057;
background: #000;
opacity: 0.5;
}
.modal-loader-content {
z-index: 1058;
display: flex;
justify-content: center;
justify-content: flex-start;
align-items: center;
}
.spinner-border {
width: 6.5rem;
height: 6.5rem;
border: 0.45em solid currentColor;
border-right-color: transparent;
}
.text-container {
display: flex;
width: 350px;
overflow: hidden;
white-space: nowrap;
margin: 0 auto;
position: relative;
&:after {
content: "";
background: rgb(245, 245, 245);
background: linear-gradient(
270deg,
rgba(245, 245, 245, 1) 0%,
rgba(245, 245, 245, 0) 5%,
rgba(245, 245, 245, 0) 95%,
rgba(245, 245, 245, 1) 100%
);
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
flex-direction: column;
@include media-breakpoint-up(xs) {
padding-top: 5rem;
}
&.slide p {
animation: slide-in 20s ease-in-out 1s forwards 1;
@include media-breakpoint-up(md) {
padding-top: 7rem;
}
p {
margin: 0 175px;
transform: translateX(180px);
.modal-loader-content-container {
min-width: 15rem; // 240px
min-height: 15rem; // 240px
font-weight: 600;
padding: 1rem 0;
display: flex;
align-items: flex-start;
justify-content: center;
background-color: #fff;
background-clip: padding-box;
outline: 0;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 0.375rem;
box-shadow: 0 .375rem 11rem rgba(0, 0, 0, .5);
.modal-loader-spinner-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #1574a1;
font-weight: 600;
.modal-loader-spinner {
margin-top: 0.75rem;
}
}
}
.tagbg {
background-image: url($svg-loading-modal-image);
background-repeat: no-repeat;
background-position: center center;
background-size: 96px;
display: flex;
justify-content: center;
align-items: center;
}
.text-container {
display: flex;
width: 350px;
overflow: hidden;
white-space: nowrap;
margin: 0 auto;
position: relative;
&:after {
content: "";
background: rgb(245, 245, 245);
background: linear-gradient(
270deg,
rgba(245, 245, 245, 1) 0%,
rgba(245, 245, 245, 0) 5%,
rgba(245, 245, 245, 0) 95%,
rgba(245, 245, 245, 1) 100%
);
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
&.slide p {
animation: slide-in 20s ease-in-out 1s forwards 1;
}
p {
margin: 0 175px;
transform: translateX(180px);
}
}
}
}
</style>

5
src/iss-components/site-footer/site-footer.vue
View file

@ -49,6 +49,7 @@
<script>
import textLink from '@/ux-components/text-link/text-link.vue';
import buttonMain from '@/ux-components/button-main/button-main.vue';
import showIssLoadingModal from '@/helpers/loading-modal-helper';
export default {
name: 'site-footer',
@ -97,6 +98,10 @@ export default {
buttonClick() {
// prevent keyboard input after button click
document.onkeydown = () => false;
if ((!this.disableForwardAction && !this.isForwardActionDisabled)) {
showIssLoadingModal(true);
}
this.$emit('forwardClicked');
},
linkClick() {