A Pen by Max Bailey.

index.html

<div class="loader"><img src="http://i.imgur.com/IqW1i5s.gif"><p>Saving Changes</p></div>

Loading-Indicator.markdown

Loading Indicator

A really simple loading gif and text for a project.

A Pen by Max Bailey on CodePen.

License.

notes.js

/*

Nathan,

1) Remove the font-family attribute.
2) Ignore line 1 of the SCSS.
3) Download the new GIF at the URL used.
4) You can remove the <p> tag if you want to just have the GIF.
5) If you want it to be on the top, or the left, or where ever, Change lines 12 & 13.
6) IMPORTANT - If the text isn't perfectly centered, change the first value on line 17.

Max

*/

style.scss

@import "compass";
$brand-darkGray:#333;

.loader {
  background:$brand-darkGray;
  padding:15px 25px;
  position:absolute;
  z-index:1000;
  border-radius:100px;
  color:#FFF;
  font-family:arial;
  font-size:12px;
  bottom:10px;
  right:10px;
  
  p {
    float:left;
    margin:2px 0 0 10px;
    padding:0;
  }
  
  img {
    height:16px;
    float:left;
    margin:0;
    user-select:none;
  }
}