Making It Your Web

Microsoft Loader With CSS3

  • Posted 9th Aug 2013 @ 11:28:36
  • Last update 27th Jan 2014 @ 17:22:51
  • By Alex Hall
  • In / CSS3 // Tutorial /

So, a requirement of a recent project of mine was to create a "Metro"-themed website. I really wanted those nice loaders that you get with Microsoft applications today and thought it's probably possible with CSS3. And it is!

Check it out on JSFiddle and let me know what you think and whether there are any improvements you can think of. I've added support for the browsers that support transitions so the code is currently fairly bloated but using a CSS pre-processor you can avoid this headache.

For an example here check out the below!

Microsoft loader in CSS3

Comments (1)

Nice work! by Craig

on 28th Nov 2014 @ 00:12:46

Nice work! What are all the additional dancing-dots-slideXX keyframes for?

0 28


Add A Comment

Please note: all comments are moderated before they are published on this page.

Cancel Reply