Skip to content

Instantly share code, notes, and snippets.

@James1x0
Created November 20, 2014 20:30
Show Gist options
  • Save James1x0/29514561861d7a8073a4 to your computer and use it in GitHub Desktop.
Save James1x0/29514561861d7a8073a4 to your computer and use it in GitHub Desktop.
Minimalistic CSS Loader
<!-- 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

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

A Pen by James on CodePen.

License.

http://blog.codepen.io/documentation/
@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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment