SVG loading circle doughnut

"dash animation"

by jorgeluis

HTML

<svg viewbox="0 0 46 46" id="doughnut">
	<circle class="base-circle" cx="23" cy="23" r="16" />

	<circle class="value-segment" cx="23" cy="23" r="16" stroke-dasharray="60 40" />

</svg>

<button onclick="toggleLoading()">
Loading
</button>

CSS

/**
 * CSS transitions on stroke-dasharray
 */
.value-segment, 
.base-circle {
  fill: none;
	stroke-width: 10;
}

.base-circle {
  stroke: #ddd;
}

.value-segment {
	stroke: red;
  stroke-dashoffset: 25;
	transition: 1s;
}

.is-loading .base-circle {
  stroke-dasharray: 2;
  animation: animateDoughnut infinite reverse linear 2s;
}

.is-loading .value-segment {
  opacity: 0
}


@keyframes animateDoughnut {
  0% {
    stroke-dasharray: 1,100;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89,100;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89,100;
    stroke-dashoffset: -100;
  }
}

JavaScript

var svgimg = document.getElementById('donut');

function toggleLoading () {
	svgimg.classList.toggle('is-loading')
}