Skip to content

Instantly share code, notes, and snippets.

@IshamMohamed

IshamMohamed/jsbin.kumuw.css

Created May 22, 2014 03:37
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 IshamMohamed/43c922096549d65499dc to your computer and use it in GitHub Desktop.
Save IshamMohamed/43c922096549d65499dc to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.kumuw.css
/*Thanks to @lukehaas all the CSS codes are from him*/
/*=Loader1's CSS code, this is a Facebook loader like loader=*/
.loader1,
.loader1:before,
.loader1:after {
background: #FFF;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader1:before,
.loader1:after {
position: absolute;
top: 0;
content: '';
}
.loader1:before {
left: -1.5em;
}
.loader1 {
text-indent: -9999em;
margin: 40% auto;
position: relative;
font-size: 11px;
-webkit-animation-delay: 0.16s;
animation-delay: 0.16s;
}
.loader1:after {
left: 1.5em;
-webkit-animation-delay: 0.32s;
animation-delay: 0.32s;
}
@-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0 #FFF;
height: 4em;
}
40% {
box-shadow: 0 -2em #ffffff;
height: 5em;
}
}
@keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0 #FFF;
height: 4em;
}
40% {
box-shadow: 0 -2em #ffffff;
height: 5em;
}
}
/*=Loader1's CSS code, ends here=*/
/*=================================*/
/*=================================*/
/*=Loader2's CSS code=*/
.loader2,
.loader2:before,
.loader2:after {
border-radius: 50%;
}
.loader2:before,
.loader2:after {
position: absolute;
content: '';
}
.loader2:before {
width: 5.2em;
height: 10.2em;
background: #0dcecb;
border-radius: 10.2em 0 0 10.2em;
top: -0.1em;
left: -0.1em;
-webkit-transform-origin: 5.2em 5.1em;
transform-origin: 5.2em 5.1em;
-webkit-animation: load2 2s infinite ease 1.5s;
animation: load2 2s infinite ease 1.5s;
}
.loader2 {
font-size: 11px;
text-indent: -99999em;
margin: 30% auto;
position: relative;
width: 10em;
height: 10em;
box-shadow: inset 0 0 0 1em #FFF;
}
.loader2:after {
width: 5.2em;
height: 10.2em;
background: #0dcecb;
border-radius: 0 10.2em 10.2em 0;
top: -0.1em;
left: 5.1em;
-webkit-transform-origin: 0px 5.1em;
transform-origin: 0px 5.1em;
-webkit-animation: load2 2s infinite ease;
animation: load2 2s infinite ease;
}
@-webkit-keyframes load2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/*=Loader2's CSS code, ends here=*/
/*=================================*/
/*=================================*/
/*=Loader3's CSS code=*/
.loader3 {
margin: 6em auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(255, 255, 255, 0.2);
border-right: 1.1em solid rgba(255, 255, 255, 0.2);
border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
border-left: 1.1em solid #ffffff;
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
.loader3,
.loader3:after {
border-radius: 50%;
width: 10em;
height: 10em;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/*=Loader3's CSS code, ends here=*/
Raw
jsbin.kumuw.html
<body bgcolor='#0dcecb'>
Loader 1
<div class="loader1">Loading...</div>
Loader 2
<div class="loader2">Loading...</div>
Loader 3
<div class="loader3">Loading...</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment