Android Lollipop Material Design Spinner

These are gifs you can use in your projects. These animation come from the Material Design language Google introduced (here are some examples of material design).

In need of a CSS Android Lollipop loading animation? Try this codepen.

<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
 <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>
html, body { height: 100%; }

body {
 display: flex;
 align-items: center;
 justify-content: center;
}

// Here is where the magic happens

$offset: 187;
$duration: 1.4s;

.spinner {
 animation: rotator $duration linear infinite;
}

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

.path {
 stroke-dasharray: $offset;
 stroke-dashoffset: 0;
 transform-origin: center;
 animation:
 dash $duration ease-in-out infinite, 
 colors ($duration*4) ease-in-out infinite;
}

@keyframes colors {
 0% { stroke: #4285F4; }
 25% { stroke: #DE3E35; }
 50% { stroke: #F7C223; }
 75% { stroke: #1B9A59; }
 100% { stroke: #4285F4; }
}

@keyframes dash {
 0% { stroke-dashoffset: $offset; }
 50% {
 stroke-dashoffset: $offset/4;
 transform:rotate(135deg);
 }
 100% {
 stroke-dashoffset: $offset;
 transform:rotate(450deg);
 }
}

 

Author Bio

Thank you for your interest in my blog! On this miniblog, I write mostly short (technical) blog posts that might interest other people. Read more about me or feel free to contact me.

 

6 thoughts on “Android Lollipop Material Design Spinner

Leave a Reply

Your email address will not be published. Required fields are marked *