You are here

Home » API reference » Ajax loader 8

double-bounce.css in Ajax loader 8

Same filename and directory in other branches
  1. 7 css/double-bounce.css
.ajax-throbber.sk-double-bounce .sk-child {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #333;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: sk-doubleBounce 2s infinite ease-in-out;
  animation: sk-doubleBounce 2s infinite ease-in-out;
}
.ajax-throbber.sk-double-bounce .sk-double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-doubleBounce {
  0%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  } }

@keyframes sk-doubleBounce {
  0%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  } }

File

css/double-bounce.css
View source 
  1. .ajax-throbber.sk-double-bounce .sk-child {

  2.   width: 100%;

  3.   height: 100%;

  4.   border-radius: 50%;

  5.   background-color: #333;

  6.   opacity: 0.6;

  7.   position: absolute;

  8.   top: 0;

  9.   left: 0;

  10.   -webkit-animation: sk-doubleBounce 2s infinite ease-in-out;

  11.   animation: sk-doubleBounce 2s infinite ease-in-out;

  12. }

  13. .ajax-throbber.sk-double-bounce .sk-double-bounce2 {

  14.   -webkit-animation-delay: -1.0s;

  15.   animation-delay: -1.0s;

  16. }

  17. 

  18. @-webkit-keyframes sk-doubleBounce {

  19.   0%,

  20.   100% {

  21.     -webkit-transform: scale(0);

  22.     transform: scale(0);

  23.   }

  24.   50% {

  25.     -webkit-transform: scale(1);

  26.     transform: scale(1);

  27.   } }

  28. 

  29. @keyframes sk-doubleBounce {

  30.   0%,

  31.   100% {

  32.     -webkit-transform: scale(0);

  33.     transform: scale(0);

  34.   }

  35.   50% {

  36.     -webkit-transform: scale(1);

  37.     transform: scale(1);

  38.   } }