15 lines
717 B
PHP
15 lines
717 B
PHP
@props(['percent' => 0, 'size' => 62])
|
|
@php
|
|
// Circumference of r=25 in the 62-unit box. The offset is what is NOT
|
|
// filled, so a full ring is 0 and an empty one is the whole circumference.
|
|
$c = 157;
|
|
$o = (int) round($c * (1 - min(100, max(0, (float) $percent)) / 100));
|
|
@endphp
|
|
<div class="relative grid place-items-center">
|
|
<svg class="metric-ring" viewBox="0 0 62 62" style="--c:{{ $c }};--o:{{ $o }};width:{{ $size }}px;height:{{ $size }}px" aria-hidden="true">
|
|
<circle class="track" cx="31" cy="31" r="25" />
|
|
<circle class="value" cx="31" cy="31" r="25" />
|
|
</svg>
|
|
<b class="absolute font-mono text-[13px] font-medium text-ink">{{ (int) round($percent) }}%</b>
|
|
</div>
|