Documentation

Vue

Circle Progress

Use the required class varient (e.g. progress-secondary, progress-success, progress-warning, progress-danger, progress-dark ) for different background-color.

HTML Code

<circle class="text-gray-400" stroke-width="5" stroke="currentColor" fill="transparent" r="30" cx="40"  cy="40"/>
<circle class="text-blue-600" stroke-width="5" :stroke-dasharray="360" :stroke-dashoffset="200" stroke-linecap="round"stroke="currentColor" fill="transparent" r="30" cx="40" cy="40"/>