You are here

Home » API reference » Ajax loader 8

rotating-plane.css in Ajax loader 8

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