Skip to content

Instantly share code, notes, and snippets.

@WilldelaVega777

WilldelaVega777/Loader.html

Forked from anonymous/index.html
Created January 19, 2014 01:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save WilldelaVega777/8499045 to your computer and use it in GitHub Desktop.
Save WilldelaVega777/8499045 to your computer and use it in GitHub Desktop.
Download ZIP
Cargador
Raw
Loader.html
<div class="loading_spinner_wrapper">
<div class="loading_label">loading<br>awesomeness</div>
<div class="loading_spinner"></div>
</div>
Raw
style.scss
@import "compass";
.loading_spinner_wrapper {
position: relative;
margin: 0 auto;
width: 100%;
text-align: center;
}
.loading_spinner_wrapper .loading_label {
position: relative;
top: 150px;
margin: 0 auto;
text-align: center;
text-transform: uppercase;
color: #f2f2f2;
font-family: sans-serif;
font-size: 20px;
font-weight: 700;
-webkit-animation: glowfont 13s ;
animation: glowfont 13s;
&.no_animation{
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
animation: none;
color: #606060;
}
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
@keyframes "glowfont" {
0% {
color: #f2f2f2;
}
50% {
color: #606060;
}
100% {
color: #f2f2f2;
}
}
@-moz-keyframes glowfont {
0% {
color: #f2f2f2;
}
50% {
color: #606060;
}
100% {
color: #f2f2f2;
}
}
@-webkit-keyframes "glowfont" {
0% {
color: #f2f2f2;
}
50% {
color: #606060;
}
100% {
color: #f2f2f2;
}
}
@-ms-keyframes "glowfont" {
0% {
color: #f2f2f2;
}
50% {
color: #606060;
}
100% {
color: #f2f2f2;
}
}
@-o-keyframes "glowfont" {
0% {
color: #f2f2f2;
}
50% {
color: #606060;
}
100% {
color: #f2f2f2;
}
}
.loading_spinner {
top: 50%;
position: relative;
margin: 5em auto 0 auto;
width: 6em;
height: 6em;
-webkit-animation-name: rotate;
-moz-animation-name: rotate;
-ms-animation-name: rotate;
-o-animation-name: rotate;
animation-name: rotate;
}
.loading_spinner,.loading_spinner:before,.loading_spinner:after {
border-radius: 100%;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(0.000, 1.650, 0.910, -0.600);
-moz-animation-timing-function: cubic-bezier(0.000, 1.650, 0.910, -0.600);
-ms-animation-timing-function: cubic-bezier(0.000, 1.650, 0.910, -0.600);
-o-animation-timing-function: cubic-bezier(0.000, 1.650, 0.910, -0.600);
animation-timing-function: cubic-bezier(0.000, 1.650, 0.910, -0.600);
}
.loading_spinner:before,.loading_spinner:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
}
.loading_spinner:before {
background: rgba(200, 250, 100, 0);
-webkit-animation-name: ring;
-moz-animation-name: ring;
-ms-animation-name: ring;
-o-animation-name: ring;
animation-name: ring;
}
.loading_spinner:after {
background: rgba(250, 0, 200, 0);
-webkit-animation-name: ring2;
-moz-animation-name: ring2;
-ms-animation-name: ring2;
-o-animation-name: ring2;
animation-name: ring2;
}
@keyframes "rotate" {
0% {
-webkit-transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
-moz-transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
-o-transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
-ms-transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
-webkit-box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
}
/* hidden */
85%,100% {
/* 360deg * 10 */
-webkit-transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
-moz-transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
-o-transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
-ms-transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
-webkit-box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
}
}
@-moz-keyframes rotate {
0% {
-moz-transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
}
/* hidden */
85%,100% {
/* 360deg * 10 */
-moz-transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
}
}
@-webkit-keyframes "rotate" {
0% {
-webkit-transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
-webkit-box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
}
/* hidden */
85%,100% {
/* 360deg * 10 */
-webkit-transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
-webkit-box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
}
}
@-ms-keyframes "rotate" {
0% {
-ms-transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
}
/* hidden */
85%,100% {
/* 360deg * 10 */
-ms-transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
}
}
@-o-keyframes "rotate" {
0% {
-o-transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
}
/* hidden */
85%,100% {
/* 360deg * 10 */
-o-transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
}
}
@keyframes "ring" {
0% {
-webkit-transform: scaleX(0.1) scaleY(0.5);
-moz-transform: scaleX(0.1) scaleY(0.5);
-o-transform: scaleX(0.1) scaleY(0.5);
-ms-transform: scaleX(0.1) scaleY(0.5);
transform: scaleX(0.1) scaleY(0.5);
-webkit-box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
}
/* hidden */
75%,100% {
-webkit-transform: scaleX(2) scaleY(2.1);
-moz-transform: scaleX(2) scaleY(2.1);
-o-transform: scaleX(2) scaleY(2.1);
-ms-transform: scaleX(2) scaleY(2.1);
transform: scaleX(2) scaleY(2.1);
-webkit-box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
}
}
@-moz-keyframes ring {
0% {
-moz-transform: scaleX(0.1) scaleY(0.5);
transform: scaleX(0.1) scaleY(0.5);
box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
}
/* hidden */
75%,100% {
-moz-transform: scaleX(2) scaleY(2.1);
transform: scaleX(2) scaleY(2.1);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
}
}
@-webkit-keyframes "ring" {
0% {
-webkit-transform: scaleX(0.1) scaleY(0.5);
transform: scaleX(0.1) scaleY(0.5);
-webkit-box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
}
/* hidden */
75%,100% {
-webkit-transform: scaleX(2) scaleY(2.1);
transform: scaleX(2) scaleY(2.1);
-webkit-box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
}
}
@-ms-keyframes "ring" {
0% {
-ms-transform: scaleX(0.1) scaleY(0.5);
transform: scaleX(0.1) scaleY(0.5);
box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
}
/* hidden */
75%,100% {
-ms-transform: scaleX(2) scaleY(2.1);
transform: scaleX(2) scaleY(2.1);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
}
}
@-o-keyframes "ring" {
0% {
-o-transform: scaleX(0.1) scaleY(0.5);
transform: scaleX(0.1) scaleY(0.5);
box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
}
/* hidden */
75%,100% {
-o-transform: scaleX(2) scaleY(2.1);
transform: scaleX(2) scaleY(2.1);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
}
}
@keyframes "ring2" {
0% {
-webkit-transform: scaleX(0.5) scaleY(0.1);
-moz-transform: scaleX(0.5) scaleY(0.1);
-o-transform: scaleX(0.5) scaleY(0.1);
-ms-transform: scaleX(0.5) scaleY(0.1);
transform: scaleX(0.5) scaleY(0.1);
-webkit-box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
}
/* hidden */
65%,100% {
-webkit-transform: scaleX(2) scaleY(2.1);
-moz-transform: scaleX(2) scaleY(2.1);
-o-transform: scaleX(2) scaleY(2.1);
-ms-transform: scaleX(2) scaleY(2.1);
transform: scaleX(2) scaleY(2.1);
-webkit-box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
}
}
@-moz-keyframes ring2 {
0% {
-moz-transform: scaleX(0.5) scaleY(0.1);
transform: scaleX(0.5) scaleY(0.1);
box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
}
/* hidden */
65%,100% {
-moz-transform: scaleX(2) scaleY(2.1);
transform: scaleX(2) scaleY(2.1);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
}
}
@-webkit-keyframes "ring2" {
0% {
-webkit-transform: scaleX(0.5) scaleY(0.1);
transform: scaleX(0.5) scaleY(0.1);
-webkit-box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
}
/* hidden */
65%,100% {
-webkit-transform: scaleX(2) scaleY(2.1);
transform: scaleX(2) scaleY(2.1);
-webkit-box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
}
}
@-ms-keyframes "ring2" {
0% {
-ms-transform: scaleX(0.5) scaleY(0.1);
transform: scaleX(0.5) scaleY(0.1);
box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
}
/* hidden */
65%,100% {
-ms-transform: scaleX(2) scaleY(2.1);
transform: scaleX(2) scaleY(2.1);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
}
}
@-o-keyframes "ring2" {
0% {
-o-transform: scaleX(0.5) scaleY(0.1);
transform: scaleX(0.5) scaleY(0.1);
box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
}
/* hidden */
65%,100% {
-o-transform: scaleX(2) scaleY(2.1);
transform: scaleX(2) scaleY(2.1);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment