Material Design Preloader

index.html

<header>
  <div aria-busy="true" aria-label="Loading, please wait." role="progressbar"></div>
</header>
<main role="main">
  <img src="http://www.google.com/inbox/assets/images/intro/intro-logo.png" width="100" alt="" />
  <h1>Material Design Preloader</h1>
  <p>A CSS only solution that recreates the Material Design preloader; or, who needs jQuery anyway?</p>
  <p>You should set <code>aria-busy</code> to <code>false</code> when your stuff is loaded.
</main>

Material-Design-Preloader.markdown

Material Design Preloader

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.

A Pen by Michiel Bijl on CodePen.

License.

style.scss

// Functions
@function colour($value) {
  @return map-get($colours, $value);
}

// Variables
$preloader-height: 8px;

$colours: (
  green:  #159756,
  red:    #da4733,
  blue:   #3b78e7,
  yellow: #fdba2c
);

$animation-duration: 3.5s;

header [role="progressbar"][aria-busy="true"] {
  position: absolute;
  top: 0;
  left: 0;
  padding-top: $preloader-height;
  width: 100%;
  background-color: colour(green);
  animation: preloader-background linear $animation-duration infinite;
  
  &::before,
  &::after {
    display: block;
    position: absolute;
    top: 0;
    z-index: 2;
    width: 0;
    height: $preloader-height;
    background: #afa;
    animation: preloader-front linear $animation-duration infinite;
    content: '';
  }
  
  &::before {
    right: 50%;
  }
  
  &::after {
    left: 50%;
  }
}

// Animations
@keyframes preloader-background {
  0%, 24.9% {
    background-color: colour(green);
  }
  
  25%, 49.9% {
    background-color: colour(red);
  }
  
  50%, 74.9% {
    background-color: colour(blue);
  }
  
  75%, 100% {
    background-color: colour(yellow);
  }
}

@keyframes preloader-front {
  0% {
    width: 0;
    background-color: colour(red);
  }
  
  24.9% {
    width: 50%;
    background-color: colour(red);
  }
  
  25% {
    width: 0;
    background-color: colour(blue);
  }
  
  49.9% {
    width: 50%;
    background-color: colour(blue);
  }
  
  50% {
    width: 0;
    background-color: colour(yellow);
  }
  
  74.9% {
    width: 50%;
    background-color: colour(yellow);
  }
  
  75% {
    width: 0%;
    background-color: colour(green);
  }
  
  
  100% {
    width: 50%;
    background-color: colour(green);
  }
}

// Unimportant bits
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: Avenir Next, Helvetica Neue, Helvetica, Arial, sans-serif;
  background-color: #f5f5f5;
}

header {
  position: relative;
  width: 100%;
  height: 60px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
  background-color: #fff;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  flex-grow: 1;
  text-align: center;
  
  :root  & > * + * {
    margin-top: 1em;
  }
}

h1 {
  margin: 0;
  font-size: 2.2em;
  font-weight: 200;
}

p {
  margin: 0;
  font-size: .875em;
  font-weight: 400;
}