A Pen by Florian Wirtz.

Circle-Animation.markdown

Circle Animation

A nice dot spin animation inspired by Z.E.D. (Dribbble)

https://dribbble.com/shots/1663112-Dial-Mother-Ship?list=shots&sort=popular&timeframe=now&offset=98

A Pen by Florian Wirtz on CodePen.

License.

index.html

<div class="bg"></div>
<div class="content">		
		<div class="circle no1">
			<span class="dot"></span>
			<span class="dot deg90"></span>
		</div>  
		<div class="circle no2">
			<span class="dot"></span>
			<span class="dot deg45"></span>
			<span class="dot deg90"></span>
			<span class="dot deg135"></span>
		</div>
		<div class="circle no3">
			<span class="dot"></span>
			<span class="dot deg30"></span>
			<span class="dot deg60"></span>
			<span class="dot deg90"></span>
			<span class="dot deg120"></span>
			<span class="dot deg150"></span>
		</div>
		<div class="circle no4">
			<span class="dot"></span>
			<span class="dot deg22"></span>
			<span class="dot deg45"></span>
			<span class="dot deg67"></span>
			<span class="dot deg90"></span>
			<span class="dot deg112"></span>
			<span class="dot deg135"></span>
			<span class="dot deg157"></span>		
		</div>
		<div class="circle no5">
			<span class="dot"></span>
			<span class="dot deg18"></span>
			<span class="dot deg36"></span>
			<span class="dot deg54"></span>
			<span class="dot deg72"></span>
			<span class="dot deg90"></span>
			<span class="dot deg108"></span>
			<span class="dot deg126"></span>
			<span class="dot deg144"></span>
			<span class="dot deg162"></span>
		</div>
		<div class="circle no6">
			<span class="dot"></span>
			<span class="dot deg15"></span>
			<span class="dot deg30"></span>
			<span class="dot deg45"></span>
			<span class="dot deg60"></span>
			<span class="dot deg75"></span>
			<span class="dot deg90"></span>
			<span class="dot deg105"></span>
			<span class="dot deg120"></span>
			<span class="dot deg135"></span>
			<span class="dot deg150"></span>
			<span class="dot deg165"></span>
		</div>
		<div class="circle no7">
			<span class="dot"></span>
			<span class="dot deg12"></span>
			<span class="dot deg25"></span>
			<span class="dot deg38"></span>
			<span class="dot deg51"></span>
			<span class="dot deg64"></span>
			<span class="dot deg77"></span>
			<span class="dot deg90"></span>
			<span class="dot deg102"></span>
			<span class="dot deg115"></span>
			<span class="dot deg128"></span>
			<span class="dot deg141"></span>
			<span class="dot deg154"></span>
			<span class="dot deg167"></span>
		</div>
		<div class="circle no8">
			<span class="dot"></span>
			<span class="dot deg11"></span>			
			<span class="dot deg22"></span>
			<span class="dot deg33"></span>
			<span class="dot deg45"></span>
			<span class="dot deg56"></span>
			<span class="dot deg67"></span>
			<span class="dot deg78"></span>
			<span class="dot deg90"></span>
			<span class="dot deg101"></span>
			<span class="dot deg112"></span>
			<span class="dot deg123"></span>
			<span class="dot deg135"></span>
			<span class="dot deg146"></span>
			<span class="dot deg157"></span>
			<span class="dot deg168"></span>
		</div>
		<div class="circle no9">
			<span class="dot"></span>
			<span class="dot deg10"></span>			
			<span class="dot deg20"></span>
			<span class="dot deg30"></span>
			<span class="dot deg40"></span>
			<span class="dot deg50"></span>
			<span class="dot deg60"></span>
			<span class="dot deg70"></span>
			<span class="dot deg80"></span>
			<span class="dot deg90"></span>
			<span class="dot deg100"></span>
			<span class="dot deg110"></span>
			<span class="dot deg120"></span>
			<span class="dot deg130"></span>
			<span class="dot deg140"></span>
			<span class="dot deg150"></span>
			<span class="dot deg160"></span>
			<span class="dot deg170"></span>
		</div>
		<div class="circle no10"></div>
