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

Animated SVG for use as loading animations.

  1. svg


  1. This looks awesome! It doesn't work in Firefox, though. But that can be fixed by simply adding zeros to the durations:

    dur="0.6s" instead of dur=".6s"

    Firefox always has had trouble with time, animation-delay: 0; won't work, but animation-delay: 0s; will, for example.

  2. @Michiel Thanks that's a great tip! I've updated and it's working fine in Firefox now :)

  3. they're fantastic. kudos and thank you :)

  4. Awesome! Loved it! =)

  5. Chrome 45 warns: "SVG's SMIL animations (, , etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead."


  6. If you get the deprecated Warning you can easily add the animation with CSS/SASS:

    @include animation("400ms rotate linear infinite");
    @include keyframes(rotate){
        0% { @include transform(rotate(0)); }
        100% { @include transform(rotate(360deg)); }
  7. These are nice. Thanks! I'll be using a slightly altered one of these in a post and I'll be sure to link back to this for credit.

  8. This does not work on IE11. Is there any alternative for IE11?

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

You must be logged in to comment.