Animating loading spinners with CSS

              @keyframes my-sweet-animation {
                  0% { /* ... */ }
                 50% { /* ... */ }
                100% { /* ... */ }
              }
            

              @keyframes my-sweet-animation { /* ... */ }

              .thing-to-animate {
                /* shorthand */
                animation: 2s my-sweet-animation;

                /* individual sub-properties */
                animation-name: my-sweet-animation;
                animation-duration: 2s;
                animation-timing-function: ease;
              }
            

• animation-name
• animation-duration
• animation-delay
• animation-direction
• animation-iteration-count
• animation-timing-function
• animation-fill-mode
• animation-play-state

              @keyframes fade-out-in {
                  0% { opacity: 1; }
                 50% { opacity: 0; }
                100% { opacity: 1; }
              }

              .circle {
                animation: 1s fade-out-in infinite;
              }
            

              @keyframes fade-out {
                  0% { opacity: 1; }
                100% { opacity: 0; }
              }

              .circle {
                animation: 0.5s fade-out infinite;
                animation-direction: alternate;
              }
            

              @keyframes rotate {
                  0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
              }

              .star {
                animation: 2.5s rotate infinite;
                animation-timing-function: linear;
              }
            

              .circle-1 {
                animation: 1s linear rotate infinite;
              }
              .circle-2 {
                animation: 60s linear rotate infinite;
              }
            

              .doge {
                animation: 1.5s linear rotate infinite;
              }
            

              @keyframes fade-in {
                  0% { opacity: 0.2; }
                100% { opacity: 1; }
              }

              [class^=dot-] {
                animation: 500ms ease-in fade-in infinite alternate;
              }
              .dot-1 { animation-delay: 0s; }
              .dot-2 { animation-delay: 125ms; }
              .dot-3 { animation-delay: 250ms; }
              .dot-4 { animation-delay: 375ms; }
              .dot-5 { animation-delay: 500ms; }
              .dot-6 { animation-delay: 625ms; }
              .dot-7 { animation-delay: 750ms; }
              .dot-8 { animation-delay: 875ms; }
            

              // SASS
              $animation_speed: 1s;
              $number_of_dots: 8;

              [class^=dot-] {
                animation:
                  ($animation_speed / 2) ease-in fade-in infinite alternate;
              }
              @for $i from 1 through $number_of_dots {
                .dot-#{$i} {
                  animation-delay:
                    ($animation_speed / $number_of_dots) * ($i - 1);
                }
              }
            

              @keyframes bounce {
                  0% { transform: translateY(0); }
                100% { transform: translateY(-200%); }
              }

              .ball {
                animation: 300ms bounce infinite alternate;
                animation-timing-function:
                  cubic-bezier(0.38, 0.17, 0.11, 0.85);
              }
            

              @keyframes bounce-3rd {
                  0% { transform: translateY(0); }
                 16% { transform: translateY(-125%); }
                 33% { transform: translateY(0); }
                100% { transform: translateY(0); }
              }

              [class^=ball-] {
                animation: 800ms ease-out bounce-3rd infinite;
              }
              .ball-1 { animation-delay: 0s; }
              .ball-2 { animation-delay: 150ms; }
              .ball-3 { animation-delay: 300ms; }