You are here

folding-cube.css in Ajax loader 8

Same filename and directory in other branches
  1. 7 css/folding-cube.css
.ajax-throbber.sk-folding-cube {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

.ajax-throbber.sk-folding-cube .sk-cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

.ajax-throbber.sk-folding-cube .sk-cube:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #333;
  -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
  animation: sk-foldCubeAngle 2.4s infinite linear both;
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}

.ajax-throbber.sk-folding-cube .sk-cube2 {
  -webkit-transform: scale(1.1) rotateZ(90deg);
  transform: scale(1.1) rotateZ(90deg);
}

.ajax-throbber.sk-folding-cube .sk-cube3 {
  -webkit-transform: scale(1.1) rotateZ(180deg);
  transform: scale(1.1) rotateZ(180deg);
}

.ajax-throbber.sk-folding-cube .sk-cube4 {
  -webkit-transform: scale(1.1) rotateZ(270deg);
  transform: scale(1.1) rotateZ(270deg);
}

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

.ajax-throbber.sk-folding-cube .sk-cube3:before {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.ajax-throbber.sk-folding-cube .sk-cube4:before {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}

@-webkit-keyframes sk-foldCubeAngle {
  0%,
  10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
    transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  }
  25%,
  75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
    transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  }
  90%,
  100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
    transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}

@keyframes sk-foldCubeAngle {
  0%,
  10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
    transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  }
  25%,
  75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
    transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  }
  90%,
  100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
    transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}

File

css/folding-cube.css
View source
  1. .ajax-throbber.sk-folding-cube {
  2. -webkit-transform: rotateZ(45deg);
  3. transform: rotateZ(45deg);
  4. }
  5. .ajax-throbber.sk-folding-cube .sk-cube {
  6. float: left;
  7. width: 50%;
  8. height: 50%;
  9. position: relative;
  10. -webkit-transform: scale(1.1);
  11. -ms-transform: scale(1.1);
  12. transform: scale(1.1);
  13. }
  14. .ajax-throbber.sk-folding-cube .sk-cube:before {
  15. content: '';
  16. position: absolute;
  17. top: 0;
  18. left: 0;
  19. width: 100%;
  20. height: 100%;
  21. background-color: #333;
  22. -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
  23. animation: sk-foldCubeAngle 2.4s infinite linear both;
  24. -webkit-transform-origin: 100% 100%;
  25. -ms-transform-origin: 100% 100%;
  26. transform-origin: 100% 100%;
  27. }
  28. .ajax-throbber.sk-folding-cube .sk-cube2 {
  29. -webkit-transform: scale(1.1) rotateZ(90deg);
  30. transform: scale(1.1) rotateZ(90deg);
  31. }
  32. .ajax-throbber.sk-folding-cube .sk-cube3 {
  33. -webkit-transform: scale(1.1) rotateZ(180deg);
  34. transform: scale(1.1) rotateZ(180deg);
  35. }
  36. .ajax-throbber.sk-folding-cube .sk-cube4 {
  37. -webkit-transform: scale(1.1) rotateZ(270deg);
  38. transform: scale(1.1) rotateZ(270deg);
  39. }
  40. .ajax-throbber.sk-folding-cube .sk-cube2:before {
  41. -webkit-animation-delay: 0.3s;
  42. animation-delay: 0.3s;
  43. }
  44. .ajax-throbber.sk-folding-cube .sk-cube3:before {
  45. -webkit-animation-delay: 0.6s;
  46. animation-delay: 0.6s;
  47. }
  48. .ajax-throbber.sk-folding-cube .sk-cube4:before {
  49. -webkit-animation-delay: 0.9s;
  50. animation-delay: 0.9s;
  51. }
  52. @-webkit-keyframes sk-foldCubeAngle {
  53. 0%,
  54. 10% {
  55. -webkit-transform: perspective(140px) rotateX(-180deg);
  56. transform: perspective(140px) rotateX(-180deg);
  57. opacity: 0;
  58. }
  59. 25%,
  60. 75% {
  61. -webkit-transform: perspective(140px) rotateX(0deg);
  62. transform: perspective(140px) rotateX(0deg);
  63. opacity: 1;
  64. }
  65. 90%,
  66. 100% {
  67. -webkit-transform: perspective(140px) rotateY(180deg);
  68. transform: perspective(140px) rotateY(180deg);
  69. opacity: 0;
  70. }
  71. }
  72. @keyframes sk-foldCubeAngle {
  73. 0%,
  74. 10% {
  75. -webkit-transform: perspective(140px) rotateX(-180deg);
  76. transform: perspective(140px) rotateX(-180deg);
  77. opacity: 0;
  78. }
  79. 25%,
  80. 75% {
  81. -webkit-transform: perspective(140px) rotateX(0deg);
  82. transform: perspective(140px) rotateX(0deg);
  83. opacity: 1;
  84. }
  85. 90%,
  86. 100% {
  87. -webkit-transform: perspective(140px) rotateY(180deg);
  88. transform: perspective(140px) rotateY(180deg);
  89. opacity: 0;
  90. }
  91. }