CSS3 Loading Animations

Rating: 14
Comments: 0

CSS3 Loading Animations

by Matt Gentile

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: +14+x

Add a New Comment

ads via BSA

2015-09-10_1852.png

Tags

animation animations css css3 html load loader loaders loading mobile

Popular Posts

arrow.pngRounded Theme
arrow.pngSimple UI CSS
arrow.pngButton
arrow.pngPure CSS3 Buttons
arrow.pngPure CSS3 Message Button with Notification
arrow.pngChunky 3D CSS3 Buttons


animationanimationscsscss3htmlloadloaderloadersloadingmobile
Copyright © 2011-2019 Icon Deposit - All rights Reserved