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