style: improve feel of spinner removal

This commit is contained in:
Oliver Booth 2023-08-11 02:08:48 +01:00
parent ca31a63bb7
commit bea35a2015
Signed by: oliverbooth
GPG Key ID: 725DB725A0D9EE61
2 changed files with 13 additions and 15 deletions

View File

@ -214,25 +214,23 @@ div.alert *:last-child {
#blog-loading-spinner { #blog-loading-spinner {
margin: 20px; margin: 20px;
height: auto;
opacity: 1;
&.removed { &.removed {
animation: spinner-removed 2s ease-in-out; margin: 0;
} height: 0;
}
@keyframes spinner-removed {
0% {
transform: scaleY(1);
opacity: 1;
}
50% {
transform: scaleY(1);
opacity: 0; opacity: 0;
transition: all 0.5s ease-in-out;
}
} }
100% { a.bmc-btn {
transform: scaleY(0); &:link, &:visited, &:active {
opacity: 0; color: #000;
}
&:hover {
color: #fff;
} }
} }

View File

@ -54,7 +54,7 @@ declare const Prism: any;
const spinner = document.querySelector("#blog-loading-spinner"); const spinner = document.querySelector("#blog-loading-spinner");
if (spinner) { if (spinner) {
spinner.classList.add("removed"); spinner.classList.add("removed");
setTimeout(() => spinner.remove(), 1100); setTimeout(() => spinner.remove(), 1000);
} }
}); });
} }