diff -r 000000000000 -r 6474c204b198 browser/metro/theme/cssthrobber.css --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/browser/metro/theme/cssthrobber.css Wed Dec 31 06:09:35 2014 +0100 @@ -0,0 +1,94 @@ +/* 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); + } +}