SVG loading circle doughnut

"slide carousel"

by jorgeluis

HTML

<svg viewbox="0 0 46 46" id="donut">
	<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 6s;
}

@keyframes animateDoughnut {
  to {
  	stroke-dashoffset: 100;
  }

}

JavaScript

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

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