Skip to content

Instantly share code, notes, and snippets.

@MoOx
Created January 31, 2012 11:00
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 MoOx/1709911 to your computer and use it in GitHub Desktop.
Save MoOx/1709911 to your computer and use it in GitHub Desktop.
Basic Reset
/* Basic Reset */
* {
margin: 0;
padding: 0;
}
html, body {
background: #252525;
}
.content {width:800px; margin:0 auto; padding-top:50px;}
.contentBar {width:90px; margin:0 auto; padding-top:50px; padding-bottom:50px;}
.circle {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-right:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px #2187e7;
width:50px;
height:50px;
margin:0 auto;
-moz-animation:spinPulse 1s infinite ease-in-out;
-webkit-animation:spinPulse 1s infinite linear;
}
.circle1 {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-left:5px solid rgba(0,0,0,0);
border-right:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px #2187e7;
width:30px;
height:30px;
margin:0 auto;
position:relative;
top:-50px;
-moz-animation:spinoffPulse 1s infinite linear;
-webkit-animation:spinoffPulse 1s infinite linear;
}
@-moz-keyframes spinPulse {
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
50% { -moz-transform:rotate(145deg); opacity:1; }
100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spinoffPulse {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg); }
}
@-webkit-keyframes spinPulse {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
50% { -webkit-transform:rotate(145deg); opacity:1;}
100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinoffPulse {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
}
#loader {
margin: 50px auto;
background: -webkit-linear-gradient(top, #292929, #2E2E2E);
background: -moz-linear-gradient(top, #292929, #2E2E2E);
background: -ms-linear-gradient(top, #292929, #2E2E2E);
background: -o-linear-gradient(top, #292929, #2E2E2E);
background: linear-gradient(top, #292929, #2E2E2E);
width: 200px;
height: 20px;
-webkit-box-shadow: inset 0 2px 3.5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 2px 3.5px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 2px 3.5px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border: 4px solid rgba(255, 255, 255, 0.05);
}
#bar {
height: 20px;
width: 0px;
background: -webkit-linear-gradient(top, #4892D9, #1960BC);
background: -moz-linear-gradient(top, #4892D9, #1960BC);
background: -ms-linear-gradient(top, #4892D9, #1960BC);
background: -o-linear-gradient(top, #4892D9, #1960BC);
background: linear-gradient(top, #4892D9, #1960BC);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0 0 2px #000, inset 0 -7px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 030px rgba(63,137,205, 0.4);
-moz-box-shadow: 0 0 2px #000, inset 0 -7px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 030px rgba(63,137,205, 0.4);
box-shadow: 0 0 2px #000, inset 0 -7px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 30pxrgba(63,137,205, 0.4);
-webkit-animation: progress 4s linear forwards;
-moz-animation: progress 4s linear forwards;
-ms-animation: progress 4s linear forwards;
animation: progress 4s linear forwards;
}
@-webkit-keyframes progress {
from {}
to {width: 100%;}
}
@-moz-keyframes progress {
from {}
to {width: 100%;}
}
@-ms-keyframes progress {
from {}
to {width: 100%;}
}
@keyframes progress {
from {}
to {width: 100%;}
}
<div class="content"><div class="circle"></div><div class="circle1"></div></div><div id="loader"><div id="bar"></div></div>
{"view":"split","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment