CSS Loading Animations

23:08:00

Here are 8 full CSS3 Loading Animations by Matt Gentile 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).

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:


.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 */

Post a Comment

0 Comments