mirror of
https://github.com/tcsenpai/Zundler.git
synced 2025-06-06 11:35:40 +00:00
3eda0fb604
We don't show the loading indicator at all between clicks. Instead, just append the new iframe. Delete the old iframe when the new one sent the "ready" message. This way we prevent flashing of the white browser background, which looks jarring when viewing dark mode pages.
78 lines
1.2 KiB
CSS
78 lines
1.2 KiB
CSS
#zundler-iframe, #old-zundler-iframe {
|
|
position:fixed;
|
|
top:0; left:0; bottom:0; right:0;
|
|
width:100%;
|
|
height:100%;
|
|
border:none;
|
|
margin:0;
|
|
padding:0;
|
|
overflow:hidden;
|
|
z-index:-1;
|
|
}
|
|
|
|
#loading-indicator {
|
|
content: " ";
|
|
z-index: 10;
|
|
display: block;
|
|
position: absolute;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.lds-ripple {
|
|
display: block;
|
|
position: relative;
|
|
width: 80px;
|
|
height: 100%;
|
|
margin: auto;
|
|
z-index:1;
|
|
-webkit-transform: translateY(50%);
|
|
-ms-transform: translateY(50%);
|
|
transform: translateY(50%);
|
|
}
|
|
|
|
.lds-ripple div {
|
|
position: absolute;
|
|
border: 4px solid #aaa;
|
|
opacity: 1;
|
|
border-radius: 50%;
|
|
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
|
|
}
|
|
|
|
.lds-ripple div:nth-child(2) {
|
|
animation-delay: -0.5s;
|
|
}
|
|
|
|
@keyframes lds-ripple {
|
|
0% {
|
|
top: 36px;
|
|
left: 36px;
|
|
width: 0;
|
|
height: 0;
|
|
opacity: 0;
|
|
}
|
|
4.9% {
|
|
top: 36px;
|
|
left: 36px;
|
|
width: 0;
|
|
height: 0;
|
|
opacity: 0;
|
|
}
|
|
5% {
|
|
top: 36px;
|
|
left: 36px;
|
|
width: 0;
|
|
height: 0;
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 72px;
|
|
height: 72px;
|
|
opacity: 0;
|
|
}
|
|
}
|