You are here

Home » API reference » Ajax loader 7

wandering-cubes.css in Ajax loader 7

Same filename and directory in other branches
  1. 8 css/wandering-cubes.css
.ajax-throbber.sk-wandering-cubes .sk-cube {
    background-color: #333;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both;
    animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both;
}

.ajax-throbber.sk-wandering-cubes .sk-cube2 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

@-webkit-keyframes sk-wanderingCube {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    25% {
        -webkit-transform: translateX(30px) rotate(-90deg) scale(0.5);
        transform: translateX(30px) rotate(-90deg) scale(0.5);
    }
    50% {
        /* Hack to make FF rotate in the right direction */
        -webkit-transform: translateX(30px) translateY(30px) rotate(-179deg);
        transform: translateX(30px) translateY(30px) rotate(-179deg);
    }
    50.1% {
        -webkit-transform: translateX(30px) translateY(30px) rotate(-180deg);
        transform: translateX(30px) translateY(30px) rotate(-180deg);
    }
    75% {
        -webkit-transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5);
        transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5);
    }
    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}

@keyframes sk-wanderingCube {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    25% {
        -webkit-transform: translateX(30px) rotate(-90deg) scale(0.5);
        transform: translateX(30px) rotate(-90deg) scale(0.5);
    }
    50% {
        /* Hack to make FF rotate in the right direction */
        -webkit-transform: translateX(30px) translateY(30px) rotate(-179deg);
        transform: translateX(30px) translateY(30px) rotate(-179deg);
    }
    50.1% {
        -webkit-transform: translateX(30px) translateY(30px) rotate(-180deg);
        transform: translateX(30px) translateY(30px) rotate(-180deg);
    }
    75% {
        -webkit-transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5);
        transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5);
    }
    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}

File

css/wandering-cubes.css
View source 
  1. .ajax-throbber.sk-wandering-cubes .sk-cube {

  2.     background-color: #333;

  3.     width: 10px;

  4.     height: 10px;

  5.     position: absolute;

  6.     top: 0;

  7.     left: 0;

  8.     -webkit-animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both;

  9.     animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both;

  10. }

  11. 

  12. .ajax-throbber.sk-wandering-cubes .sk-cube2 {

  13.     -webkit-animation-delay: -0.9s;

  14.     animation-delay: -0.9s;

  15. }

  16. 

  17. @-webkit-keyframes sk-wanderingCube {

  18.     0% {

  19.         -webkit-transform: rotate(0deg);

  20.         transform: rotate(0deg);

  21.     }

  22.     25% {

  23.         -webkit-transform: translateX(30px) rotate(-90deg) scale(0.5);

  24.         transform: translateX(30px) rotate(-90deg) scale(0.5);

  25.     }

  26.     50% {

  27.         /* Hack to make FF rotate in the right direction */

  28.         -webkit-transform: translateX(30px) translateY(30px) rotate(-179deg);

  29.         transform: translateX(30px) translateY(30px) rotate(-179deg);

  30.     }

  31.     50.1% {

  32.         -webkit-transform: translateX(30px) translateY(30px) rotate(-180deg);

  33.         transform: translateX(30px) translateY(30px) rotate(-180deg);

  34.     }

  35.     75% {

  36.         -webkit-transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5);

  37.         transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5);

  38.     }

  39.     100% {

  40.         -webkit-transform: rotate(-360deg);

  41.         transform: rotate(-360deg);

  42.     }

  43. }

  44. 

  45. @keyframes sk-wanderingCube {

  46.     0% {

  47.         -webkit-transform: rotate(0deg);

  48.         transform: rotate(0deg);

  49.     }

  50.     25% {

  51.         -webkit-transform: translateX(30px) rotate(-90deg) scale(0.5);

  52.         transform: translateX(30px) rotate(-90deg) scale(0.5);

  53.     }

  54.     50% {

  55.         /* Hack to make FF rotate in the right direction */

  56.         -webkit-transform: translateX(30px) translateY(30px) rotate(-179deg);

  57.         transform: translateX(30px) translateY(30px) rotate(-179deg);

  58.     }

  59.     50.1% {

  60.         -webkit-transform: translateX(30px) translateY(30px) rotate(-180deg);

  61.         transform: translateX(30px) translateY(30px) rotate(-180deg);

  62.     }

  63.     75% {

  64.         -webkit-transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5);

  65.         transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5);

  66.     }

  67.     100% {

  68.         -webkit-transform: rotate(-360deg);

  69.         transform: rotate(-360deg);

  70.     }

  71. }