load.css

   1 span {
   2   animation: bottom-ripple 1s ease-in-out infinite -50ms;
   3   background-color: #c0b283;
   4   border-radius: 50%;
   5   box-shadow: 0 0.5em 0.5em rgba(0,0,0, 0.4);
   6   height: 6em;
   7   position: relative;
   8   width: 6em;
   9 }
  10 span::before, span::after {
  11   border-radius: inherit;
  12   box-shadow: 0 0.5em 0.5em rgba(0,0,0, 0.4);
  13   content: "";
  14   left: 50%;
  15   position: absolute;
  16   top: 50%;
  17 }
  18 span::before {
  19   animation: middle-ripple 1s ease-in-out infinite -25ms;
  20   background-color: #075fed;
  21   height: 20em;
  22   margin: -4em 0 0 -4em;
  23   width: 20em;
  24 }
  25 span::after {
  26   animation: top-ripple 1s ease-in-out infinite;
  27   background-color: #f4f4f4;
  28   height: 16em;
  29   margin: -2em 0 0 -2em;
  30   width: 16em;
  31 }
  32 @keyframes bottom-ripple {
  33   0% {
  34     box-shadow: 0 0.5em 0.5em rgba(0,0,0, 0.4);
  35     transform: scale(1);
  36   }
  37   50% {
  38     box-shadow: 0 1.5em 1.5em rgba(0,0,0, 0.4);
  39     transform: scale(1.25);
  40   }
  41 }
  42 @keyframes middle-ripple {
  43   0% {
  44     box-shadow: 0 0.5em 0.5em rgba(0,0,0, 0.4);
  45     transform: scale(1);
  46   }
  47   50% {
  48     box-shadow: 0 1.5em 1.5em rgba(0,0,0, 0.4);
  49     transform: scale(1.1);
  50   }
  51 }
  52 @keyframes top-ripple {
  53   0% {
  54     box-shadow: 0 0.5em 0.5em rgba(0,0,0, 0.4);
  55     transform: scale(1);
  56   }
  57   50% {
  58     box-shadow: 0 1.5em 1.5em rgba(0,0,0, 0.4);
  59     transform: scale(1.4);
  60   }
  61 }
  62 Resources