<div class="circlespinner">
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100" id=circle-middle><circle fill=#EDEDED cx=50 cy=50 r="6"/></svg>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg>
<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg>
</div>
@-webkit-keyframes spin {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.circlespinner {
-webkit-animation: spin 1s ease-in-out infinite alternate both;
animation: spin 1s ease-in-out infinite alternate both;
height: 100px;
position: relative;
width: 100px;
}
.circlespinner svg:not(#circle-middle) {
-webkit-animation: spin 1s ease-in-out infinite alternate both;
animation: spin 1s ease-in-out infinite alternate both;
position: absolute;
top: -50%;
left: 0;
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.circlespinner svg:nth-of-type(1):not(#circle-middle) {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.circlespinner svg:nth-of-type(2):not(#circle-middle) {
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
.circlespinner svg:nth-of-type(3):not(#circle-middle) {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.circlespinner svg:nth-of-type(4):not(#circle-middle) {
-webkit-transform: rotate(120deg);
transform: rotate(120deg);
}
.circlespinner svg:nth-of-type(5):not(#circle-middle) {
-webkit-transform: rotate(150deg);
transform: rotate(150deg);
}
.circlespinner svg:nth-of-type(6):not(#circle-middle) {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.circlespinner svg:nth-of-type(7):not(#circle-middle) {
-webkit-transform: rotate(210deg);
transform: rotate(210deg);
}
.circlespinner svg:nth-of-type(8):not(#circle-middle) {
-webkit-transform: rotate(240deg);
transform: rotate(240deg);
}
.circlespinner svg:nth-of-type(9):not(#circle-middle) {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.circlespinner svg:nth-of-type(10):not(#circle-middle) {
-webkit-transform: rotate(300deg);
transform: rotate(300deg);
}
.circlespinner svg:nth-of-type(11):not(#circle-middle) {
-webkit-transform: rotate(330deg);
transform: rotate(330deg);
}
.circlespinner svg:nth-of-type(12):not(#circle-middle) {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
.circlespinner svg:nth-of-type(13):not(#circle-middle) {
-webkit-transform: rotate(390deg);
transform: rotate(390deg);
}