doctype html5
head
  link(href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:600,300' rel='stylesheet' type='text/css')
  link(rel="stylesheet", type="text/css", href="demo.css")
  link(rel="stylesheet", type="text/css", href="../loaders.css")
body
  main
    header
      .left
        h1 Loaders
          span .css
        h2 Delightful and performance-focused pure css loading animations.

      .right
        a.btn.right(href="https://github.com/ConnorAtherton/loaders.css")
          | View on Github

    .loaders
      .loader
        .loader-inner.ball-pulse
          div
          div
          div

      .loader
        .loader-inner.ball-grid-pulse
          div
          div
          div
          div
          div
          div
          div
          div
          div

      .loader
        .loader-inner.ball-clip-rotate
          div

      .loader
        .loader-inner.ball-clip-rotate-pulse
          div
          div

      .loader
        .loader-inner.square-spin
          div

      .loader
        .loader-inner.ball-clip-rotate-multiple
          div
          div

      .loader
        .loader-inner.ball-pulse-rise
          div
          div
          div
          div
          div

      .loader
        .loader-inner.ball-rotate
          div

      .loader
        .loader-inner.cube-transition
          div
          div

      .loader
        .loader-inner.ball-zig-zag
          div
          div

      .loader
        .loader-inner.ball-zig-zag-deflect
          div
          div

      .loader
        .loader-inner.ball-triangle-path
          div
          div
          div

      .loader
        .loader-inner.ball-scale
          div

      .loader
        .loader-inner.line-scale
          div
          div
          div
          div
          div

      .loader
        .loader-inner.line-scale-party
          div
          div
          div
          div

      .loader
        .loader-inner.ball-scale-multiple
          div
          div
          div

      .loader
        .loader-inner.ball-pulse-sync
          div
          div
          div

      .loader
        .loader-inner.ball-beat
          div
          div
          div

      .loader
        .loader-inner.line-scale-pulse-out
          div
          div
          div
          div
          div

      .loader
        .loader-inner.line-scale-pulse-out-rapid
          div
          div
          div
          div
          div

      .loader
        .loader-inner.ball-scale-ripple
          div

      .loader
        .loader-inner.ball-scale-ripple-multiple
          div
          div
          div

      .loader
        .loader-inner.ball-spin-fade-loader
          div
          div
          div
          div
          div
          div
          div
          div

      .loader
        .loader-inner.line-spin-fade-loader
          div
          div
          div
          div
          div
          div
          div
          div

      .loader
        .loader-inner.triangle-skew-spin
          div

      .loader
        .loader-inner.pacman
          div
          div
          div
          div
          div

      .loader
        .loader-inner.semi-circle-spin
          div

      .loader
        .loader-inner.ball-grid-beat
          div
          div
          div
          div
          div
          div
          div
          div
          div

      .loader
        .loader-inner.ball-scale-random
          div
          div
          div

  script.
    document.addEventListener('DOMContentLoaded', function () {
      document.querySelector('main').className += 'loaded';
    });