SVG - Animation

by Lio Fleishman

HTML

<div class="anim_container">
	<span class="dotted_circle">
		<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 250 250" style="enable-background:new 0 0 250 250;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#087AC1;}
	.st1{fill:#087AC1;}
	.st2{fill:#0A7BC1;}
	.st3{fill:#087AC1;}
	.st4{fill:#087AC1;}
	.st5{fill:#087AC1;}
	.st6{fill:#087AC1;}
	.st7{fill:#087AC1;}
</style>
<path class="st0" d="M206.1,123.7c-3.8,1-4.7-0.2-4.9-3c-0.3-5.1,3.7-3,5.9-3.6c2.7-0.7,3.7,0.5,3.9,3.3
	C211.3,125.7,207.1,122.9,206.1,123.7z"/>
<path class="st1" d="M47.2,136.7c-3.9,1.1-5.2-0.3-5.1-3.3c0-4.9,4-2.6,6.2-3.3c3-0.9,3.5,1.1,3.7,3.6
	C52.3,138.7,48.1,135.7,47.2,136.7z"/>
<path class="st2" d="M159.7,49.9c1.8,1.5,5.3,1.2,5,3.6c-0.3,2.5-1.2,5.9-3.9,6.9c-1.3,0.5-5.1-0.6-5-2.8
	C155.9,54.9,157.6,52.2,159.7,49.9z"/>
<path class="st3" d="M122.9,49.4c1.3,4.2-1.8,4-4.1,4.2c-4.6,0.4-2.2-3.4-2.8-5.3c-0.9-2.9,0.4-4.1,3.5-4.2
	C124.1,43.8,122,47.5,122.9,49.4z"/>
<path class="st3" d="M59.4,93.6c-1.1,1.8-1.1,4.2-3.1,5c-1.3,0.5-7.9-3.5-7.5-4.4c0.7-1.7,1-4.8,3-4.5C54.5,90.2,57.5,91,59.4,93.6z
	"/>
<path class="st4" d="M60.2,176.1c-2.2-0.7-2.9-2.7-3.9-4.3c-0.5-0.8,5.6-5.9,6.8-5.6c2,0.6,3.8,3.1,3.5,4.3
	C66,173.6,62.4,174.1,60.2,176.1z"/>
<path class="st3" d="M137.7,203c1.1,3.9-0.5,4.7-3.4,4.9c-4.6,0.4-2.8-3-3.3-5c-0.9-3.4,0.8-4.3,3.8-4.5
	C139.3,198.1,136.8,201.9,137.7,203z"/>
<path class="st5" d="M193.8,158.2c2.2-1.4,1.3-5.4,4.3-4.3c2.4,0.9,6.4,0.6,6.5,4.4c0,1.3-0.5,4.5-3.2,3.9
	C198.8,161.6,196,160.6,193.8,158.2z"/>
<path class="st6" d="M85.8,64.5c-1.5,1.7-3.2,3-5.3,3.6c-0.7,0.2-5.5-6.3-5.1-6.9c1.2-1.6,3.1-3.6,4.7-3.2
	C83,58.9,83.9,62.3,85.8,64.5z"/>
<path class="st7" d="M197.1,82.2c-2.3,2.3-4.7,4.4-7.4,4.9c-1.8,0.3-3.9-3.1-3.5-4.5c0.8-2.6,3.9-4.2,6.4-4.7
	C194.9,77.4,195.3,80.8,197.1,82.2z"/>
<path class="st6"...

SCSS

$containerSize: 80px;
$timeAnim: 3s;

.anim_container {
	position: relative;
  margin: 22px;
  width: $containerSize;
  height: $containerSize;
  box-sizing: border-box;
}

.ccheck {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 6%;
	top: -5%;
}
.dotted_circle {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -webkit-animation:spin $timeAnim linear infinite;
    -moz-animation:spin $timeAnim linear infinite;
    animation:spin $timeAnim linear infinite;
		box-sizing: border-box;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg);}}