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