<div class="wrap">
<svg version="1.1" id="group" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 150 150" style="enable-background:new 0 0 150 150;" xml:space="preserve">
<circle class="item01" cx="75" cy="75.04" r="59.4"/>
<circle class="item02" cx="75" cy="75.04" r="51.45"/>
<circle class="item03" cx="75" cy="75.04" r="43.45"/>
<circle class="item04" cx="75" cy="75.04" r="35.75"/>
<circle class="item05" cx="75" cy="75.04" r="27.56"/>
<circle class="item06" cx="75" cy="75.04" r="19.5"/>
<circle class="item07" cx="75" cy="75.04" r="11.5"/>
<circle class="item08" cx="75" cy="75.04" r="4.5"/>
</svg>
</div>
body{
  width: 100%;
  height: 100vh;
  margin: 0;
  background: #f1f1f1;
  animation: bg .6s ease 1.8s 1 forwards;
}

.wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40%;
  height: 100%;
  margin: 0 auto;
}

#group{
  display: block;
  width: 100%;
}

@keyframes circle01 {
   0% {
   stroke-dashoffset: 374;
  }
   100% {
   stroke-dashoffset: 0;
  }
}

@keyframes circle02 {
   0% {
   stroke-dashoffset: 324;
  }
   100% {
   stroke-dashoffset: 0;
  }
}

@keyframes circle03 {
   0% {
   stroke-dashoffset: 274;
  }
   100% {
   stroke-dashoffset: 0;
  }
}

@keyframes circle04 {
   0% {
   stroke-dashoffset: 225;
  }
   100% {
   stroke-dashoffset: 0;
  }
}

@keyframes circle05 {
   0% {
   stroke-dashoffset: 174;
  }
   100% {
   stroke-dashoffset: 0;
  }
}

@keyframes circle06 {
   0% {
   stroke-dashoffset: 123;
  }
   100% {
   stroke-dashoffset: 0;
  }
}

@keyframes circle07 {
   0% {
   stroke-dashoffset: 73;
  }
   100% {
   stroke-dashoffset: 0;
  }
}

@keyframes circle08 {
   0% {
   stroke-dashoffset: 29;
  }
   100% {
   stroke-dashoffset: 0;
  }
}

@keyframes circleOutside {
   0% {
  transform: rotate(-90deg);
  stroke: #222;
  }
   100% {
  transform: rotate(-360deg);
  stroke-dasharray: 1.4%;
  stroke: #FD9627;
  }
}

@keyframes circleInside {
   0% {
   fill: transparent;
   stroke: #222;
  }
   100% {
   fill: #FD9627;
   stroke: #FD9627;
  }
}

.item01,.item02,.item03,.item04,.item05,.item06,.item07,.item08{
  fill: transparent;
  stroke: #222;
  stroke-width: 0.8;
  transform: rotate(-90deg);
  transform-origin: center;
}

.item01{
  stroke-dasharray: 374;
  stroke-dashoffset: 374;
  animation: circle01 .6s ease 1 forwards,
  circleOutside .6s ease 1.4s 1 forwards;
}

.item02{
  stroke-dasharray: 324;
  stroke-dashoffset: 324;
  animation: circle02 .6s ease .2s 1 forwards,
  circleOutside .6s ease 1.4s 1 forwards;
}

.item03{
  stroke-dasharray: 274;
  stroke-dashoffset: 274;
  animation: circle03 .6s ease .4s 1 forwards,
  circleOutside .6s ease 1.4s 1 forwards;
}

.item04{
  stroke-dasharray: 225;
  stroke-dashoffset: 225;
  animation: circle04 .6s ease .6s 1 forwards,
  circleOutside .6s ease 1.4s 1 forwards;
}

.item05{
  stroke-dasharray: 174;
  stroke-dashoffset: 174;
  animation: circle05 .6s ease .8s 1 forwards,
  circleInside .6s ease 1.4s 1 forwards;
}

.item06{
  stroke-dasharray: 123;
  stroke-dashoffset: 123;
  animation: circle06 .6s ease 1s 1 forwards,
  circleInside .6s ease 1.4s 1 forwards;
}

.item07{
  stroke-dasharray: 73;
  stroke-dashoffset: 73;
  animation: circle07 .6s ease 1.2s 1 forwards,
  circleInside .6s ease 1.4s 1 forwards;
}

.item08{
  stroke-dasharray: 29;
  stroke-dashoffset: 29;
  animation: circle08 .6s ease 1.4s 1 forwards,
  circleInside .6s ease 1.4s 1 forwards;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.