</div>

style.css

body {
	padding:0;
	margin:0;	
}

.bg {
	position: absolute;
	width:100%;
	height:100%;
	background-image: url(http://31.media.tumblr.com/e7ac48834604ac8e9aaf4a3c106c4e86/tumblr_n9hxd1c4Y81st5lhmo1_1280.jpg);
	background-color: #fafafa;
	background-size: cover;
	-position: center;
	-webkit-filter: brightness(1.2);
	filter: brightness(1.2);
}

.content {
	width:100%;
	height:100%;
	top:0;
	right:0;
	bottom:0;
	left:0;
	position:absolute;
}

.circle {
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	background: transparent;
	z-index: 10;
}

.circle span.dot {
	position: absolute;
	width: 8px;
	height: 100%;
	top: 0;
	left: 50%;
	margin-left: -4px;
}

.circle span.dot:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 8px;
	height: 8px;
	background-color: #fafafa;
	border-radius: 50%;
}

.circle span.dot:before {
	content: '';
	position: absolute;
	left: 0;
	top: 100%;
	margin-top: -8px;
	display: block;
	width: 8px;
	height: 8px;
	background-color: #fafafa;
	border-radius: 50%;
}

/* Degrees */

.deg10 { -webkit-transform: rotate(10deg); transform: rotate(10deg); }
.deg11 { -webkit-transform: rotate(11.25deg); transform: rotate(11.25deg); }
.deg12 { -webkit-transform: rotate(12.857143deg); transform: rotate(12.857143deg); }
.deg15 { -webkit-transform: rotate(15deg); transform: rotate(15deg); }
.deg18 { -webkit-transform: rotate(18deg); transform: rotate(18deg); }
.deg20 { -webkit-transform: rotate(20deg); transform: rotate(20deg); }
.deg22 { -webkit-transform: rotate(22.50deg); transform: rotate(22.50deg); }
.deg25 { -webkit-transform: rotate(25.714286deg); transform: rotate(25.714286deg); }
.deg30 { -webkit-transform: rotate(30deg); transform: rotate(30deg); }
.deg36 { -webkit-transform: rotate(36deg); transform: rotate(36deg); }
.deg33 { -webkit-transform: rotate(33.75deg); transform: rotate(33.75deg); }
.deg38 { -webkit-transform: rotate(38.571429deg); transform: rotate(38.571429deg); }
.deg40 { -webkit-transform: rotate(40deg); transform: rotate(40deg); }

.deg45 { -webkit-transform: rotate(45deg); transform: rotate(45deg); }

.deg50 { -webkit-transform: rotate(50deg); transform: rotate(50deg); }
.deg51 { -webkit-transform: rotate(51.428572deg); transform: rotate(51.428572deg); }
.deg54 { -webkit-transform: rotate(54deg); transform: rotate(54deg); }
.deg56 { -webkit-transform: rotate(56.25deg); transform: rotate(56.25deg); }
.deg60 { -webkit-transform: rotate(60deg); transform: rotate(60deg); }
.deg64 { -webkit-transform: rotate(64.285715deg); transform: rotate(64.285715deg); }
.deg67 { -webkit-transform: rotate(67.50deg); transform: rotate(67.50deg); }
.deg70 { -webkit-transform: rotate(70deg); transform: rotate(70deg); }
.deg72 { -webkit-transform: rotate(72deg); transform: rotate(72deg); }
.deg75 { -webkit-transform: rotate(75deg); transform: rotate(75deg); }
.deg77 { -webkit-transform: rotate(77.142857deg); transform: rotate(77.142857deg); }
.deg78 { -webkit-transform: rotate(78.75deg); transform: rotate(78.75deg); }
.deg80 { -webkit-transform: rotate(80deg); transform: rotate(80deg); }

.deg90 { -webkit-transform: rotate(90deg); transform: rotate(90deg); }

.deg100 { -webkit-transform: rotate(100deg); transform: rotate(100deg); }
.deg101 { -webkit-transform: rotate(101.25deg); transform: rotate(101.25deg); }
.deg102 { -webkit-transform: rotate(102.857143deg); transform: rotate(102.857143deg); }
.deg105 { -webkit-transform: rotate(105deg); transform: rotate(105deg); }
.deg108 { -webkit-transform: rotate(108deg); transform: rotate(108deg); }
.deg110 { -webkit-transform: rotate(110deg); transform: rotate(110deg); }
.deg112 { -webkit-transform: rotate(112.50deg); transform: rotate(112.50deg); }
.deg120 { -webkit-transform: rotate(120deg); transform: rotate(120deg); }
.deg123 { -webkit-transform: rotate(123.75deg); transform: rotate(123.75deg); }
.deg115 { -webkit-transform: rotate(115.714286deg); transform: rotate(115.714286deg); }
.deg126 { -webkit-transform: rotate(126deg); transform: rotate(126deg); }
.deg128 { -webkit-transform: rotate(128.571429deg); transform: rotate(128.571429deg); }
.deg130 { -webkit-transform: rotate(130deg); transform: rotate(130deg); }

.deg135 { -webkit-transform: rotate(135deg); transform: rotate(135deg); }

.deg140 { -webkit-transform: rotate(140deg); transform: rotate(140deg); }
.deg141 { -webkit-transform: rotate(141.428572deg); transform: rotate(141.428572deg); }
.deg144 { -webkit-transform: rotate(144deg); transform: rotate(144deg); }
.deg146 { -webkit-transform: rotate(146.25deg); transform: rotate(146.25deg); }
.deg150 { -webkit-transform: rotate(150deg); transform: rotate(150deg); }
.deg154 { -webkit-transform: rotate(154.285715deg); transform: rotate(154.285715deg); }
.deg157 { -webkit-transform: rotate(157.50deg); transform: rotate(157.50deg); }
.deg160 { -webkit-transform: rotate(160deg); transform: rotate(160deg); }
.deg162 { -webkit-transform: rotate(162deg); transform: rotate(162deg); }
.deg167 { -webkit-transform: rotate(167.142857deg); transform: rotate(167.142857deg); }
.deg165 { -webkit-transform: rotate(165deg); transform: rotate(165deg); }
.deg168 { -webkit-transform: rotate(168.75deg); transform: rotate(168.75deg); }
.deg170 { -webkit-transform: rotate(170deg); transform: rotate(170deg); }

/* Animation */

.circle.no1 {
	width: 30px;
	height: 30px;
	margin: -15px 0 0 -15px;
	-webkit-animation: animatedOne 4s ease infinite;
	animation: animatedOne 4s ease infinite;
}

@-webkit-keyframes animatedOne {
	0% { -webkit-transform: rotate(0deg); }
	35% { -webkit-transform: rotate(-810deg); }
	100% { -webkit-transform: rotate(0deg); }
}
@keyframes animatedOne {
	0% { transform: rotate(0deg); }
	35% { transform: rotate(-810deg); }
	100% { transform: rotate(0deg); }
}

.circle.no2 {
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	-webkit-animation: animatedTwo 4s ease infinite;
	animation: animatedTwo 4s ease infinite;
}

@-webkit-keyframes animatedTwo {
	0% { -webkit-transform: rotate(0deg); }
	35% { -webkit-transform: rotate(-360deg); }
	100% { -webkit-transform: rotate(0deg); }
}
@keyframes animatedTwo {
	0% { transform: rotate(0deg); }
	35% { transform: rotate(-360deg); }
	100% { transform: rotate(0deg); }
}

.circle.no3 {
	width: 90px;
	height: 90px;
	margin: -45px 0 0 -45px;
	-webkit-animation: animatedThree 4s ease infinite;
	animation: animatedThree 4s ease infinite;
}

