gecko/browser/metro/theme/cssthrobber.css

95 lines
1.9 KiB
CSS

/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
%filter substitution
%include defines.inc
#container[enabled] .progressBall {
position: absolute;
opacity: 0;
transform: rotate(225deg);
animation: orbit 7.15s infinite;
}
#container[enabled] .progressBall:nth-child(1) {
animation-delay: 1.56s;
}
#container[enabled] .progressBall:nth-child(2) {
animation-delay: 0.31s;
}
#container[enabled] .progressBall:nth-child(3) {
animation-delay: 0.62s;
}
#container[enabled] .progressBall:nth-child(4) {
animation-delay: 0.94s;
}
#container[enabled] .progressBall:nth-child(5) {
animation-delay: 1.25s;
}
#container[enabled] .progressBall:nth-child(1)::after,
#container[enabled] .progressBall:nth-child(2)::after,
#container[enabled] .progressBall:nth-child(3)::after,
#container[enabled] .progressBall:nth-child(4)::after,
#container[enabled] .progressBall:nth-child(5)::after {
content: "";
display: block;
width: 5px;
height: 5px;
border-radius: 5px;
position: absolute;
background: #0095dd;
left: 0;
top: 0;
}
@keyframes orbit {
0% {
opacity: 1;
z-index: 99;
transform: rotate(180deg);
animation-timing-function: ease-out;
}
7% {
opacity: 1;
transform: rotate(300deg);
animation-timing-function: linear;
}
30% {
opacity: 1;
transform: rotate(410deg);
animation-timing-function: ease-in-out;
}
39% {
opacity: 1;
transform: rotate(645deg);
animation-timing-function: linear;
}
70% {
opacity: 1;
transform: rotate(770deg);
animation-timing-function: ease-out;
}
75% {
opacity: 1;
transform: rotate(900deg);
animation-timing-function: ease-out;
}
76%, 100% {
opacity: 0;
transform: rotate(900deg);
}
}