@php
    $size   = $size ?? 96;
    $stroke = 9;
    $r      = ($size / 2) - ($stroke / 2);
    $circ   = 2 * M_PI * $r;
    $offset = $circ * (1 - min(100, max(0, $percent)) / 100);
@endphp
<div class="progress-ring" style="width:{{ $size }}px;height:{{ $size }}px">
    <svg width="{{ $size }}" height="{{ $size }}" viewBox="0 0 {{ $size }} {{ $size }}" aria-hidden="true">
        <circle cx="{{ $size / 2 }}" cy="{{ $size / 2 }}" r="{{ $r }}"
                fill="none" stroke-width="{{ $stroke }}" class="ring-track" />
        <circle cx="{{ $size / 2 }}" cy="{{ $size / 2 }}" r="{{ $r }}"
                fill="none" stroke-width="{{ $stroke }}" stroke-linecap="round"
                class="ring-value"
                stroke-dasharray="{{ $circ }}" stroke-dashoffset="{{ $offset }}"
                transform="rotate(-90 {{ $size / 2 }} {{ $size / 2 }})" />
    </svg>
    <div class="progress-ring-label">
        <span>{{ $percent }}<small>%</small></span>
    </div>
</div>