css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

CSS loading spinner


  1. nice looking effect

    thanks for sharing

  2. Freaking awesomely done with no js!

  3. How are you getting it to animate? I copied your code to try it out in a new file but it's not moving. Do you think you could help me out?

  4. I figured it out nevermind! Thanks for this :)

  5. awesome! looks like battle.net loading :p

  6. Very clean , love it !

  7. Love this, but does anyone have a solution for Firefox? Border-radius seems to be acting strange on FF as opposed to all other browsers...

  8. One of the most stylish loading indicators.

  9. My favorite spinner Martin. Thank you.

    I tried to replicate it with one div but couldn't quite pull it off.

    Did manage this though:

    Inspired by you. :)

  10. @EricPorter Thank you! Your version looks cool!

  11. Hey Martin - Great work btw. Can i use this in one of my projects?. Is the code MIT licensed ? or Can you point me to the license for using this ?

  12. @nishanthcs Hi, thank you! Feel free to use it in any of your projects. It's indeed MIT licensed. You can check it out at the top of this page: https://codepen.io/martinvd/details/xbQJom

  13. https://codepen.io/svnt/pen/wGmXNv You stole the loader from this guy here >:/

  14. @NitrodeXXer How about having a better look at the creation date before blaming me? The one you referenced is a copy of my pen.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.