You are here

Home » API reference » Ajax loader 7

rotating-plane.css in Ajax loader 7

Same filename and directory in other branches
  1. 8 css/rotating-plane.css
.ajax-throbber.sk-rotating-plane {
    position: inherit;
    background-color: #333;
    -webkit-animation: sk-rotatePlane 1.2s infinite ease-in-out;
    animation: sk-rotatePlane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotatePlane {
    0% {
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    }
    50% {
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    }
    100% {
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}

@keyframes sk-rotatePlane {
    0% {
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    }
    50% {
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    }
    100% {
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}

File

css/rotating-plane.css
View source 
  1. .ajax-throbber.sk-rotating-plane {

  2.     position: inherit;

  3.     background-color: #333;

  4.     -webkit-animation: sk-rotatePlane 1.2s infinite ease-in-out;

  5.     animation: sk-rotatePlane 1.2s infinite ease-in-out;

  6. }

  7. 

  8. @-webkit-keyframes sk-rotatePlane {

  9.     0% {

  10.         -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);

  11.         transform: perspective(120px) rotateX(0deg) rotateY(0deg);

  12.     }

  13.     50% {

  14.         -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);

  15.         transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);

  16.     }

  17.     100% {

  18.         -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

  19.         transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

  20.     }

  21. }

  22. 

  23. @keyframes sk-rotatePlane {

  24.     0% {

  25.         -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);

  26.         transform: perspective(120px) rotateX(0deg) rotateY(0deg);

  27.     }

  28.     50% {

  29.         -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);

  30.         transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);

  31.     }

  32.     100% {

  33.         -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

  34.         transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

  35.     }

  36. }