/* 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) }