Google-style Pure CSS Loader

Google's loading animation is quite nice, flipping a circle over on itself while it cycles between some bright, Google-esque colors. My main issue has always been that they continue to use a low resolution animated GIF for it. BOO. Let's do it in CSS.

First off, here's our html. We've got a container div to center the loader and add margins, but it's not necessary other than for presentation. The only necessary div is the one with the "dot" class.

html
<div class="google-loader">
  <div class="dot">
  </div>
</div>

See the Pen Google Loader Animation in CSS by Jesse Couch (@designcouch) on CodePen.

Our CSS is more complex. Most is pretty straight-forward, but if you want know where the nuts and bolts lie, look to the @keyframes animation towards the bottom. There are four colors, so each 25% of the animation cycles from one to the next. The background color handles the subtle shading, while the border thickness and color handle the basic animation. There are no transforms applied here at all.

css
$animationLength: 2s;

* {
  box-sizing:border-box;
}

.google-loader {
  height:100px;
  width:100px;
  position:relative;
  margin:50px auto;
  .dot {
    position:absolute;
    height:100%;
    width:100%;
    z-index:1;
    border-radius:50px;
    background:#df4a42;
    border-right:0px solid #ffd649;
    border-left:50px solid #df4a42;
    border-top:0px solid transparent;
    border-bottom:0px solid transparent;
    animation:flippingAnimation $animationLength linear infinite;
  }
}

@keyframes opacity {
  to {
    opacity:0;
  }
}

@keyframes flippingAnimation {
  /* RED TO YELLOW */
  0% {
    border-right:0px solid #ffc500;
    display:block;
  }
  12.4% {
    background:#ed726c;
  }
  12.5% {
    border-right:50px solid #ffd649;
    border-left:50px solid #df4a42;
    background:#ffe486;
  }
  24.9% {
    border-right:50px solid #ffd649;
    background:#ffd649;
    border-left:0px solid #d8291f;
    border-top:0px solid transparent;
    border-bottom:0px solid transparent;
  }
  /* Yellow to Green */
  25% {
    border-right:0px solid #ffd649;
    border-left:0px solid #d8291f;
    border-top:50px solid #ffd649;
    border-bottom:0px solid #ffd649;
    background:#ffd649;
  }
  37.4% {
    background:#ffde6e;
  }
  37.5% {
    border-right:0px solid transparent;
    border-left:0px solid transparent;
    border-top:50px solid #ffd649;
    border-bottom:50px solid #28ad6b;
    background:#109f58;
  }
  49.9% {
    border-right:0px solid transparent;
    border-left:0px solid transparent;
    border-top:0px solid #ffd649;
    border-bottom:50px solid #28ad6b;
    background:#28ad6b;
  }
  /* Green to Blue */
  50% {
    border-top:0px solid transparent;
    border-bottom:0px solid transparent;
    border-left:0px solid #377af6;
    border-right:50px solid #28ad6b;
    background:#28ad6b;
  }
  62.4% {
    background:#2abb71;
  }
  62.5% {
    border-top:0px solid transparent;
    border-bottom:0px solid transparent;
    border-left:50px solid #377af6;
    border-right:50px solid #28ad6b;
    background:#518af4;
  }
  74.9% {
    border-top:0px solid transparent;
    border-bottom:0px solid transparent;
    border-left:50px solid #377af6;
    border-right:0px solid #28ad6b;
    background:#377af6;
  }
  /* Blue to Red */
  75% {
    border-top:0px solid #df4a42;
    border-bottom:50px solid #377af6;
    border-left:0px solid transparent;
    border-right:0px solid transparent;
    background:#377af6;
  }
  87.4% {
    background:#316bd7;
  }
  87.5% {
    border-top:50px solid #df4a42;
    border-bottom:50px solid #377af6;
    border-left:0px solid transparent;
    border-right:0px solid transparent;
    background:#f26c65;
  }
  100% {
    border-top:50px solid #df4a42;
    border-bottom:0px solid #377af6;
    border-left:0px solid transparent;
    border-right:0px solid transparent;
    background:#df4a42;
  }
}

See the Pen Google Loader Animation in CSS by Jesse Couch (@designcouch) on CodePen.

Put those together, with no Javascript or any further complications, and here's your final result:

demo

See the Pen Google Loader Animation in CSS by Jesse Couch (@designcouch) on CodePen.

As usual with these shorter Codepen posts, I'm not going to go into too much detail on the process - any questions on how this was done, feel free to ask below and I'll chime in!

Did I help you out?

Read More

←  A Fresh Coat of Paint Pure CSS Long Shadows  →

There is 1 comment. Add yours.

A Note from the Moderator

Thanks for taking the time to comment! I'll respond as quickly as possible if necessary. In the meantime, please keep the following in mind:

  • All comments must be appropriate. I'll delete 'em if you get nasty.
  • Please allow for response time. I'm here as much as possible, but can't always respond as quickly as some would like.
  • Please stay on topic.
  • I don't work for free—if you want custom work, feel free to get in touch and I'll write up a quote!
  1. Your post was very helpful for me. I couldn't find some of this information in tutorials for a long time. Now I understand what I did wrong with it.

    Reply to Online