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

Merge pull request #451 from Safelite/feature/CSR-550

Browse source 
CSR-550 use svg for loading modal
This commit is contained in:
CarlNation 2022-05-16 14:10:48 -04:00 committed by GitHub
commit 4ccea04b5e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/assets/img/FMGTransitionAnimation.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 24 KiB

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

@ -3,14 +3,7 @@
<div class="loading-modal"> <div class="loading-modal">
<section class="loading-modal-body"> <section class="loading-modal-body">
<div class="modal-icon-container text-center"> <div class="modal-icon-container text-center">
<img class="loader-gif" alt="Loading" src="@/assets/img/loader.gif"> <img class="" alt="Loading" src="@/assets/img/FMGTransitionAnimation.svg">
<img class="modal-icon" alt="" src="@/assets/img/windshield.png">
</div>
<div class="text-center fw-bold fs-5 loading-modal-text">
Please wait...
</div>
<div class="text-center fs-5 loading-modal-text">
This process can take up to 20 seconds.
</div> </div>
</section> </section>
</div> </div>
@ -60,23 +53,15 @@
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
border-radius: 4px; border-radius: 4px;
top: 48px; top: 48px;
height: 246px; height: 186px;
width: 327px; width: 327px;
} }
.loading-modal-body {
position: relative;
padding: 20px 10px;
}
.loading-modal-text { .loading-modal-text {
padding: 0 24px 0 24px; padding: 0 24px 0 24px;
} }
.modal-icon-container { .modal-icon-container {
position: relative;
width: 75px;
height: 75px;
margin: 15px auto; margin: 15px auto;
padding-bottom: 26px; padding-bottom: 26px;
} }
@ -85,6 +70,8 @@
position: absolute; position: absolute;
vertical-align: middle; vertical-align: middle;
border: 0; border: 0;
width: 327px;
height: 186px;
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);