Giacomo Balli profile picture
Giacomo Balli
The Mobile Guy

Over two decades of experience at your service.
I help business owners make better decisions.

Let's Chat LinkedIn

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.

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

#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); } }

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

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

#css, #spinner, #cssonly
Published: Sun, Jan 10 2016 @ 18:55:58
Back to Blog