Pure CSS Loading

index.html

<p>Uploading <i class="fontawesome-camera"></i></p>

pure-css-loading.markdown

Pure CSS Loading

A Pen by Aleksandras Nelkinas on CodePen.

License.

style.scss

@import "compass/css3";

$color-1: #E3D7CB;
$color-2: #EFE3D8;

@import url(http://weloveiconfonts.com/api/?family=fontawesome);

/* Font Awesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}
  
*,
*:before,
*:after {
  @include box-sizing(border-box);
}

body {
  line-height: 1;
}
  
@-webkit-keyframes animated-background {
  0%   { background-position: 0; }
  100% { background-position: -50px; }
}
@-moz-keyframes animated-background {
  0%   { background-position: 0; }
  100% { background-position: -50px; }
}
@-o-keyframes animated-background {
  0%   { background-position: 0; }
  100% { background-position: -50px; }
}
@keyframes animated-background {
  0%   { background-position: 0; }
  100% { background-position: -50px; }
}
  
p {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  line-height: 150px;
  margin-top: -75px;
  
  @include background-image(linear-gradient(135deg, color-stops($color-1 25%, $color-2 25%, $color-2 50%, $color-1 50%, $color-1 75%, $color-2 75%, $color-2)));
  @include background-clip(text);
  -webkit-animation: animated-background 1s linear infinite;
  -moz-animation:    animated-background 1s linear infinite;
  -o-animation:      animated-background 1s linear infinite;
  animation:         animated-background 1s linear infinite;
  background-size: 50px 50px;
  
  color: transparent;
  text-align: center;
  font-size: 120px;
  font-weight: 600;
  font-family: Helvetica, Arial, sans-serif;
  letter-spacing: -.05em;
}