Animated Pure CSS spinner

This code sample will allow you to include an animated spinner just by using CSS. This makes it extremely lightweight and performant.

HTML
<div id="spinner"></div>

CSS
#spinner {
    width: 150px;
    height: 150px;
    -webkit-animation: sweep .5s infinite linear;
    border-radius: 50%;
    border-bottom: 5px solid #0cb2eb;
    margin: 20px auto;
}
@-webkit-keyframes sweep { to { transform: rotate(360deg); } }

Directions:
- place the HTML wherever you want it to show up.

Note:
This snippet focuses on iOS development. Make sure to verify/adapt any vendor prefixes. Back to main listing.

Back to Blog