123
user profile image

A CSS only solution that recreates the Material Design preloader; or, who needs jQuery anyway?

You should set aria-busy to false when your stuff is loaded.

Tests

Primarily tested in Safari 8 with VoiceOver on OS X 10.10 Yosemite.

Also tested in these browsers

  • Firefox 33 on OS X 10.10 Yosemite
  • Firefox 16 on OS X 10.10 Yosemite
  • Chrome 38 on OS X 10.10 Yosemite
  • Internet Explorer 11 on Windows 7
  • Internet Explorer 10 on Windows 7

Usable in these browsers

  • Anything that support ARIA attributes, well, for screen reader users anyway ;)

You could load a fallback animated gif.

Broken in these browsers

  • Anything that doesn't support keyframes

Thanks

A thank you to Aaron Lumsden, who created a JavaScript version.

Comments

  1. No comments yet.

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

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