24 lines
1.1 KiB
CSS
24 lines
1.1 KiB
CSS
|
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/loading_indicator_bouncing_line.css made available under Mozilla Public License v. 2.0
|
||
|
|
See the above repository for updates as well as full license text. */
|
||
|
|
|
||
|
|
@keyframes statusline-anim{from{background-position-x: left}to{background-position-x: right}}
|
||
|
|
#statuspanel[type="status"]::after{
|
||
|
|
position: fixed;
|
||
|
|
display: block;
|
||
|
|
height: 2px;
|
||
|
|
width: 100vw;
|
||
|
|
top: 0;
|
||
|
|
left:0;
|
||
|
|
content: "";
|
||
|
|
pointer-events: none;
|
||
|
|
background-size: 20%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-image: linear-gradient(to left,transparent,rgb(170,0,70),transparent);
|
||
|
|
animation: statusline-anim 400ms alternate infinite ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 1000px){ #statuspanel[type="status"]::after{ animation-duration: 460ms } }
|
||
|
|
@media (min-width: 1400px){ #statuspanel[type="status"]::after{ animation-duration: 520ms } }
|
||
|
|
@media (min-width: 1700px){ #statuspanel[type="status"]::after{ background-size: 15%; animation-duration: 550ms } }
|
||
|
|
@media (min-width: 2200px){ #statuspanel[type="status"]::after{ animation-duration: 600ms } }
|
||
|
|
.browserContainer{ transform: translate(0) }
|