You are here

cube-grid.css in Ajax loader 8

Same filename and directory in other branches
  1. 7 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. .ajax-throbber.sk-cube-grid .sk-cube {
  5. width: 33.33%;
  6. height: 33.33%;
  7. background-color: #333;
  8. float: left;
  9. -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
  10. animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
  11. }
  12. .ajax-throbber.sk-cube-grid .sk-cube1 {
  13. -webkit-animation-delay: 0.2s;
  14. animation-delay: 0.2s;
  15. }
  16. .ajax-throbber.sk-cube-grid .sk-cube2 {
  17. -webkit-animation-delay: 0.3s;
  18. animation-delay: 0.3s;
  19. }
  20. .ajax-throbber.sk-cube-grid .sk-cube3 {
  21. -webkit-animation-delay: 0.4s;
  22. animation-delay: 0.4s;
  23. }
  24. .ajax-throbber.sk-cube-grid .sk-cube4 {
  25. -webkit-animation-delay: 0.1s;
  26. animation-delay: 0.1s;
  27. }
  28. .ajax-throbber.sk-cube-grid .sk-cube5 {
  29. -webkit-animation-delay: 0.2s;
  30. animation-delay: 0.2s;
  31. }
  32. .ajax-throbber.sk-cube-grid .sk-cube6 {
  33. -webkit-animation-delay: 0.3s;
  34. animation-delay: 0.3s;
  35. }
  36. .ajax-throbber.sk-cube-grid .sk-cube7 {
  37. -webkit-animation-delay: 0.0s;
  38. animation-delay: 0.0s;
  39. }
  40. .ajax-throbber.sk-cube-grid .sk-cube8 {
  41. -webkit-animation-delay: 0.1s;
  42. animation-delay: 0.1s;
  43. }
  44. .ajax-throbber.sk-cube-grid .sk-cube9 {
  45. -webkit-animation-delay: 0.2s;
  46. animation-delay: 0.2s;
  47. }
  48. @-webkit-keyframes sk-cubeGridScaleDelay {
  49. 0%,
  50. 70%,
  51. 100% {
  52. -webkit-transform: scale3D(1, 1, 1);
  53. transform: scale3D(1, 1, 1);
  54. }
  55. 35% {
  56. -webkit-transform: scale3D(0, 0, 1);
  57. transform: scale3D(0, 0, 1);
  58. }
  59. }
  60. @keyframes sk-cubeGridScaleDelay {
  61. 0%,
  62. 70%,
  63. 100% {
  64. -webkit-transform: scale3D(1, 1, 1);
  65. transform: scale3D(1, 1, 1);
  66. }
  67. 35% {
  68. -webkit-transform: scale3D(0, 0, 1);
  69. transform: scale3D(0, 0, 1);
  70. }
  71. }