Hello SenangStart!
Zero config, instant styling.
```
**Documentation**: [Getting Started Guide](https://bookklik-technologies.github.io/senangstart-css/guide/getting-started.html)
# Progress Ring
Category: feedback
Description: Circular Progress
## Small Variant
### SenangStart CSS Code
```html
<div layout="relative" space="w:large-3x h:large-3x">
<svg space="w:[100%] h:[100%]" class="transform -rotate-90" viewBox="0 0 36 36">
<path visual="text:gray-200" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="4" />
<path visual="text:blue-600" stroke-dasharray="75, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="4" />
</svg>
<span layout="absolute" visual="font:tw-bold text:blue-600" class="top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-[8px]">75%</span>
</div>
```
### Tailwind CSS Code
```html
<div class="relative w-10 h-10">
<svg class="w-full h-full transform -rotate-90" viewBox="0 0 36 36">
<path class="text-gray-200" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="4" />
<path class="text-blue-600" stroke-dasharray="75, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="4" />
</svg>
<span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-[8px] font-bold text-blue-600">75%</span>
</div>
```
## Medium Variant
### SenangStart CSS Code
```html
<div layout="relative" space="w:big-3x h:big-3x">
<svg space="w:[100%] h:[100%]" class="transform -rotate-90" viewBox="0 0 36 36">
<path visual="text:gray-200" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="3" />
<path visual="text:blue-600" stroke-dasharray="75, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="3" />
</svg>
<span layout="absolute" visual="text-size:mini font:tw-bold text:blue-600" class="top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">75%</span>
</div>
```
### Tailwind CSS Code
```html
<div class="relative w-16 h-16">
<svg class="w-full h-full transform -rotate-90" viewBox="0 0 36 36">
<path class="text-gray-200" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="3" />
<path class="text-blue-600" stroke-dasharray="75, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="3" />
</svg>
<span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xs font-bold text-blue-600">75%</span>
</div>
```
## Large Variant
### SenangStart CSS Code
```html
<div layout="relative" space="w:giant h:giant">
<svg space="w:[100%] h:[100%]" class="transform -rotate-90" viewBox="0 0 36 36">
<path visual="text:gray-200" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="2.5" />
<path visual="text:blue-600" stroke-dasharray="75, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="2.5" />
</svg>
<span layout="absolute" visual="text-size:base font:tw-bold text:blue-600" class="top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">75%</span>
</div>
```
### Tailwind CSS Code
```html
<div class="relative w-24 h-24">
<svg class="w-full h-full transform -rotate-90" viewBox="0 0 36 36">
<path class="text-gray-200" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="2.5" />
<path class="text-blue-600" stroke-dasharray="75, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="2.5" />
</svg>
<span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-base font-bold text-blue-600">75%</span>
</div>
```