style: improve feel of spinner removal
This commit is contained in:
parent
ca31a63bb7
commit
bea35a2015
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
@ -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);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user