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

A fast implementation of an loading indicator idea that I had :-)

Comments

  1. Nice! That's pretty brilliant.

  2. I'm guessing animating border colors performs better than rotations...? Either way, nice work.

  3. Nathan Long: Thanks. Sure, could also be done with rotations and animation steps. But animate borders seems easier to me :-)

  4. simple,elegant and high performance. nice job :) transform: rotate(xdeg) is messier and pseudo's wont ever animate on old webkit versions stuck in phones

  5. Interesting and novel. Kind of Esher-ish. I would be interested in seeing some odd-sided polygons, I think they might look dramatically different.

  6. Thanks a lot. Mh, odd-sided polygon – nice idea. Maybe I'll try it out once.

  7. @mobibob Here's my try with odd sided polygon (pantagon) http://codepen.io/0x04/pen/BfAzv

  8. Simple, performant and a few of retro style. I love it :)

  9. line 4 CSS code: $borderColor1 Thats like a CSS variable, huh? , this might help with some code issues Im having, cool thanks .

  10. @webisers Please note that this pen is uses the SCSS preprocessor. Plain CSS have unfortunately no variables support, yet :-/

  11. Hey! I really like these spinners and was looking to implement them in a site that I am building for a local restaurant but thought it best to ask permission first :-). Thanks

  12. @apamphilon Sure, you can post the link here if you're done :-) Would be nice to see it in production.

  13. Thanks, that's great, I will do!

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

You must be logged in to comment.
Loading...
Loading...