Skip to content

Instantly share code, notes, and snippets.

@jacktandrew

jacktandrew/Arrows

Created November 1, 2012 00:51
Show Gist options
  • Save jacktandrew/3990945 to your computer and use it in GitHub Desktop.
Save jacktandrew/3990945 to your computer and use it in GitHub Desktop.
Download ZIP
Loading Spinners
Raw
Arrows
<html>
<head>
<style>
.arrow_wrap {
display: inline-block;
position: relative;
height: 54px;
width: 54px;
}
.arrow_wrap div {
position: absolute;
}
.outer_circle {
top: 5%;
left: 5%;
height: 90%;
width: 90%;
border-radius: 90%;
background: #555;
}
.inner_circle {
top: 15%;
left: 15%;
height: 70%;
width: 70%;
border-radius: 70%;
background: #FFF;
}
.circle_break {
background: #FFF;
height: 110%;
width: 25%;
left: 39%;
top: -5%;
-webkit-animation: circle_break 3s linear infinite;
}
.arrow_head {
border-style: solid;
border-width: 10px;
height: 0;
width: 0;
top: 31%;
left: -31%;
}
.arrow_head:first-child {
border-color: #555 #555 transparent transparent;
-webkit-transform: translate(-50%, -93%);
}
.arrow_head:last-child {
border-color: transparent transparent #555 #555;
-webkit-transform: translate(50%, 93%);
}
@-webkit-keyframes circle_break {
from {-webkit-transform: rotate(45deg);}
to {-webkit-transform: rotate(405deg);}
}
</style>
</head>
<body>
<div class="arrow_wrap">
<div class="outer_circle">
<div class="inner_circle"></div>
<div class="circle_break">
<div class="arrow_head"></div>
<div class="arrow_head"></div>
</div>
</div>
</div>
</body>
Raw
Ball in Circle
<html>
<head>
<style>
.ball_in_circle_wrap {
position: relative;
width: 54px;
height: 54px;
display: inline-block;
}
.ball_in_circle, .ball_in_circle div {position: absolute;}
.ball_in_circle_wrap, .ball_in_circle div {background: #333;}
.ball_in_circle {
background: #DDD;
border-radius: 81%;
height: 81%;
width: 81%;
top: 9%;
left: 9%;
-webkit-animation: ball_in_circle 1.5s linear infinite;
}
.ball_in_circle div:first-child {
height: 25%;
width: 25%;
border-radius: 50%;
top: 3%;
left: 40%;
}
.ball_in_circle div:last-child {
height: 40%;
width: 40%;
border-radius: 80%;
left: 30%;
top: 30%;
}
@-webkit-keyframes ball_in_circle {
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}
/* Arrows */
.arrow_wrap {
display: inline-block;
position: relative;
height: 54px;
width: 54px;
}
.arrow_wrap div {
position: absolute;
}
.outer_circle {
top: 5%;
left: 5%;
height: 90%;
width: 90%;
border-radius: 90%;
background: #555;
}
.inner_circle {
top: 15%;
left: 15%;
height: 70%;
width: 70%;
border-radius: 70%;
background: #FFF;
}
.circle_break {
background: #FFF;
height: 110%;
width: 25%;
left: 39%;
top: -5%;
-webkit-animation: circle_break 3s linear infinite;
}
.arrow_head {
border-style: solid;
border-width: 10px;
height: 0;
width: 0;
top: 31%;
left: -31%;
}
.arrow_head:first-child {
border-color: #555 #555 transparent transparent;
-webkit-transform: translate(-50%, -93%);
}
.arrow_head:last-child {
border-color: transparent transparent #555 #555;
-webkit-transform: translate(50%, 93%);
}
@-webkit-keyframes circle_break {
from {-webkit-transform: rotate(45deg);}
to {-webkit-transform: rotate(405deg);}
}
</style>
</head>
<body>
<div class="ball_in_circle_wrap">
<div class="ball_in_circle">
<div></div>
<div></div>
</div>
</div>
</body>
Raw
Clock
<html>
<head>
<style>
.clock_spinner {
position: relative;
width: 54px;
height: 54px;
display: inline-block;
text-align: center;
}
.clock_spinner div {
position: absolute;
background: #333;
height: 18%;
width: 5%;
border-radius: 10%;
top: 39%;
left: 39%;
opacity: 0.3;
-webkit-animation: clock_spinner 1.5s linear infinite;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);
}
@-webkit-keyframes clock_spinner {
from {opacity: 1;}
to {opacity: 0.3;}
}
.clock_spinner div:first-child {-webkit-transform: translate(0, -130%);}
.clock_spinner div:nth-child(2) {
-webkit-transform: rotate(30deg) translate(0, -130%); -webkit-animation-delay: 0.125s}
.clock_spinner div:nth-child(3) {
-webkit-transform: rotate(60deg) translate(0, -130%); -webkit-animation-delay: 0.25s}
.clock_spinner div:nth-child(4) {
-webkit-transform: rotate(90deg) translate(0, -130%); -webkit-animation-delay: 0.375s}
.clock_spinner div:nth-child(5) {
-webkit-transform: rotate(120deg) translate(0, -130%); -webkit-animation-delay: 0.5s}
.clock_spinner div:nth-child(6) {
-webkit-transform: rotate(150deg) translate(0, -130%); -webkit-animation-delay: 0.625s}
.clock_spinner div:nth-child(7) {
-webkit-transform: rotate(180deg) translate(0, -130%); -webkit-animation-delay: 0.75s}
.clock_spinner div:nth-child(8) {
-webkit-transform: rotate(210deg) translate(0, -130%); -webkit-animation-delay: 0.875s}
.clock_spinner div:nth-child(9) {
-webkit-transform: rotate(240deg) translate(0, -130%); -webkit-animation-delay: 1s}
.clock_spinner div:nth-child(10) {
-webkit-transform: rotate(270deg) translate(0, -130%); -webkit-animation-delay: 1.125s}
.clock_spinner div:nth-child(11) {
-webkit-transform: rotate(300deg) translate(0, -130%); -webkit-animation-delay: 1.25s}
.clock_spinner div:nth-child(12) {
-webkit-transform: rotate(330deg) translate(0, -130%); -webkit-animation-delay: 1.375s}
</style>
</head>
<body>
<div class="clock_spinner">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
Raw
Eight Ball
<html>
<head>
<style>
.eight_ball {
position: relative;
width: 54px;
height: 54px;
display: inline-block;
text-align: center;
}
.eight_ball div {
position: absolute;
background: #333;
height: 20%;
width: 20%;
border-radius: 100%;
top: 39%;
left: 39%;
opacity: 0.3;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);
-webkit-animation: eight_ball 1s linear infinite;
}
@-webkit-keyframes eight_ball {
from {opacity: 1;}
to {opacity: 0.2;}
}
.eight_ball div:nth-child(1) {
-webkit-transform: rotate(0deg) translate(0, -150%); }
.eight_ball div:nth-child(2) {
-webkit-transform: rotate(45deg) translate(0, -150%); -webkit-animation-delay: 0.125s}
.eight_ball div:nth-child(3) {
-webkit-transform: rotate(90deg) translate(0, -150%); -webkit-animation-delay: 0.25s}
.eight_ball div:nth-child(4) {
-webkit-transform: rotate(135deg) translate(0, -150%); -webkit-animation-delay: 0.375s}
.eight_ball div:nth-child(5) {
-webkit-transform: rotate(180deg) translate(0, -150%); -webkit-animation-delay: 0.5s}
.eight_ball div:nth-child(6) {
-webkit-transform: rotate(225deg) translate(0, -150%); -webkit-animation-delay: 0.625s}
.eight_ball div:nth-child(7) {
-webkit-transform: rotate(270deg) translate(0, -150%); -webkit-animation-delay: 0.75s}
.eight_ball div:nth-child(8) {
-webkit-transform: rotate(315deg) translate(0, -150%); -webkit-animation-delay: 0.875s}
</style>
</head>
<body>
<div class="eight_ball">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment