SHARE
TWEET

Css animasi loading

Iyanyan Nov 8th, 2019 155 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. body{
  2.   background: #28324E;
  3.   font-family: roboto;
  4. }
  5.  
  6. h1{
  7.   color: #fff;
  8.   width: 600px;  
  9. }
  10. /*loader*/
  11. .loader,
  12. .loader:before,
  13. .loader:after {
  14.   background: black;
  15.   -webkit-animation: load1 1s infinite ease-in-out;
  16.   animation: load1 1s infinite ease-in-out;
  17.   width: 1em;
  18.   height: 4em;
  19. }
  20. .loader:before,
  21. .loader:after {
  22.   position: absolute;
  23.   top: 0;
  24.   content: '';
  25. }
  26. .loader:before {
  27.   left: -1.5em;
  28.   -webkit-animation-delay: -0.32s;
  29.   animation-delay: -0.32s;
  30. }
  31. .loader {
  32.   text-indent: -9999em;
  33.   margin: 88px auto;
  34.   position: relative;
  35.   font-size: 11px;
  36.   -webkit-transform: translateZ(0);
  37.   -ms-transform: translateZ(0);
  38.   transform: translateZ(0);
  39.   -webkit-animation-delay: -0.16s;
  40.   animation-delay: -0.16s;
  41. }
  42. .loader:after {
  43.   left: 1.5em;
  44. }
  45. @-webkit-keyframes load1 {
  46.   0%,
  47.   80%,
  48.   100% {
  49.     box-shadow: 0 0 #ffffff;
  50.     height: 4em;
  51.   }
  52.   40% {
  53.     box-shadow: 0 -2em #ffffff;
  54.     height: 5em;
  55.   }
  56. }
  57. @keyframes load1 {
  58.   0%,
  59.   80%,
  60.   100% {
  61.     box-shadow: 0 0 #ffffff;
  62.     height: 4em;
  63.   }
  64.   40% {
  65.     box-shadow: 0 -2em #ffffff;
  66.     height: 5em;
  67.   }
  68. }
  69. /*akhir loader*/
  70.  
  71. /*loader 2*/
  72. .loader2 {
  73.   font-size: 20px;
  74.   margin: 100px auto;
  75.   width: 1em;
  76.   height: 1em;
  77.   border-radius: 50%;
  78.   position: relative;
  79.   text-indent: -9999em;
  80.   -webkit-animation: load4 1.3s infinite linear;
  81.   animation: load4 1.3s infinite linear;
  82.   -webkit-transform: translateZ(0);
  83.   -ms-transform: translateZ(0);
  84.   transform: translateZ(0);
  85. }
  86. @-webkit-keyframes load4 {
  87.   0%,
  88.   100% {
  89.     box-shadow: 0 -3em 0 0.2em #ffffff, 2em -2em 0 0em #ffffff, 3em 0 0 -1em #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 -1em #ffffff, -3em 0 0 -1em #ffffff, -2em -2em 0 0 #ffffff;
  90.   }
  91.   12.5% {
  92.     box-shadow: 0 -3em 0 0 #ffffff, 2em -2em 0 0.2em #ffffff, 3em 0 0 0 #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 -1em #ffffff, -3em 0 0 -1em #ffffff, -2em -2em 0 -1em #ffffff;
  93.   }
  94.   25% {
  95.     box-shadow: 0 -3em 0 -0.5em #ffffff, 2em -2em 0 0 #ffffff, 3em 0 0 0.2em #ffffff, 2em 2em 0 0 #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 -1em #ffffff, -3em 0 0 -1em #ffffff, -2em -2em 0 -1em #ffffff;
  96.   }
  97.   37.5% {
  98.     box-shadow: 0 -3em 0 -1em #ffffff, 2em -2em 0 -1em #ffffff, 3em 0em 0 0 #ffffff, 2em 2em 0 0.2em #ffffff, 0 3em 0 0em #ffffff, -2em 2em 0 -1em #ffffff, -3em 0em 0 -1em #ffffff, -2em -2em 0 -1em #ffffff;
  99.   }
  100.   50% {
  101.     box-shadow: 0 -3em 0 -1em #ffffff, 2em -2em 0 -1em #ffffff, 3em 0 0 -1em #ffffff, 2em 2em 0 0em #ffffff, 0 3em 0 0.2em #ffffff, -2em 2em 0 0 #ffffff, -3em 0em 0 -1em #ffffff, -2em -2em 0 -1em #ffffff;
  102.   }
  103.   62.5% {
  104.     box-shadow: 0 -3em 0 -1em #ffffff, 2em -2em 0 -1em #ffffff, 3em 0 0 -1em #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 0 #ffffff, -2em 2em 0 0.2em #ffffff, -3em 0 0 0 #ffffff, -2em -2em 0 -1em #ffffff;
  105.   }
  106.   75% {
  107.     box-shadow: 0em -3em 0 -1em #ffffff, 2em -2em 0 -1em #ffffff, 3em 0em 0 -1em #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 0 #ffffff, -3em 0em 0 0.2em #ffffff, -2em -2em 0 0 #ffffff;
  108.   }
  109.   87.5% {
  110.     box-shadow: 0em -3em 0 0 #ffffff, 2em -2em 0 -1em #ffffff, 3em 0 0 -1em #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 0 #ffffff, -3em 0em 0 0 #ffffff, -2em -2em 0 0.2em #ffffff;
  111.   }
  112. }
  113. @keyframes load4 {
  114.   0%,
  115.   100% {
  116.     box-shadow: 0 -3em 0 0.2em #ffffff, 2em -2em 0 0em #ffffff, 3em 0 0 -1em #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 -1em #ffffff, -3em 0 0 -1em #ffffff, -2em -2em 0 0 #ffffff;
  117.   }
  118.   12.5% {
  119.     box-shadow: 0 -3em 0 0 #ffffff, 2em -2em 0 0.2em #ffffff, 3em 0 0 0 #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 -1em #ffffff, -3em 0 0 -1em #ffffff, -2em -2em 0 -1em #ffffff;
  120.   }
  121.   25% {
  122.     box-shadow: 0 -3em 0 -0.5em #ffffff, 2em -2em 0 0 #ffffff, 3em 0 0 0.2em #ffffff, 2em 2em 0 0 #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 -1em #ffffff, -3em 0 0 -1em #ffffff, -2em -2em 0 -1em #ffffff;
  123.   }
  124.   37.5% {
  125.     box-shadow: 0 -3em 0 -1em #ffffff, 2em -2em 0 -1em #ffffff, 3em 0em 0 0 #ffffff, 2em 2em 0 0.2em #ffffff, 0 3em 0 0em #ffffff, -2em 2em 0 -1em #ffffff, -3em 0em 0 -1em #ffffff, -2em -2em 0 -1em #ffffff;
  126.   }
  127.   50% {
  128.     box-shadow: 0 -3em 0 -1em #ffffff, 2em -2em 0 -1em #ffffff, 3em 0 0 -1em #ffffff, 2em 2em 0 0em #ffffff, 0 3em 0 0.2em #ffffff, -2em 2em 0 0 #ffffff, -3em 0em 0 -1em #ffffff, -2em -2em 0 -1em #ffffff;
  129.   }
  130.   62.5% {
  131.     box-shadow: 0 -3em 0 -1em #ffffff, 2em -2em 0 -1em #ffffff, 3em 0 0 -1em #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 0 #ffffff, -2em 2em 0 0.2em #ffffff, -3em 0 0 0 #ffffff, -2em -2em 0 -1em #ffffff;
  132.   }
  133.   75% {
  134.     box-shadow: 0em -3em 0 -1em #ffffff, 2em -2em 0 -1em #ffffff, 3em 0em 0 -1em #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 0 #ffffff, -3em 0em 0 0.2em #ffffff, -2em -2em 0 0 #ffffff;
  135.   }
  136.   87.5% {
  137.     box-shadow: 0em -3em 0 0 #ffffff, 2em -2em 0 -1em #ffffff, 3em 0 0 -1em #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 0 #ffffff, -3em 0em 0 0 #ffffff, -2em -2em 0 0.2em #ffffff;
  138.   }
  139. }
  140. /*akhir loader2*/
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top