browser/metro/theme/cssthrobber.css

changeset 0
6474c204b198
     1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/browser/metro/theme/cssthrobber.css	Wed Dec 31 06:09:35 2014 +0100
     1.3 @@ -0,0 +1,94 @@
     1.4 +/* This Source Code Form is subject to the terms of the Mozilla Public
     1.5 + * License, v. 2.0. If a copy of the MPL was not distributed with this
     1.6 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
     1.7 +
     1.8 +%filter substitution
     1.9 +%include defines.inc
    1.10 +
    1.11 +#container[enabled] .progressBall {
    1.12 +  position: absolute;
    1.13 +  opacity: 0;
    1.14 +  transform: rotate(225deg);
    1.15 +  animation: orbit 7.15s infinite;
    1.16 +}
    1.17 +
    1.18 +#container[enabled] .progressBall:nth-child(1) {
    1.19 +  animation-delay: 1.56s;
    1.20 +}
    1.21 +
    1.22 +#container[enabled] .progressBall:nth-child(2) {
    1.23 +  animation-delay: 0.31s;
    1.24 +}
    1.25 +
    1.26 +#container[enabled] .progressBall:nth-child(3) {
    1.27 +  animation-delay: 0.62s;
    1.28 +}
    1.29 +
    1.30 +#container[enabled] .progressBall:nth-child(4) {
    1.31 +  animation-delay: 0.94s;
    1.32 +}
    1.33 +
    1.34 +#container[enabled] .progressBall:nth-child(5) {
    1.35 +  animation-delay: 1.25s;
    1.36 +}
    1.37 +
    1.38 +#container[enabled] .progressBall:nth-child(1)::after,
    1.39 +#container[enabled] .progressBall:nth-child(2)::after,
    1.40 +#container[enabled] .progressBall:nth-child(3)::after,
    1.41 +#container[enabled] .progressBall:nth-child(4)::after,
    1.42 +#container[enabled] .progressBall:nth-child(5)::after {
    1.43 +  content: "";
    1.44 +  display: block;
    1.45 +  width: 5px;
    1.46 +  height: 5px;
    1.47 +  border-radius: 5px;
    1.48 +  position: absolute;
    1.49 +  background: #0095dd;
    1.50 +  left: 0;
    1.51 +  top: 0;
    1.52 +}
    1.53 +
    1.54 +
    1.55 +@keyframes orbit {
    1.56 +  0% {
    1.57 +    opacity: 1;
    1.58 +    z-index: 99;
    1.59 +    transform: rotate(180deg);
    1.60 +    animation-timing-function: ease-out;
    1.61 +  }
    1.62 +
    1.63 +  7% {
    1.64 +    opacity: 1;
    1.65 +    transform: rotate(300deg);
    1.66 +    animation-timing-function: linear;
    1.67 +  }
    1.68 +
    1.69 +  30% {
    1.70 +    opacity: 1;
    1.71 +    transform: rotate(410deg);
    1.72 +    animation-timing-function: ease-in-out;
    1.73 +  }
    1.74 +
    1.75 +  39% {
    1.76 +    opacity: 1;
    1.77 +    transform: rotate(645deg);
    1.78 +    animation-timing-function: linear;
    1.79 +  }
    1.80 +
    1.81 +  70% {
    1.82 +    opacity: 1;
    1.83 +    transform: rotate(770deg);
    1.84 +    animation-timing-function: ease-out;
    1.85 +  }
    1.86 +
    1.87 +  75% {
    1.88 +    opacity: 1;
    1.89 +    transform: rotate(900deg);
    1.90 +    animation-timing-function: ease-out;
    1.91 +  }
    1.92 +
    1.93 +  76%, 100% {
    1.94 +    opacity: 0;
    1.95 +    transform: rotate(900deg);
    1.96 +  }
    1.97 +}

mercurial