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
        span.tooltip
          p ball-pulse

      .loader
        .loader-inner.ball-grid-pulse
          div
          div
          div
          div
          div
          div
          div
          div
          div
        span.tooltip
          p ball-grid-pulse

      .loader
        .loader-inner.ball-clip-rotate
          div
        span.tooltip
          p ball-clip-rotate

      .loader
        .loader-inner.ball-clip-rotate-pulse
          div
          div
        span.tooltip
          p ball-clip-rotate-pulse

      .loader
        .loader-inner.square-spin
          div
        span.tooltip
          p square-spin

      .loader
        .loader-inner.ball-clip-rotate-multiple
          div
          div
        span.tooltip
          p ball-clip-rotate-multiple

      .loader
        .loader-inner.ball-pulse-rise
          div
          div
          div
          div
          div
        span.tooltip
          p ball-pulse-rise

      .loader
        .loader-inner.ball-rotate
          div
        span.tooltip
          p ball-rotate

      .loader
        .loader-inner.cube-transition
          div
          div
        span.tooltip
          p cube-transition

      .loader
        .loader-inner.ball-zig-zag
          div
          div
        span.tooltip
          p ball-zig-zag

      .loader
        .loader-inner.ball-zig-zag-deflect
          div
          div
        span.tooltip
          p ball-zig-zag-deflect

      .loader
        .loader-inner.ball-triangle-path
          div
          div
          div
        span.tooltip
          p ball-triangle-path

      .loader
        .loader-inner.ball-scale
          div
        span.tooltip
          p ball-scale

      .loader
        .loader-inner.line-scale
          div
          div
          div
          div
          div
        span.tooltip
          p line-scale

      .loader
        .loader-inner.line-scale-party
          div
          div
          div
          div
        span.tooltip
          p line-scale-party

      .loader
        .loader-inner.ball-scale-multiple
          div
          div
          div
        span.tooltip
          p ball-scale-multiple

      .loader
        .loader-inner.ball-pulse-sync
          div
          div
          div
        span.tooltip
          p ball-pulse-sync

      .loader
        .loader-inner.ball-beat
          div
          div
          div
        span.tooltip
          p ball-beat

      .loader
        .loader-inner.line-scale-pulse-out
          div
          div
          div
          div
          div
        span.tooltip
          p line-scale-pulse-out

      .loader
        .loader-inner.line-scale-pulse-out-rapid
          div
          div
          div
          div
          div
        span.tooltip
          p line-scale-pulse-out-rapid

      .loader
        .loader-inner.ball-scale-ripple
          div
        span.tooltip
          p ball-scale-ripple

      .loader
        .loader-inner.ball-scale-ripple-multiple
          div
          div
          div
        span.tooltip
          p ball-scale-ripple-multiple

      .loader
        .loader-inner.ball-spin-fade-loader
          div
          div
          div
          div
          div
          div
          div
          div
        span.tooltip
          p ball-spin-fade-loader

      .loader
        .loader-inner.line-spin-fade-loader
          div
          div
          div
          div
          div
          div
          div
          div
        span.tooltip
          p line-spin-fade-loader

      .loader
        .loader-inner.triangle-skew-spin
          div
        span.tooltip
          p triangle-skew-spin

      .loader
        .loader-inner.pacman
          div
          div
          div
          div
          div
        span.tooltip
          p pacman

      .loader
        .loader-inner.semi-circle-spin
          div
        span.tooltip
          p semi-circle-spin

      .loader
        .loader-inner.ball-grid-beat
          div
          div
          div
          div
          div
          div
          div
          div
          div
        span.tooltip
          p ball-grid-beat

      .loader
        .loader-inner.ball-scale-random
          div
          div
          div
        span.tooltip
          p ball-scale-random

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