Skip to content

Instantly share code, notes, and snippets.

@iilei

iilei/CSS3-loading-animations.markdown

Created December 18, 2013 17:18
Show Gist options
  • Save iilei/8026210 to your computer and use it in GitHub Desktop.
Save iilei/8026210 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Steve Melcher.
Raw
CSS3-loading-animations.markdown
Raw
index.html
<a class="trigger" href="#">Play/Stop Animations</a>
<div id="ajaxloader1"></div>
<div id="ajaxloader2">
<div class="outer"></div>
<div class="inner"></div>
</div>
<div id="ajaxloader3">
<div class="outer"></div>
<div class="inner"></div>
</div>
<div id="ajaxbar1">
<div id="block1" class="barlittle"></div>
<div id="block2" class="barlittle"></div>
<div id="block3" class="barlittle"></div>
<div id="block4" class="barlittle"></div>
<div id="block5" class="barlittle"></div>
</div>
<div id="ajaxwave1">
<div id="pointcircle1" class="pointcircle"></div>
<div id="pointcircle2" class="pointcircle"></div>
<div id="pointcircle3" class="pointcircle"></div>
<div id="pointcircle4" class="pointcircle"></div>
<div id="pointcircle5" class="pointcircle"></div>
</div>
<div id="facebook">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<div id="loadpulse">
<div class="segment">
<div id="layer1" class="ball"></div>
<div id="layer7" class="pulse"></div>
</div>
<div class="segment">
<div id="layer2" class="ball"></div>
<div id="layer8" class="pulse"></div>
</div>
<div class="segment">
<div id="layer3" class="ball"></div>
<div id="layer9" class="pulse"></div>
</div>
<div class="segment">
<div id="layer4" class="ball"></div>
<div id="layer10" class="pulse"></div>
</div>
<div class="segment">
<div id="layer5" class="ball"></div>
<div id="layer11" class="pulse"></div>
</div>
</div>
<div id="shadowloader">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<h1 class="loadingtext">
<span>L</span>
<span>o</span>
<span>a</span>
<span>d</span>
<span>i</span>
<span>n</span>
<span>g</span>
</h1>
Raw
script.js
(function($){
$('.trigger').click(function(){
$('#ajaxloader1, .outer, .inner, .barlittle, .pointcircle, .bar, #loadpulse div, #shadowloader span, .loadingtext span').toggleClass('stop');
});
})(jQuery);
Raw
style.less
@red:#f00;
@red-lt:lighten(@red, 30%);
@red-shadow:darken(@red, 10%);
@blue:rgba(0,183,229,0.9);
@blue-lt:lighten(@blue, 30%);
@blue-shadow:darken(@blue, 30%);
@cyan:rgba(0,229,183,0.9);
@cyan-shadow:darken(@cyan, 30%);
@green:#8aff51;
@green-lt:lighten(@green, 30%);
@green-shadow:darken(@green, 30%);
body {
background:#161616;
font:12px normal Verdana, Arial, Helvetica, sans-serif;
}
.animation (@name, @duration:1s, @delay:0, @ease:linear, @iterations:infinite, @endState:normal) {
-webkit-animation: @name @duration @delay @ease @iterations @endState;
-moz-animation: @name @duration @delay @ease @iterations @endState;
-ms-animation: @name @duration @delay @ease @iterations @endState;
animation: @name @duration @delay @ease @iterations @endState;
}
.transform-origin (@string) {
-webkit-transform-origin: @string;
-moz-transform-origin: @string;
-ms-transform-origin: @string;
transform-origin: @string;
}
.delay (@delay) {
-webkit-animation-delay: @delay;
-moz-animation-delay: @delay;
-o-animation-delay: @delay;
animation-delay: @delay;
}
.box-shadow (@string) {
-webkit-box-shadow: @string;
-moz-box-shadow: @string;
box-shadow: @string;
}
.shadow-border (@width:1px) {
border:@width solid #111;
border-right-color:#333;
border-bottom-color:#333;
}
.square (@xy:30px) {
width:@xy;
height:@xy;
}
.gradient (@deg:90deg, @color1:#161616, @color2:#000) {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2');
background-image:-webkit-linear-gradient(@deg, @color1 25%, @color2);
background-image:-moz-linear-gradient(@deg, @color1 25%, @color2);
}
.stop {
animation-play-state:paused;
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
.trigger {
.gradient(top);
.shadow-border;
text-decoration:none;
color:#fff;
padding:10px;
font-family:Verdana, Geneva, sans-serif;
font-size:0.8em;
text-transform:lowercase;
margin:10px auto;
display:block;
width:140px;
border-radius:5px;
text-align:center;
&:hover {
.gradient(top, #202020, #161616);
}
}
#ajaxloader1
{
.square;
border:8px solid #fff;
border-radius:50%;
.box-shadow(0 0 25px 2px);
color:#fff;
border-color:@red;
color:@red-shadow;
border-right-color:transparent;
border-top-color:transparent;
.animation(spin-right);
margin:30px auto 0;
&:after {
display:block;
.square(13px);
margin:3px;
border:6px solid @red;
content:" ";
border-radius:50%;
border-left-color:transparent;
border-bottom-color:transparent;
}
}
#ajaxloader2 {
margin:30px auto 0;
.outer {
border:5px solid @blue;
opacity:.9;
.square(50px);
border-top-color:transparent;
border-bottom-color:transparent;
border-radius:50%;
.box-shadow(0 0 35px @blue-shadow);
.animation(spin-right, .5s);
margin:0 auto;
}
.inner {
display:block;
.square;
border:5px solid @blue;
opacity:.9;
border-radius:50%;
border-left-color:transparent;
border-bottom-color:transparent;
.box-shadow(0 0 35px @blue-shadow);
position:relative;
top:-50px;
margin:0 auto;
.animation(spin-left, .5s);
}
}
#ajaxloader3 {
margin:0 auto;
.outer {
border:5px solid @cyan;
opacity:.9;
border-right-color:transparent;
border-left-color:transparent;
.square(50px);
margin:0 auto;
border-radius:50%;
.box-shadow(0 0 35px @cyan-shadow);
.animation(spin-pulse);
}
.inner {
border:5px solid @cyan;
opacity:.9;
border-left-color:transparent;
border-right-color:transparent;
border-radius:50%;
.box-shadow(0 0 15px @cyan-shadow);
.square;
position:relative;
top:-50px;
margin:0 auto;
.animation(spin-right);
}
}
#ajaxbar1 {
margin:0 auto;
overflow:hidden;
width:90px;
.barlittle {
background-color:@green;
.gradient(45deg, @green, @green-lt);
border:1px solid #111;
.square(10px);
float:left;
margin-left:5px;
opacity:0.1;
.animation(pulse);
}
#block1 { .delay(.3s); }
#block2 { .delay(.2s); }
#block3 { .delay(.1s); }
#block4 { .delay(.2s); }
#block5 { .delay(.3s); }
}
#ajaxwave1 {
margin:30px auto 0;
overflow:hidden;
height:50px;
.pointcircle {
background-color:@red;
.gradient(90deg, @red, @red-lt);
.square(3px);
border-radius:50%;
.box-shadow(0 0 5px @red-shadow);
margin:0 auto;
position:relative;
}
#pointcircle1 {
.animation(ball-circlex, 2s, 0, infinite, cubic-bezier(0,0,0.35,1));
}
#pointcircle2 {
opacity:0.7;
top:1px;
.animation(ball-circlex, 2s, 0.1s, infinite, cubic-bezier(0,0,0.35,1));
}
#pointcircle3 {
opacity:0.5;
top:2px;
.animation(ball-circlex, 2s, 0.2s, infinite, cubic-bezier(0,0,0.35,1));
}
#pointcircle4 {
opacity:0.3;
top:3px;
.animation(ball-circlex, 2s, 0.3s, infinite, cubic-bezier(0,0,0.35,1));
}
#pointcircle5 {
opacity:0.1;
top:4px;
.animation(ball-circlex, 2s, 0.4s, infinite, cubic-bezier(0,0,0.35,1));
}
}
#facebook {
.square(32px);
margin:0 auto;
.bar {
background:#99aaca;
border:1px solid #96a6c9;
float:left;
margin:6px 4px 0 0;
width:6px;
height:18px;
.animation(facebook-pulse);
&:nth-child(2) { .delay(0.1s); }
&:last-child { .delay(0.2s); margin-right:0; }
}
}
#loadpulse {
width:48px;
padding:8px 5px;
margin:30px auto;
overflow:hidden;
.segment {
float:left;
position:relative;
.square(6px);
border:1px solid #fff;
border-radius:50px;
margin-left:2px;
border:1px solid #111;
border-right-color:#333;
border-bottom-color:#333;
background:#000;
&:first-child { margin-left:0; }
}
.ball {
background-color:#2187e7;
.gradient(90deg, #2187e7, #a0eaff);
.square(6px);
border-radius:50px;
-moz-transform:scale(0);
-webkit-transform:scale(0);
.animation(loadpulse-ball, 1s, 0, linear, forwards);
}
.pulse {
.square(6px);
border-radius:30px;
border:1px solid #00c6ff;
.box-shadow(0 0 5px #00c6ff);
position:absolute;
top:-1px;
left:-1px;
-moz-transform:scale(0);
-webkit-transform:scale(0);
.animation(loadpulse-glow, 3s, 0, infinite, ease-out);
}
#layer1 { .delay(0.5s); }
#layer2 { .delay(1s); }
#layer3 { .delay(1.5s); }
#layer4 { .delay(2s); }
#layer5 { .delay(2.5s); }
#layer7 { .delay(1.5s); }
#layer8 { .delay(2s); }
#layer9 { .delay(2.5s); }
#layer10 { .delay(3s); }
#layer11 { .delay(3.5s); }
}
#shadowloader {
display: block;
position:relative;
overflow:hidden;
width:5em;
margin:30px auto;
padding:20px 10px;
span {
display:block;
float:left;
width:0.5em;
height:3em;
margin:0 0.5em 0 0;
background:#635863;
.gradient(top, #635863, #3d353b);
box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.0), 1px 1px 1px 0 rgba(0, 0, 0, 0.0), 1px 1px 1px 0 rgba(0, 0, 0, 0.0);
.animation(pound, .7s, .05s, ease-in-out, infinite, alternate);
.transform-origin(center bottom);
&:nth-child(2){ .delay(0.20s); }
&:nth-child(3){ .delay(0.35s); }
&:nth-child(4){ .delay(0.50s); }
&:nth-child(5){ .delay(0.65s); }
}
}
h1.loadingtext{
text-align:center;
text-transform:uppercase;
font-family:'Nunito', sans-serif;
font-size:4.6875em;
color:transparent;
letter-spacing:0.01em;
span{
text-shadow:
0 0 2px rgba(22, 22, 22,0.9),
0 15px 25px rgba(0, 0, 0, 0.3),
0 -2px 3px rgba(0, 0, 0, 0.1),
0 -5px 10px rgba(22, 22, 22, 0.5),
0 5px 10px rgba(0, 0, 0, 0.3),
0 3px 4px rgba(22, 22, 22, 0.2),
0 0 20px rgba(22, 22, 22, 0.45);
.animation(letters, 0.85s, 0, ease-in-out, infinite, alternate);
&:nth-child(2){ .delay(0.15s); }
&:nth-child(3){ .delay(0.30s); }
&:nth-child(4){ .delay(0.45s); }
&:nth-child(5){ .delay(0.60s); }
&:nth-child(6){ .delay(0.75s); }
&:nth-child(7){ .delay(0.90s); }
}
}
@keyframes spin-right
{
from { transform:rotate(0deg); opacity:0.2; }
50% { transform:rotate(180deg); opacity:1.0; }
to { transform:rotate(360deg); opacity:0.2; }
}
@-moz-keyframes spin-right
{
from { -moz-transform:rotate(0deg); opacity:0.2; }
50% { -moz-transform:rotate(180deg); opacity:1.0; }
to { -moz-transform:rotate(360deg); opacity:0.2; }
}
@-webkit-keyframes spin-right
{
from { -webkit-transform:rotate(0deg); opacity:0.2; }
50% { -webkit-transform:rotate(180deg); opacity:1.0; }
to { -webkit-transform:rotate(360deg); opacity:0.2; }
}
@keyframes spin-left
{
from { transform:rotate(0deg); opacity:0.2; }
50% { transform:rotate(-180deg); opacity:1.0; }
to { transform:rotate(-360deg); opacity:0.2; }
}
@-moz-keyframes spin-left
{
from { -moz-transform:rotate(0deg); opacity:0.2; }
50% { -moz-transform:rotate(-180deg); opacity:1.0; }
to { -moz-transform:rotate(-360deg); opacity:0.2; }
}
@-webkit-keyframes spin-left
{
from { -webkit-transform:rotate(0deg); opacity:0.2; }
50% { -webkit-transform:rotate(-180deg); opacity:1.0; }
to { -webkit-transform:rotate(-360deg); opacity:0.2; }
}
@keyframes spin-pulse
{
from {
transform:rotate(160deg);
opacity:0;
box-shadow:0 0 1px @blue-shadow;
}
50% { transform:rotate(145deg); opacity:1; }
to { transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spin-pulse
{
from {
-moz-transform:rotate(160deg);
opacity:0;
box-shadow:0 0 1px @blue-shadow;
}
50% { -moz-transform:rotate(145deg); opacity:1; }
to { -moz-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spin-pulse
{
from {
-webkit-transform:rotate(160deg);
opacity:0;
box-shadow:0 0 1px @blue-shadow;
}
50% { -webkit-transform:rotate(145deg); opacity:1; }
to { -webkit-transform:rotate(-320deg); opacity:0; }
}
@keyframes pulse
{
from { transform:scale(1.2); opacity:1; }
to { transform:scale(0.7); opacity:0.1; }
}
@-moz-keyframes pulse
{
from { -moz-transform:scale(1.2); opacity:1; }
to { -moz-transform:scale(0.7); opacity:0.1; }
}
@-webkit-keyframes pulse
{
from { -webkit-transform:scale(1.2); opacity:1; }
to { -webkit-transform:scale(0.7); opacity:0.1; }
}
@keyframes ball-circlex
{
from { transform:translateX(0px); }
25% {
transform:translateX(25px);
animation-timing-function: ease-in;
}
50% { transform:translateX(0px); }
75% {
transform:translateX(-25px);
animation-timing-function: ease-in;
}
to { transform:translateX(0px); }
}
@-moz-keyframes ball-circlex
{
from { -moz-transform:translateX(0px); }
25% {
-moz-transform:translateX(25px);
-moz-animation-timing-function: ease-in;
}
50% { -moz-transform:translateX(0px); }
75% {
-moz-transform:translateX(-25px);
-moz-animation-timing-function: ease-in;
}
to { -moz-transform:translateX(0px); }
}
@-webkit-keyframes ball-circlex
{
from { -webkit-transform:translateX(0px); }
25% {
-webkit-transform:translateX(25px);
-webkit-animation-timing-function: ease-in;
}
50% { -webkit-transform:translateX(0px); }
75% {
-webkit-transform:translateX(-25px);
-webkit-animation-timing-function: ease-in;
}
to { -webkit-transform:translateX(0px); }
}
@keyframes facebook-pulse
{
0% { }
10% {
margin-top:5px;
height:22px;
border-color:#d1d8e6;
background-color:#bac5db;
}
20% {
margin-top:0px;
height:32px;
border-color:#d1d7e2;
background-color:#bac5db;
}
30% {
margin-top:1px;
height:30px;
border-color:#d1d8e6;
background-color:#bac5db;
}
40% { margin-top:3px; height:26px; }
50% { margin-top:5px; height:22px; }
60% { margin-top:6px; height:18px; }
100% { }
}
@-moz-keyframes facebook-pulse
{
0% { }
10% {
margin-top:5px;
height:22px;
border-color:#d1d8e6;
background-color:#bac5db;
}
20% {
margin-top:0px;
height:32px;
border-color:#d1d7e2;
background-color:#bac5db;
}
30% {
margin-top:1px;
height:30px;
border-color:#d1d8e6;
background-color:#bac5db;
}
40% { margin-top:3px; height:26px; }
50% { margin-top:5px; height:22px; }
60% { margin-top:6px; height:18px; }
100% { }
}
@-webkit-keyframes facebook-pulse
{
0% { }
10% {
margin-top:5px;
height:22px;
border-color:#d1d8e6;
background-color:#bac5db;
}
20% {
margin-top:0px;
height:32px;
border-color:#d1d7e2;
background-color:#bac5db;
}
30% {
margin-top:1px;
height:30px;
border-color:#d1d8e6;
background-color:#bac5db;
}
40% { margin-top:3px; height:26px; }
50% { margin-top:5px; height:22px; }
60% { margin-top:6px; height:18px; }
100% { }
}
@keyframes loadpulse-ball {
from { transform:scale(0); }
to { transform:scale(1); }
}
@-moz-keyframes loadpulse-ball {
from { -moz-transform:scale(0); }
to { -moz-transform:scale(1); }
}
@-webkit-keyframes loadpulse-ball {
from { -webkit-transform:scale(0); }
to { -webkit-transform:scale(1); }
}
@keyframes loadpulse-glow {
from { transform:scale(0); opacity:0; }
10% { transform:scale(1); opacity:0.5; }
50% { transform:scale(1.75); opacity:0; }
to { transform:scale(0); opacity:0; }
}
@-moz-keyframes loadpulse-glow {
from { -moz-transform:scale(0); opacity:0; }
10% { -moz-transform:scale(1); opacity:0.5; }
50% { -moz-transform:scale(1.75); opacity:0; }
to { -moz-transform:scale(0); opacity:0; }
}
@-webkit-keyframes loadpulse-glow {
from { -webkit-transform:scale(0); opacity:0; }
10% { -webkit-transform:scale(1); opacity:0.5; }
50% { -webkit-transform:scale(1.75); opacity:0; }
to { -webkit-transform:scale(0); opacity:0; }
}
@keyframes pound {
to { transform: scale(1.2); box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.65), 2px 6px 12px 0 rgba(0, 0, 0, 0.5), 3px 8px 15px 0 rgba(0, 0, 0, 0.45) }
}
@-moz-keyframes pound {
to { -moz-transform: scale(1.2); box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.65), 2px 6px 12px 0 rgba(0, 0, 0, 0.5), 3px 8px 15px 0 rgba(0, 0, 0, 0.45) }
}
@-webkit-keyframes pound {
to { -webkit-transform: scale(1.2); box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.65), 2px 6px 12px 0 rgba(0, 0, 0, 0.5), 3px 8px 15px 0 rgba(0, 0, 0, 0.45) }
}
@keyframes letters {
to {
text-shadow:
0 0 2px rgba(204, 208, 212,0.2),
0 0 3px rgba(0, 0, 0, 0.02),
0 0 0 rgba(0, 0, 0, 0),
0 0 0 rgba(255, 255, 255, 0),
0 0 0 rgba(0, 0, 0, 0),
0 0 0 rgba(255, 255, 255, 0),
0 0 0 rgba(255, 255, 255, 0);
}
}
@-moz-keyframes letters {
to {
text-shadow:
0 0 2px rgba(204, 208, 212,0.2),
0 0 3px rgba(0, 0, 0, 0.02),
0 0 0 rgba(0, 0, 0, 0),
0 0 0 rgba(255, 255, 255, 0),
0 0 0 rgba(0, 0, 0, 0),
0 0 0 rgba(255, 255, 255, 0),
0 0 0 rgba(255, 255, 255, 0);
}
}
@-webkit-keyframes letters {
to {
text-shadow:
0 0 2px rgba(22, 22, 22,0.2),
0 0 3px rgba(0, 0, 0, 0.02),
0 0 0 rgba(0, 0, 0, 0),
0 0 0 rgba(0, 0, 0, 0),
0 0 0 rgba(0, 0, 0, 0),
0 0 0 rgba(0, 0, 0, 0),
0 0 0 rgba(0, 0, 0, 0);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment