You are here

Home » API reference » Ajax loader 7

cube-grid.css in Ajax loader 7

Same filename and directory in other branches
  1. 8 css/cube-grid.css
.ajax-throbber.sk-cube-grid {
    position: inherit;
}

.ajax-throbber.sk-cube-grid .sk-cube {
    width: 33.33%;
    height: 33.33%;
    background-color: #333;
    float: left;
    -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
    animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}

.ajax-throbber.sk-cube-grid .sk-cube1 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.ajax-throbber.sk-cube-grid .sk-cube2 {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

.ajax-throbber.sk-cube-grid .sk-cube3 {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.ajax-throbber.sk-cube-grid .sk-cube4 {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
}

.ajax-throbber.sk-cube-grid .sk-cube5 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.ajax-throbber.sk-cube-grid .sk-cube6 {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

.ajax-throbber.sk-cube-grid .sk-cube7 {
    -webkit-animation-delay: 0.0s;
    animation-delay: 0.0s;
}

.ajax-throbber.sk-cube-grid .sk-cube8 {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
}

.ajax-throbber.sk-cube-grid .sk-cube9 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

@-webkit-keyframes sk-cubeGridScaleDelay {
    0%, 70%, 100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
    }
    35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1);
    }
}

@keyframes sk-cubeGridScaleDelay {
    0%, 70%, 100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
    }
    35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1);
    }
}

File

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

  2.     position: inherit;

  3. }

  4. 

  5. .ajax-throbber.sk-cube-grid .sk-cube {

  6.     width: 33.33%;

  7.     height: 33.33%;

  8.     background-color: #333;

  9.     float: left;

  10.     -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;

  11.     animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;

  12. }

  13. 

  14. .ajax-throbber.sk-cube-grid .sk-cube1 {

  15.     -webkit-animation-delay: 0.2s;

  16.     animation-delay: 0.2s;

  17. }

  18. 

  19. .ajax-throbber.sk-cube-grid .sk-cube2 {

  20.     -webkit-animation-delay: 0.3s;

  21.     animation-delay: 0.3s;

  22. }

  23. 

  24. .ajax-throbber.sk-cube-grid .sk-cube3 {

  25.     -webkit-animation-delay: 0.4s;

  26.     animation-delay: 0.4s;

  27. }

  28. 

  29. .ajax-throbber.sk-cube-grid .sk-cube4 {

  30.     -webkit-animation-delay: 0.1s;

  31.     animation-delay: 0.1s;

  32. }

  33. 

  34. .ajax-throbber.sk-cube-grid .sk-cube5 {

  35.     -webkit-animation-delay: 0.2s;

  36.     animation-delay: 0.2s;

  37. }

  38. 

  39. .ajax-throbber.sk-cube-grid .sk-cube6 {

  40.     -webkit-animation-delay: 0.3s;

  41.     animation-delay: 0.3s;

  42. }

  43. 

  44. .ajax-throbber.sk-cube-grid .sk-cube7 {

  45.     -webkit-animation-delay: 0.0s;

  46.     animation-delay: 0.0s;

  47. }

  48. 

  49. .ajax-throbber.sk-cube-grid .sk-cube8 {

  50.     -webkit-animation-delay: 0.1s;

  51.     animation-delay: 0.1s;

  52. }

  53. 

  54. .ajax-throbber.sk-cube-grid .sk-cube9 {

  55.     -webkit-animation-delay: 0.2s;

  56.     animation-delay: 0.2s;

  57. }

  58. 

  59. @-webkit-keyframes sk-cubeGridScaleDelay {

  60.     0%, 70%, 100% {

  61.         -webkit-transform: scale3D(1, 1, 1);

  62.         transform: scale3D(1, 1, 1);

  63.     }

  64.     35% {

  65.         -webkit-transform: scale3D(0, 0, 1);

  66.         transform: scale3D(0, 0, 1);

  67.     }

  68. }

  69. 

  70. @keyframes sk-cubeGridScaleDelay {

  71.     0%, 70%, 100% {

  72.         -webkit-transform: scale3D(1, 1, 1);

  73.         transform: scale3D(1, 1, 1);

  74.     }

  75.     35% {

  76.         -webkit-transform: scale3D(0, 0, 1);

  77.         transform: scale3D(0, 0, 1);

  78.     }

  79. }