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); } }
Hi Thomas,
Very helpful post, I hope it is okay if I download an image from here to use in my projects ?
Yes.
It does not work in Firefox =/
USE CHROME
Does not work :(
could you please make a spinner like google’s new one?i think it’s very goodlooking(*/ω\*)