You are here

Home » API reference » Ajax loader 7

folding-cube.css in Ajax loader 7

Same filename and directory in other branches
  1. 8 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. 

  6. .ajax-throbber.sk-folding-cube .sk-cube {

  7.     float: left;

  8.     width: 50%;

  9.     height: 50%;

  10.     position: relative;

  11.     -webkit-transform: scale(1.1);

  12.     -ms-transform: scale(1.1);

  13.     transform: scale(1.1);

  14. }

  15. 

  16. .ajax-throbber.sk-folding-cube .sk-cube:before {

  17.     content: '';

  18.     position: absolute;

  19.     top: 0;

  20.     left: 0;

  21.     width: 100%;

  22.     height: 100%;

  23.     background-color: #333;

  24.     -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;

  25.     animation: sk-foldCubeAngle 2.4s infinite linear both;

  26.     -webkit-transform-origin: 100% 100%;

  27.     -ms-transform-origin: 100% 100%;

  28.     transform-origin: 100% 100%;

  29. }

  30. 

  31. .ajax-throbber.sk-folding-cube .sk-cube2 {

  32.     -webkit-transform: scale(1.1) rotateZ(90deg);

  33.     transform: scale(1.1) rotateZ(90deg);

  34. }

  35. 

  36. .ajax-throbber.sk-folding-cube .sk-cube3 {

  37.     -webkit-transform: scale(1.1) rotateZ(180deg);

  38.     transform: scale(1.1) rotateZ(180deg);

  39. }

  40. 

  41. .ajax-throbber.sk-folding-cube .sk-cube4 {

  42.     -webkit-transform: scale(1.1) rotateZ(270deg);

  43.     transform: scale(1.1) rotateZ(270deg);

  44. }

  45. 

  46. .ajax-throbber.sk-folding-cube .sk-cube2:before {

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

  48.     animation-delay: 0.3s;

  49. }

  50. 

  51. .ajax-throbber.sk-folding-cube .sk-cube3:before {

  52.     -webkit-animation-delay: 0.6s;

  53.     animation-delay: 0.6s;

  54. }

  55. 

  56. .ajax-throbber.sk-folding-cube .sk-cube4:before {

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

  58.     animation-delay: 0.9s;

  59. }

  60. 

  61. @-webkit-keyframes sk-foldCubeAngle {

  62.     0%, 10% {

  63.         -webkit-transform: perspective(140px) rotateX(-180deg);

  64.         transform: perspective(140px) rotateX(-180deg);

  65.         opacity: 0;

  66.     }

  67.     25%, 75% {

  68.         -webkit-transform: perspective(140px) rotateX(0deg);

  69.         transform: perspective(140px) rotateX(0deg);

  70.         opacity: 1;

  71.     }

  72.     90%, 100% {

  73.         -webkit-transform: perspective(140px) rotateY(180deg);

  74.         transform: perspective(140px) rotateY(180deg);

  75.         opacity: 0;

  76.     }

  77. }

  78. 

  79. @keyframes sk-foldCubeAngle {

  80.     0%, 10% {

  81.         -webkit-transform: perspective(140px) rotateX(-180deg);

  82.         transform: perspective(140px) rotateX(-180deg);

  83.         opacity: 0;

  84.     }

  85.     25%, 75% {

  86.         -webkit-transform: perspective(140px) rotateX(0deg);

  87.         transform: perspective(140px) rotateX(0deg);

  88.         opacity: 1;

  89.     }

  90.     90%, 100% {

  91.         -webkit-transform: perspective(140px) rotateY(180deg);

  92.         transform: perspective(140px) rotateY(180deg);

  93.         opacity: 0;

  94.     }

  95. }