CSS Spinners of all Shapes and Sizes

A Bespoke Collection 31 May 2023

Let’s spin round and round！ (*´∀`)♪

Design Constraints

I have restricted myself to only loading spinners that require a single html div. In addition, excepting the last one, all of the spinners don’t depend on the page background color. I have also assumed a relatively modern browser in order to keep the required CSS clean, short, and free of ugly hacks.

Minimal viable spinner

View Code

    .minimal1 {
        width: 50px;
        height: 50px;
        border: 7px solid;
        border-color: #888 transparent transparent;
        border-radius: 100%;
        animation: spin 2s infinite linear;
    }

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

Double whirl

View Code

    .minimal {
        width: 50px;
        height: 50px;
        border: 7px solid;
        border-color: transparent #888;
        border-radius: 100%;
        animation: spin 2s infinite linear;
    }

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

Pinwheel

View Code


    .pinwheel {
        width: 0px;
        height: 0px;
        border: 20px solid;
        border-color: transparent #888;
        border-radius: 100%;
        animation: spin 2s infinite linear;
    }

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

Beachball

View Code

    .beachball {
        width: 0px;
        height: 0px;
        border: 20px solid;
        border-color: #da0000 #e7e700 #00ad00 #0250ff;
        border-radius: 100%;
        animation: spinmultiple 2s infinite ease-in-out;
    }

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

Comet

View Code

    .whirlpool {
        width: 50px;
        height: 50px;
        border: 7px solid;
        border-style: solid solid none none;
        border-color: #888 transparent transparent ;
        border-radius: 100%;
        animation: spin 2s infinite linear;
    }

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

Whirlpool

View Code

    .whirlpool2 {
        width: 50px;
        height: 50px;
        border-width: 7px 7px 0 7px;
        border-style: solid solid  solid  solid;
        border-color: #888 transparent transparent #888 ;
        border-radius: 100%;
        animation: spin 2s infinite linear;
    }

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

Spinning on track

View Code

    .track {
        width: 50px;
        height: 50px;
        border: 7px solid;
        border-color: #888 #88888822 #88888822;
        border-radius: 100%;
        animation: spin 2s infinite linear;
    }

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

Flash

View Code


    .blinker {
        display: inline-block;
        animation: blinkanimation 1.7s infinite ease-in-out;
        font-size: 20px;
    }
    
    @keyframes blinkanimation {
      0%, 100% {
        opacity: 0.2;
      }
      50% {
        opacity: 0.8;
      }
    }

Triple fade

View Code

    .triplefade {
        display: block;
        width: 20px;
        height: 20px;
        background: #0000;
        border-radius: 50%;
        animation: triplefader 1s infinite ease-in-out;
    }

    @keyframes triplefader {
      0%, 100% {
        box-shadow: #8880 30px 0, #8880 60px 0, #8880 90px 0;
      }
      30% {
        box-shadow: #888f 30px 0, #8880 60px 0, #8880 90px 0;
      }
      50% {
        box-shadow: #888f 30px 0, #888f 60px 0, #8880 90px 0;
      }
      80% {
        box-shadow: #888f 30px 0, #888f 60px 0, #888f 90px 0;
      }
    }

Triple Bounce

View Code

    .quadbounce {
        display: block;
        width: 20px;
        height: 20px;
        background: #0000;
        border-radius: 50%;
        animation: quadbouncer 1s infinite ease-in-out;
    }

    @keyframes quadbouncer {
      0%, 100% {
        box-shadow: #888f 30px 0, #888f 60px 0, #888f 90px -5px;
      }
      30% {
        box-shadow: #888f 30px -10px, #888f 60px 0, #888f 90px 0;
      }
      50% {
        box-shadow: #888f 30px -5px, #888f 60px -10px, #888f 90px 0;
      }
      80% {
        box-shadow: #888f 30px 0,     #888f 60px -5px, #888f 90px -10px;
      }
    }

Thinking Rectangles Ripple

View Code

    .rectripple, .rectripple:before, .rectripple:after {
        height: 10px;
        margin-bottom: 30px;
        background: #8888;
        border-radius: 2px;
        animation: rectrippler 1.5s infinite ease-in-out;
    }
    .rectripple:before, .rectripple:after {
        content: "";
        position: relative;
        display: block;
        left: 0px;
        top: 20px;
        animation-delay: 0.2s;
    }
    .rectripple:after {
        left: 0px;
        top: 0px;
        display: block;
        animation-delay: 0.4s;
    }

    @keyframes rectrippler {
      0%, 80%, 100% {
        width: 70px;
      }
      50% {
        width: 100px;
      }
    }

Dots

View Code

    .dots {
        margin: 50px;
        width: 10px;
        height: 10px;
        background: transparent;
        border-radius: 100%;
        box-shadow: #888 20px 20px,
                    #888 -20px -20px,
                    #888 20px -20px,
                    #888 -20px 20px;
        animation: spin 2s infinite linear;
    }

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

Dots Extra

View Code

    .dotsExtra {
        margin: 50px;
        width: 10px;
        height: 10px;
        background: transparent;
        border-radius: 100%;
        box-shadow: #888  20px  20px,
                    #888 -20px -20px,
                    #888  20px -20px,
                    #888 -20px  20px,
                    #888 0 27px,
                    #888 27px 0,
                    #888 -27px 0,
                    #888 0 -27px;
        animation: spin 2s infinite linear;
    }

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

Dazzling spinner of many colors

View Code

    .dotsDazzle {
        margin: 50px;
        width: 10px;
        height: 10px;
        background: transparent;
        border-radius: 100%;
        box-shadow: red  20px  20px,
                    orange -20px -20px,
                    #e7e700  20px -20px,
                    green -20px  20px,
                    blue 0 27px,
                    purple 27px 0,
                    indigo -27px 0,
                    crimson 0 -27px;
        animation: spin 2s infinite linear;
    }

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

Flip

View Code

    .flip {
        margin: 50px;
        width: 50px;
        height: 50px;
        background: #888;
        border-radius: 100%;
        animation: flip 1s infinite ease-in-out;
    }

    @keyframes flip {
      0%, 100% {
        transform: scaleX(0);
      }
      50% {
        transform: scaleX(1);
      }
    }

Flip Colors

View Code

    .flipcolors {
        margin: 50px;
        width: 50px;
        height: 50px;
        background: #aa6;
        border-radius: 100%;
        animation: flip 1s infinite ease-in-out, colors 2s infinite steps(1);
    }
    
    @keyframes flip {
      0%, 100% {
        transform: scaleX(0);
      }
      50% {
        transform: scaleX(1);
      }
    }
    
    @keyframes colors {
      0%, 100% {
        background: #44f;
      }
      50% {
        background: #f44;
      }
    }

Timepiece

View Code

    .times {
        width: 50px;
        height: 50px;
        border: 5px solid #8888;
        border-radius: 100%;
        animation: spin 2s infinite linear;
    }
    .times:after {
        width: 18px; height: 4px;
        border-radius: 50%;
        content: "";
        display: block;
        position: absolute;
        background: #888;
        margin-top: 18px;
        margin-left: 20px;
    }
    .times:before {
        width: 6px; height: 6px;
        border: 2px solid #888;
        background: #eee;
        content: "";
        display: block;
        position: absolute;
        margin: auto;
        border-radius: 50%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
    }

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

Emoji Spin

⚙️

View Code

    .emoji {
        display: inline-block;
        animation: spin 2s infinite linear;
        font-size: 40px;
    }

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

Emoji Flip

🤔

View Code

    .emojiflip {
        display: inline-block;
        animation: flipy 2s infinite ease-in-out;
        font-size: 40px;
        opacity: 0.5;
    }
    
    @keyframes flipy {
      0%, 100% {
        transform: rotate3d(0,0,0,0);
      }
      50% {
        transform: rotate3d(0,1,0,180deg);
      }
    }

Emoji Bounce

❤️

View Code

    .emojibounce {
        display: inline-block;
        animation: bounce 1s infinite ease-in-out;
        font-size: 40px;
        opacity: 0.5;
    }
    
    @keyframes bounce {
      0%, 100% {
        transform: scale(1.2);
      }
      50% {
        transform: scale(0.9);
      }
    }

Emoji Rock

🚀

View Code

    .emojitremble {
        display: inline-block;
        animation: tremble 1s infinite ease-in-out;
        font-size: 40px;
    }
    
    @keyframes tremble {
      0%, 100% {
        transform: rotate(0);
      }
      50% {
        transform: rotate(-10deg);
      }
    }

Space

View Code

    .sol {
        margin: 90px;
        width: 10px;
        height: 10px;
        background: yellow;
        border-radius: 100%;
        box-shadow: red 50px 50px 0 0;
        animation: spin 10s infinite linear;
    }
    .sol:after {
        content: "";
        display: block;
        position: absolute;
        width: 10px;
        height: 10px;
        background: #ffc;
        border-radius: 100%;
        box-shadow: aqua 30px 30px, yellow 0 0 10px, yellow 0 0 10px;
        animation: spin 5s infinite linear;
    }
    .sol:before {
        content: "";
        display: block;
        position: absolute;
        width: 10px;
        height: 10px;
        background: blue;
        border-radius: 100%;
        box-shadow: green 20px 20px;
        animation: spin 2s infinite linear;
    }

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

Faded swipe

View Code

    .fadedSwipe {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: linear-gradient(to right, #888 10%, #88888800 42%);
        animation: spin 1.4s infinite linear;
        transform: translateZ(0);
    }
    .fadedSwipe:before {
        width: 50%;
        height: 50%;
        background: #888;
        border-radius: 100% 0 0 0;
        display: block;
        content: '';
    }
    .fadedSwipe:after {
        background: white;/*background*/
        width: 75%;
        height: 75%;
        border-radius: 50%;
        content: '';
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }

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

Retro

Bounce

View Code

.bounce {
  width: 30px;
  height: 30px;
  margin: 30px;
  margin-top: 100px;
  background: #f008;
  background-image: radial-gradient(farthest-corner at 40px 40px, #43e8 0%, #f358 100%);
  border-radius: 50%;
  animation: bouncer 1.5s infinite ease-in-out;
}
@keyframes bouncer {
      0%, 100% { transform: translate(0,0); }
       2% { transform: translateY(7.5px) scaleY(0.5) scaleX(1.5); }
      10% { transform: translateY(0    ) scaleY(1.0)            ; }
      25% { transform: translateY(-50px) scaleY(1.2) scaleX(0.8); }
      40% { transform: translateY(-80px) scaleY(1.1) scaleX(0.9); }
      55% { transform: translateY(-90px) scaleY(1.0)            ; }
      70% { transform: translateY(-80px) scaleY(1.1) scaleX(0.9); }
      85% { transform: translateY(-50px) scaleY(1.2) scaleX(0.8); }
}

CSS Spinners of all Shapes and Sizes

A Bespoke Collection 31 May 2023

Design Constraints

Minimal viable spinner

Double whirl

Pinwheel

Beachball

Comet

Whirlpool

Spinning on track

Flash

Triple fade

Triple Bounce

Thinking Rectangles Ripple

Dots

Dots Extra

Dazzling spinner of many colors

Flip

Flip Colors

Timepiece

Emoji Spin

Emoji Flip

Emoji Bounce

Emoji Rock

Space

Faded swipe

Retro

Bounce

Relaxing Ripple