Skip to content

Instantly share code, notes, and snippets.

/Infinity-Loader.markdown

Created September 23, 2014 17:51
Show Gist options
  • Save anonymous/cf4ca204844680fffb9d to your computer and use it in GitHub Desktop.
Save anonymous/cf4ca204844680fffb9d to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Captain Anonymous.
Raw
index.html
<body>
<div id="container" class="center">
<div class="teardrop tearLeft"></div>
<div class="teardrop tearRight"></div>
<div id="contain1">
<div id="ball-holder1">
<div class="ballSettings ball1"></div>
</div>
</div>
<div id="contain2">
<div id="ball-holder2">
<div class="ballSettings ball2"></div>
</div>
</div>
</div>
</body>
Raw
Infinity-Loader.markdown
Raw
style.css
html, body{
margin: 0;
padding: 0;
}
body{
background-color: black;
}
#container {
height: 90px;
width: 189px;
}
.center {
position: absolute;
left: 50%;
top: 50%;
margin-left: -94px;
margin-top: -45px;
}
.teardrop {
border: 20px solid #FFFFFF;
border-radius: 50% 50% 0;
float: left;
height: 50px;
width: 50px;
-webkit-box-shadow: 0 0 15px 0px rgba(255, 255, 255, 0.8), 0px 0px 15px rgba(255, 255, 255, 0.8) inset;
-moz-box-shadow: 0 0 15px 0px rgba(255, 255, 255, 0.8), 0px 0px 15px rgba(255, 255, 255, 0.8) inset;
box-shadow: 0 0 15px 0px rgba(255, 255, 255, 0.8), 0px 0px 15px rgba(255, 255, 255, 0.8) inset;
}
.tearLeft {
margin-right: 9px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.tearRight{
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#ball-holder1 {
min-width: 90px;
min-height: 90px;
max-width: 90px;
max-height: 90px;
/*background-color: #F00;*/
display: block;
float: left;
position: relative;
top: -90px;
left: 0px;
-webkit-animation: ballPath1 2s linear infinite;
-moz-animation: ballPath1 2s linear infinite;
-ms-animation: ballPath1 2s linear infinite;
-o-animation: ballPath1 2s linear infinite;
animation: ballPath1 2s linear infinite;
}
#ball-holder2 {
min-width: 90px;
min-height: 90px;
max-width: 90px;
max-height: 90px;
/*background-color: #F00;*/
display: block;
float: left;
position: relative;
top: -90px;
left: -1px;
-webkit-animation: ballPath3 2s linear infinite;
-moz-animation: ballPath3 2s linear infinite;
-ms-animation: ballPath3 2s linear infinite;
-o-animation: ballPath3 2s linear infinite;
animation: ballPath3 2s linear infinite;
}
.ballSettings{
height: 10px;
width: 10px;
background-color: black;
border-radius: 100%;
position: relative;
}
.ball1 {
top: 40px;
left: 5px;
-webkit-animation: ball1 2s linear infinite;
-moz-animation: ball1 2s linear infinite;
-ms-animation: ball1 2s linear infinite;
-o-animation: ball1 2s linear infinite;
animation: ball1 2s linear infinite;
}
#contain1{
width: 90px;
height: 90px;
-webkit-animation: ballPath2 2s linear infinite;
-moz-animation: ballPath2 2s linear infinite;
-ms-animation: ballPath2 2s linear infinite;
-o-animation: ballPath2 2s linear infinite;
animation: ballPath2 2s linear infinite;
}
.ball2 {
top: 40px;
left: 5px;
-webkit-animation: ball3 2s linear infinite;
-moz-animation: ball3 2s linear infinite;
-ms-animation: ball3 2s linear infinite;
-o-animation: ball3 2s linear infinite;
animation: ball3 2s linear infinite;
}
#contain2{
height: 90px;
left: 100px;
position: relative;
top: -90px;
width: 90px;
-webkit-animation: ballPath4 2s linear infinite;
-moz-animation: ballPath4 2s linear infinite;
-ms-animation: ballPath4 2s linear infinite;
-o-animation: ballPath4 2s linear infinite;
animation: ballPath4 2s linear infinite;
}
/* FIREFOX */
@keyframes ballPath1
{
0% {transform: rotate(225deg);}
37.5% {transform: rotate(495deg);}
50% {transform: rotate(495deg);}
75% {transform: rotate(585deg);}
100% {transform: rotate(585deg);}
}
@keyframes ballPath2
{
0% {transform: translate(0px, 0px);}
37.5% {transform: translate(0px, 0px);}
50% {transform: translate(49.5px, 49.5px);opacity:1;}
50.001% {opacity:0;}
75% {transform: translate(0px, 0px);opacity:0;}
99.999% {opacity:0;}
100% {opacity:1;}
}
@keyframes ballPath3
{
0% {transform: rotate(675deg); opacity:0;}
37.5% {transform: rotate(675deg);}
50% {transform: rotate(675deg);opacity:0;}
50.001% {transform: rotate(675deg);opacity:1;}
87.5% {transform: rotate(405deg);}
100% {transform: rotate(405deg);}
}
@keyframes ballPath4
{
0% {transform: translate(0px, 0px);}
74.999% {transform: translate(0px, 0px);}
87.5% {transform: translate(0px, 0px);}
100% {transform: translate(-49.5px, 49.5px);}
}
/* CHROME */
@-webkit-keyframes ballPath1
{
0% {-webkit-transform: rotate(225deg);}
37.5% {-webkit-transform: rotate(495deg);}
50% {-webkit-transform: rotate(495deg);}
75% {-webkit-transform: rotate(585deg);}
100% {-webkit-transform: rotate(585deg);}
}
@-webkit-keyframes ballPath2
{
0% {-webkit-transform: translate(0px, 0px);}
37.5% {-webkit-transform: translate(0px, 0px);}
50% {-webkit-transform: translate(49.5px, 49.5px);opacity:1;}
50.001% {opacity:0;}
75% {-webkit-transform: translate(0px, 0px);opacity:0;}
99.999% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes ballPath3
{
0% {-webkit-transform: rotate(675deg); opacity:0;}
37.5% {-webkit-transform: rotate(675deg);}
50% {-webkit-transform: rotate(675deg);opacity:0;}
50.001% {-webkit-transform: rotate(675deg);opacity:1;}
87.5% {-webkit-transform: rotate(405deg);}
100% {-webkit-transform: rotate(405deg);}
}
@-webkit-keyframes ballPath4
{
0% {-webkit-transform: translate(0px, 0px);}
74.999% {-webkit-transform: translate(0px, 0px);}
87.5% {-webkit-transform: translate(0px, 0px);}
100% {-webkit-transform: translate(-49.5px, 49.5px);}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment