Minimalistic CSS Loader

index.html

<!-- Remove the loader overlay div if you're not using it -->
<div class="loader-overlay">
  <div class="loader">
    Loading
    <span class="loader-stripe"></span>
  </div>
</div>

<h1>Some sort of content here</h1>

Minimalistic-CSS-Loader.markdown

Minimalistic CSS Loader

Fairly minimalistic loader in pure css. Everything is pretty much customizable; check the less var source.

A Pen by James on CodePen.

License.

script.js

http://blog.codepen.io/documentation/

style.less

@show-overlay: true;
@overlay-color: rgba(0, 0, 0, 0.8);

@loader-font-size: 250%;
@loader-font-line-height: 0.9;

@load-stripe-spacing:    1px;
@load-stripe-color:      rgba(255, 255, 255, 0.8);
@load-stripe-width:      20%;
@load-stripe-height:     2px;
@load-stripe-path-width: 50%;
@animation-speed:        0.2s;

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400italic,700italic,400,700);

html, body {
  width: 100%;
  height: 100%;
  background-color: red;
}

h2 {
  font-family: 'Open Sans', sans-serif;
}

/* Loader Overlay */
.loader-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;

  .overlay-visibility(@show-overlay);
}

/* Loader */
.loader {
  position: fixed;
  top: 50%;
  right: 0;
  left: 0;
  width: 350px;
  height: 100px;
  margin: 0 auto;
  z-index: 2;
  text-align: center;
  font-size: @loader-font-size;
  line-height: @loader-font-line-height;
  color: white;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  -webkit-animation: loader-enter 2s 1 cubic-bezier(.47,-0.02,.05,.91);

  .loader-stripe {
    display: block;
    position: relative;
    width: @load-stripe-path-width;
    margin: @load-stripe-spacing auto 0 auto;
    
    &:after {
      content: '';
      display: block;
      position: absolute;
      box-shadow: 1px @load-stripe-height 0 @load-stripe-color;
    	width: @load-stripe-width;
    	height: @load-stripe-height;
      -webkit-animation: loader-stripe @animation-speed infinite alternate ease-in-out;
    }
  }
}

@-webkit-keyframes loader-stripe {
  0% {
    left: 0px;
  }
  100% {
    left: 100% - @load-stripe-width;
  }
}

@-webkit-keyframes loader-enter {
  0% {
    opacity: 0;
    letter-spacing: 22px;
  }
  100% {
    letter-spacing: initial;
  }
}

.overlay-visibility(@show) when (@show = true) {
  background-color: @overlay-color;
}