CSS3 Loading Animations

Rating: 11
Comments: 0

CSS3 Loading Animations

14 Jul 2015 19:31

View the Live Demo

Here are 8 full CSS3 Loading Animations that you can use in place of .gif and .svg animations (SVG's SMIL animations will be removed soon according to Google and other browsers).

I usually try to design/code stuff that's unique, so every animation uses only 1 div element per animation. Each div also uses the ::before and ::after pseudo class selectors in order to accomplish the more difficult animations.

The HTML:

<div class="loader_content loader_1">
</div>
<div class="loader_content loader_2">
</div>
<div class="loader_content loader_3">
</div>
<div class="loader_content loader_4">
</div>
<div class="loader_content loader_5">
</div>
<div class="loader_content loader_6">
</div>
<div class="loader_content loader_7">
</div>
<div class="loader_content loader_8">
</div>

The CSS:

/* Designed by Matt Gentile - http://icondeposit.com - CSS3 Loading Animations by Matt Gentile is licensed under a Creative Commons Attribution 4.0 International License */
/* loader_content below: */
.loader_content {
    display: inline-block;
    position: relative;
    max-width: 2em;
    max-height: 2em;
    min-width: 0em;
    min-height: 0em;
    background: none;
    float: left;
    padding: 0;
    margin: 2em
}
/* end loader_content */
/* loader_content.loader_1 below: */
.loader_content.loader_1 {
    height: 2em;
    width: 2em;
    top: 0;
    left: 0;
    background: #ccc;
    border-radius: 2em;
    -webkit-animation: spin 1.5s infinite linear;
    -moz-animation: spin 1.5s infinite linear;
    animation: spin 1.5s infinite linear;
    overflow: hidden
}
.loader_content.loader_1::before {
    display: inline-block;
    position: absolute;
    content: '|';
    margin: 0;
    width: 15%;
    height: 2em;
    top: 0;
    left: 41.5%;
    text-indent: -9999px;
    background: #666;
    border-radius: 0
}
.loader_content.loader_1::after {
    display: inline-block;
    position: absolute;
    content: '0';
    margin: 0;
    width: 1.75em;
    height: 1.75em;
    top: .13em;
    left: .13em;
    text-indent: -9999px;
    background: #666;
    border-radius: 2em
}
/* end loader_content.loader_1 */
/* loader_content.loader_2 below: */
.loader_content.loader_2 {
    height: 2em;
    width: .25em;
    top: 0;
    left: .75em;
    background: #ccc;
    border-radius: .5em;
    -webkit-animation: scale_2 1s infinite ease-out;
    -moz-animation: scale_2 1s infinite ease-out;
    animation: scale_2 1s infinite ease-out
}
.loader_content.loader_2::before {
    display: inline-block;
    position: relative;
    content: '|';
    height: 2em;
    width: .25em;
    top: 0;
    left: .75em;
    background: #ccc;
    border-radius: .5em;
    text-indent: -9999px;
    -webkit-animation: scale_3 1s infinite ease-in !important;
    -moz-animation: scale_3 1s infinite ease-in !important;
    animation: scale_3 1s infinite ease-in !important
}
.loader_content.loader_2::after {
    display: inline-block;
    position: absolute;
    content: '|';
    height: 2em;
    width: .25em;
    top: 0;
    left: -.75em;
    background: #ccc;
    border-radius: .5em;
    text-indent: -9999px;
    -webkit-animation: scale_1 1s infinite ease-in !important;
    -moz-animation: scale_1 1s infinite ease-in !important;
    animation: scale_1 1s infinite ease-in !important
}
/* end loader_content.loader_2 */
/* loader_content.loader_3 below: */
.loader_content.loader_3 {
    position: relative;
    display: inline-block;
    height: .5em;
    width: .5em;
    top: .75em;
    left: 0;
    margin-right: 3em;
    border-radius: 1em;
    -webkit-animation: flash_1 1s infinite ease;
    -moz-animation: flash_1 1s infinite ease;
    animation: flash_1 1s infinite ease
}
.loader_content.loader_3::before {
    position: absolute;
    display: inline-block;
    height: .5em;
    width: .5em;
    top: 0;
    left: 1.8em;
    border-radius: 1em;
    content: '0';
    text-indent: -9999px;
    -webkit-animation: flash_2 1s infinite ease-in-out !important;
    -moz-animation: flash_2 1s infinite ease-in-out !important;
    animation: flash_2 1s infinite ease-in-out !important;
    -webkit-animation-delay: 1.5s !important;
    -moz-animation-delay: 1.5s !important;
    animation-delay: 1.5s !important
}
.loader_content.loader_3::after {
    position: absolute;
    display: inline-block;
    height: .5em;
    width: .5em;
    top: 0;
    left: .9em;
    border-radius: .9em;
    content: '0';
    text-indent: -9999px;
    -webkit-animation: flash_2 1s infinite ease-in-out !important;
    -moz-animation: flash_2 1s infinite ease-in-out !important;
    animation: flash_2 1s infinite ease-in-out !important;
    -webkit-animation-delay: 2.1s !important;
    -moz-animation-delay: 2.1s !important;
    animation-delay: 2.1s !important
}
/* end loader_content.loader_3 */
/* loader_content.loader_4 below: */
.loader_content.loader_4 {
    position: relative;
    display: block;
    background: #ccc;
    height: 2em;
    width: 2em;
    top: 0em;
    left: 0;
    border-radius: 2em;
    overflow: hidden !important
}
.loader_content.loader_4::before { /* minute */
    position: relative;
    display: inline-block;
    background: linear-gradient(to right, #666 60%, transparent 40%);
    height: .25em;
    width: 1.75em;
    top: .87em;
    left: .13em;
    content: '|';
    text-indent: -9999px;
    border-radius: 100%;
    -webkit-animation: tick_tock 60s infinite ease-out;
    -moz-animation: tick_tock 60s infinite ease-out;
    animation: tick_tock 60s infinite ease-out
}
.loader_content.loader_4::after { /* hour */
    position: absolute;
    display: inline-block;
    background: linear-gradient(to bottom, #666 70%, transparent 30%);
    height: 1.75em;
    width: .25em;
    top: .13em;
    left: .9em;
    content: '|';
    text-indent: -9999px;
    border-radius: 100%;
    -webkit-animation: tick_tock 5s infinite ease-out;
    -moz-animation: tick_tock 5s infinite ease-out;
    animation: tick_tock 5s infinite ease-out
}
/* end loader_content.loader_4 */
/* loader_content.loader_5:below */
.loader_content.loader_5 {
    position: relative;
    display: block;
    background: #666;
    height: 2em;
    width: 2em;
    top: 0em;
    left: 0;
    border-radius: 0;
    -webkit-animation: spin 1s infinite linear;
    -moz-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
    overflow: hidden !important
}
.loader_content.loader_5::before { /* minute */
    position: absolute;
    display: inline-block;
    background: #ccc;
    height: .5em;
    width: .5em;
    right: 0em;
    top: 1em;
    content: '0';
    text-indent: -9999px;
    border-radius: .5em
}
.loader_content.loader_5::after { /* hour */
    position: absolute;
    display: inline-block;
    background: #ccc;
    height: .5em;
    width: .5em;
    top: .5em;
    left: 0em;
    content: '0';
    text-indent: -9999px;
    border-radius: .5em
}
/* end loader_content.loader_5 */
/* loader_content.loader_6:below */
.loader_content.loader_6 {
    position: relative;
    display: block;
    background: #666;
    height: 2em;
    width: 2em;
    top: 0em;
    left: 0;
    border-radius: 0;
    overflow: hidden !important
}
.loader_content.loader_6::before { /* minute */
    position: absolute;
    display: inline-block;
    background: #ccc;
    height: .75em;
    width: .75em;
    right: 0em;
    bottom: 0em;
    content: '0';
    text-indent: -9999px;
    border-radius: .5em;
    -webkit-animation: bounce_1 .6s infinite ease-in-out;
    -moz-animation: bounce_1 .6s infinite ease-in-out;
    animation: bounce_1 .6s infinite ease-in-out
}
.loader_content.loader_6::after { /* hour */
    position: absolute;
    display: inline-block;
    background: #ccc;
    height: .75em;
    width: .75em;
    bottom: 0em;
    left: 0em;
    content: '0';
    text-indent: -9999px;
    border-radius: .5em;
    -webkit-animation: bounce_2 .6s infinite ease-in-out;
    -moz-animation: bounce_2 .6s infinite ease-in-out;
    animation: bounce_2 .6s infinite ease-in-out
}
/* end loader_content.loader_6 */
/* loader_content.loader_7:below */
.loader_content.loader_7 {
    position: relative;
    display: block;
    background: #666;
    height: 2em;
    width: 2em;
    top: 0em;
    left: 0;
    border-radius: 0;
    overflow: hidden !important
}
.loader_content.loader_7::before { /* minute */
    position: absolute;
    display: inline-block;
    background: #ccc;
    height: .75em;
    width: .75em;
    right: 0em;
    top: .5em;
    content: '0';
    text-indent: -9999px;
    border-radius: .5em;
    -webkit-animation: fade_1 1s infinite ease;
    -moz-animation: fade_1 1s infinite ease;
    animation: fade_1 1s infinite ease
}
.loader_content.loader_7::after { /* hour */
    position: absolute;
    display: inline-block;
    background: #ccc;
    height: .75em;
    width: .75em;
    top: .5em;
    left: 0em;
    content: '0';
    text-indent: -9999px;
    border-radius: .5em;
    -webkit-animation: fade_2 1s infinite ease;
    -moz-animation: fade_2 1s infinite ease;
    animation: fade_2 1s infinite ease
}
/* end loader_content.loader_7 */
/* loader_content.loader_8:below */
.loader_content.loader_8 {
    position: relative;
    display: inline-block;
    height: 2em;
    width: 2em;
    top: 0;
    left: 0;
    border-radius: 2em;
    overflow: hidden !important;
    -webkit-animation: pulse 1s infinite linear;
    -moz-animation: pulse 1s infinite linear;
    animation: pulse 1s infinite linear
}
/* end loader_content.loader_8 */
/* @keyframes animations below: */
@keyframes spin {
    0%{transform:rotateZ(0deg)}
    100%{transform:rotateZ(360deg)}
}
@keyframes scale_1 {
    0%{transform:scale(1)}
    50%{transform:scale(.25)}
    100%{transform:scale(1)}
}
@keyframes scale_2 {
    0%{transform:scale(1)}
    50%{transform:scale(.25)}
    100%{transform:scale(1)}
}
@keyframes scale_3 {
    0%{transform:scale(.25)}
    50%{transform:scale(1.5)}
    100%{transform:scale(.25)}
}
@keyframes flash_1 {
    0%{background:#ccc}
    50%{background:#888}
    100%{background:#ccc}
}
@keyframes flash_2 {
    0%{background:#ccc}
    50%{background:#888}
    100%{background:#ccc}
}
@keyframes tick_tock {
    0%{transform:rotateZ(0deg)}
    12.5%{transform:rotateZ(45deg)}
    25%{transform:rotateZ(90deg)}
    37.5%{transform:rotateZ(135deg)}
    50%{transform:rotateZ(180deg)}
    62.5%{transform:rotateZ(225deg)}
    75%{transform:rotateZ(270deg)}
    87.5%{transform:rotateZ(315deg)}
    100%{transform:rotateZ(360deg)}
}
@keyframes bounce_1 {
    0%{bottom:1.25em}
    50%{bottom:0;height:.6em}
    100%{bottom:1.25em}
}
@keyframes bounce_2 {
    0%{bottom:0;height:.6em}
    50%{bottom:1.25em}
    100%{bottom:0;height:.725em}
}
@keyframes fade_1 {
    0%{background:#ccc}
    50%{background:#888}
    100%{background:#ccc}
}
@keyframes fade_2 {
    0%{background:#888}
    50%{background:#ccc}
    100%{background:#888}
}
@keyframes pulse {
    0%{background:radial-gradient(#ccc, #3c3c3c);opacity:.05}
    10%{background:radial-gradient(#ccc, #3c3c3c);opacity:.25}
    20%{background:radial-gradient(#ccc, #3c3c3c);opacity:.5}
    30%{background:radial-gradient(#ccc, #3c3c3c);opacity:.75}
    40%{background:radial-gradient(#ccc, #3c3c3c);opacity:1}
    50%{background:radial-gradient(#ccc, #3c3c3c);opacity:1}
    60%{background:radial-gradient(#ccc, #3c3c3c);opacity:.75}
    70%{background:radial-gradient(#ccc, #3c3c3c);opacity:.5}
    80%{background:radial-gradient(#ccc, #3c3c3c);opacity:.25}
    90%{background:radial-gradient(#ccc, #3c3c3c);opacity:.05}
    100%{background:#666;opacity:0}
}
@-webkit-keyframes spin {
    0%{-webkit-transform:rotateZ(0deg);transform:rotateZ(0deg)}
    100%{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}
}
@-webkit-keyframes scale_1 {
    0%{-webkit-transform:scale(1);transform:scale(1)}
    50%{-webkit-transform:scale(.25);transform:scale(.25)}
    100%{-webkit-transform:scale(1);transform:scale(1)}
}
@-webkit-keyframes scale_2 {
    0%{-webkit-transform:scale(1);transform:scale(1)}
    50%{-webkit-transform:scale(.25);transform:scale(.25)}
    100%{-webkit-transform:scale(1);transform:scale(1)}
}
@-webkit-keyframes scale_3 {
    0%{-webkit-transform:scale(.25);transform:scale(.25)}
    50%{-webkit-transform:scale(1.5);transform:scale(1.5)}
    100%{-webkit-transform:scale(.25);transform:scale(.25)}
}
@-webkit-keyframes flash_1 {
    0%{background:#ccc}
    50%{background:#888}
    100%{background:#ccc}
}
@-webkit-keyframes flash_2 {
    0%{background:#ccc}
    50%{background:#888}
    100%{background:#ccc}
}
@-webkit-keyframes tick_tock {
    0%{-webkit-transform:rotateZ(0deg);transform:rotateZ(0deg)}
    12.5%{-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}
    25%{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg)}
    37.5%{-webkit-transform:rotateZ(135deg);transform:rotateZ(135deg)}
    50%{-webkit-transform:rotateZ(180deg);transform:rotateZ(180deg)}
    62.5%{-webkit-transform:rotateZ(225deg);transform:rotateZ(225deg)}
    75%{-webkit-transform:rotateZ(270deg);transform:rotateZ(270deg)}
    87.5%{-webkit-transform:rotateZ(315deg);transform:rotateZ(315deg)}
    100%{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}
}
@-webkit-keyframes bounce_1 {
    0%{bottom:1.25em}
    50%{bottom:0;height:.6em}
    100%{bottom:1.25em}
}
@-webkit-keyframes bounce_2 {
    0%{bottom:0;height:.6em}
    50%{bottom:1.25em}
    100%{bottom:0;height:.725em}
}
@-webkit-keyframes fade_1 {
    0%{background:#ccc}
    50%{background:#888}
    100%{background:#ccc}
}
@-webkit-keyframes fade_2 {
    0%{background:#888}
    50%{background:#ccc}
    100%{background:#888}
}
@-webkit-keyframes pulse {
    0%{background:radial-gradient(#ccc, #3c3c3c);opacity:.05}
    10%{background:radial-gradient(#ccc, #3c3c3c);opacity:.25}
    20%{background:radial-gradient(#ccc, #3c3c3c);opacity:.5}
    30%{background:radial-gradient(#ccc, #3c3c3c);opacity:.75}
    40%{background:radial-gradient(#ccc, #3c3c3c);opacity:1}
    50%{background:radial-gradient(#ccc, #3c3c3c);opacity:1}
    60%{background:radial-gradient(#ccc, #3c3c3c);opacity:.75}
    70%{background:radial-gradient(#ccc, #3c3c3c);opacity:.5}
    80%{background:radial-gradient(#ccc, #3c3c3c);opacity:.25}
    90%{background:radial-gradient(#ccc, #3c3c3c);opacity:.05}
    100%{background:#666;opacity:0}
}
@-moz-keyframes spin {
    0%{-moz-transform:rotateZ(0deg);transform:rotateZ(0deg)}
    100%{-moz-transform:rotateZ(360deg);transform:rotateZ(360deg)}
}
@-moz-keyframes scale_1 {
    0%{-moz-transform:scale(1);transform:scale(1)}
    50%{-moz-transform:scale(.25);transform:scale(.25)}
    100%{-moz-transform:scale(1);transform:scale(1)}
}
@-moz-keyframes scale_2 {
    0%{-moz-transform:scale(1);transform:scale(1)}
    50%{-moz-transform:scale(.25);transform:scale(.25)}
    100%{-moz-transform:scale(1);transform:scale(1)}
}
@-moz-keyframes scale_3 {
    0%{-moz-transform:scale(.25);transform:scale(.25)}
    50%{-moz-transform:scale(1.5);transform:scale(1.5)}
    100%{-moz-transform:scale(.25);transform:scale(.25)}
}
@-moz-keyframes flash_1 {
    0%{background:#ccc}
    50%{background:#888}
    100%{background:#ccc}
}
@-moz-keyframes flash_2 {
    0%{background:#ccc}
    50%{background:#888}
    100%{background:#ccc}
}
@-moz-keyframes tick_tock {
    0%{-moz-transform:rotateZ(0deg);transform:rotateZ(0deg)}
    12.5%{-moz-transform:rotateZ(45deg);transform:rotateZ(45deg)}
    25%{-moz-transform:rotateZ(90deg);transform:rotateZ(90deg)}
    37.5%{-moz-transform:rotateZ(135deg);transform:rotateZ(135deg)}
    50%{-moz-transform:rotateZ(180deg);transform:rotateZ(180deg)}
    62.5%{-moz-transform:rotateZ(225deg);transform:rotateZ(225deg)}
    75%{-moz-transform:rotateZ(270deg);transform:rotateZ(270deg)}
    87.5%{-moz-transform:rotateZ(315deg);transform:rotateZ(315deg)}
    100%{-moz-transform:rotateZ(360deg);transform:rotateZ(360deg)}
}
@-moz-keyframes bounce_1 {
    0%{bottom:1.25em}
    50%{bottom:0;height:.6em}
    100%{bottom:1.25em}
}
@-moz-keyframes bounce_2 {
    0%{bottom:0;height:.6em}
    50%{bottom:1.25em}
    100%{bottom:0;height:.725em}
}
@-moz-keyframes fade_1 {
    0%{background:#ccc}
    50%{background:#888}
    100%{background:#ccc}
}
@-moz-keyframes fade_2 {
    0%{background:#888}
    50%{background:#ccc}
    100%{background:#888}
}
@-moz-keyframes pulse {
    0%{background:radial-gradient(#ccc, #3c3c3c);opacity:.05}
    10%{background:radial-gradient(#ccc, #3c3c3c);opacity:.25}
    20%{background:radial-gradient(#ccc, #3c3c3c);opacity:.5}
    30%{background:radial-gradient(#ccc, #3c3c3c);opacity:.75}
    40%{background:radial-gradient(#ccc, #3c3c3c);opacity:1}
    50%{background:radial-gradient(#ccc, #3c3c3c);opacity:1}
    60%{background:radial-gradient(#ccc, #3c3c3c);opacity:.75}
    70%{background:radial-gradient(#ccc, #3c3c3c);opacity:.5}
    80%{background:radial-gradient(#ccc, #3c3c3c);opacity:.25}
    90%{background:radial-gradient(#ccc, #3c3c3c);opacity:.05}
    100%{background:#666;opacity:0}
}
/* end @keyframes animations */

Any questions and/or comments that would help you add elements like these to your project(s), feel free to ask in the comment section below.

View the Demo: http://www.icondeposit.com/local--files/code%3A_start/CSS3-Loading-Animations.html
Original URL: http://www.icondeposit.com/code:6
License Info: Creative Commons Attribution 4.0 International License

rating: +11+x

Add a New Comment
Copyright © 2011-2015 Icon Deposit - All rights Reserved