.space {
  widht: 100vw;
  height: 100vh;
}
.space.one {
  background: #000;
}
.space.two {
  background: #111;
}
.space.three {
  background: #222;
}
.space.four {
  background: #444;
}
.space.five {
  background: #555;
}

span {
  font-family: 'Roboto', sans-serif;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 50px;
  background: none;
  border: 0;
  color: #333;
  cursor: pointer;
  outline: 0;
  text-align: center;
}

svg {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(-90deg);
          transform: translate(-50%, -50%) rotate(-90deg);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  width: 350px;
}
svg .outer circle {
  fill: none;
  stroke: #fff;
  stroke-width: 2px;
  -webkit-transition: stroke-dasharray .5s linear;
  transition: stroke-dasharray .5s linear;
}
svg .inner circle {
  fill: none;
  stroke: #333;
  stroke-width: 2;
}

.twenty-percent .outer .out {
  stroke-dasharray: 75px 1000000px;
}
.twenty-percent .outer .mid {
  stroke-dasharray: 55px 1000000px;
}
.twenty-percent .outer .in {
  stroke-dasharray: 35px 1000000px;
}

.fourty-percent .outer .out {
  stroke-dasharray: 150px 1000000px;
}
.fourty-percent .outer .mid {
  stroke-dasharray: 120px 1000000px;
}
.fourty-percent .outer .in {
  stroke-dasharray: 90px 1000000px;
}

.sixty-percent .outer .out {
  stroke-dasharray: 275px 1000000px;
}
.sixty-percent .outer .mid {
  stroke-dasharray: 225px 1000000px;
}
.sixty-percent .outer .in {
  stroke-dasharray: 180px 1000000px;
}

.eighty-percent .outer .out {
  stroke-dasharray: 320px 1000000px;
}
.eighty-percent .outer .mid {
  stroke-dasharray: 265px 1000000px;
}
.eighty-percent .outer .in {
  stroke-dasharray: 210px 1000000px;
}

.full-percent .outer .out {
  stroke-dasharray: 375px 1000000px;
}
.full-percent .outer .mid {
  stroke-dasharray: 330px 1000000px;
}
.full-percent .outer .in {
  stroke-dasharray: 300px 1000000px;
}