@-webkit-keyframes animatedThree {
	0% { -webkit-transform: rotate(0deg); }
	35% { -webkit-transform: rotate(-210deg); }
	100% { -webkit-transform: rotate(0deg); }
}
@keyframes animatedThree {
	0% { transform: rotate(0deg); }
	35% { transform: rotate(-210deg); }
	100% { transform: rotate(0deg); }
}

.circle.no4 {
	width: 120px;
	height: 120px;
	margin: -60px 0 0 -60px;
	-webkit-animation: animatedFour 4s ease infinite;
	animation: animatedFour 4s ease infinite;
}

@-webkit-keyframes animatedFour {
	0% { -webkit-transform: rotate(0deg); }
	35% { -webkit-transform: rotate(-135deg); }
	100% { -webkit-transform: rotate(0deg); }
}
@keyframes animatedFour {
	0% { transform: rotate(0deg); }
	35% { transform: rotate(-135deg); }
	100% { transform: rotate(0deg); }
}

.circle.no5 {
	width: 150px;
	height: 150px;
	margin: -75px 0 0 -75px;
	-webkit-animation: animatedFive 4s ease infinite;
	animation: animatedFive 4s ease infinite;
}

@-webkit-keyframes animatedFive {
	0% { -webkit-transform: rotate(0deg); }
	35% { -webkit-transform: rotate(-90deg); }
	100% { -webkit-transform: rotate(0deg); }
}
@keyframes animatedFive {
	0% { transform: rotate(0deg); }
	35% { transform: rotate(-90deg); }
	100% { transform: rotate(0deg); }
}

.circle.no6 {
	width: 180px;
	height: 180px;
	margin: -90px 0 0 -90px;
	-webkit-animation: animatedSix 4s ease infinite;
	animation: animatedSix 4s ease infinite;
}

@-webkit-keyframes animatedSix {
	0% { -webkit-transform: rotate(0deg); }
	35% { -webkit-transform: rotate(-60deg); }
	100% { -webkit-transform: rotate(0deg); }
}
@keyframes animatedSix {
	0% { transform: rotate(0deg); }
	35% { transform: rotate(-60deg); }
	100% { transform: rotate(0deg); }
}

.circle.no7 {
	width: 210px;
	height: 210px;
	margin: -105px 0 0 -105px;
	-webkit-animation: animatedSeven 4s ease infinite;
	animation: animatedSeven 4s ease infinite;
}

@-webkit-keyframes animatedSeven {
	0% { -webkit-transform: rotate(0deg); }
	35% { -webkit-transform: rotate(-38.571429deg); }
	100% { -webkit-transform: rotate(0deg); }
}
@keyframes animatedSeven {
	0% { transform: rotate(0deg); }
	35% { transform: rotate(-38.571429deg); }
	100% { transform: rotate(0deg); }
}

.circle.no8 {
	width: 240px;
	height: 240px;
	margin: -120px 0 0 -120px;
	-webkit-animation: animatedEight 4s ease infinite;
	animation: animatedEight 4s ease infinite;
}

@-webkit-keyframes animatedEight {
	0% { -webkit-transform: rotate(0deg); }
	35% { -webkit-transform: rotate(-22.5deg); }
	100% { -webkit-transform: rotate(0deg); }
}
@keyframes animatedEight {
	0% { transform: rotate(0deg); }
	35% { transform: rotate(-22.5deg); }
	100% { transform: rotate(0deg); }
}

.circle.no9 {
	width: 270px;
	height: 270px;
	margin: -135px 0 0 -135px;
	-webkit-animation: animatedNine 4s ease infinite;
	animation: animatedNine 4s ease infinite;
}

@-webkit-keyframes animatedNine {
	0% { -webkit-transform: rotate(0deg); }
	35% { -webkit-transform: rotate(-10deg); }
	100% { -webkit-transform: rotate(0deg); }
}
@keyframes animatedNine {
	0% { transform: rotate(0deg); }
	35% { transform: rotate(-10deg); }
	100% { transform: rotate(0deg); }
}

.circle.no10 {
	width: 400px;
	height: 400px;
	margin: -200px 0 0 -200px;
	background-color: #000000;
	opacity: 0.75;
	z-index: 5;
}