@props(['value' => 0, 'size' => 72, 'stroke' => 6, 'label' => null])
@php
    $v = max(0, min(100, (float) $value));
    $r = ($size - $stroke) / 2;
    $c = 2 * M_PI * $r;
    $offset = $c - ($v / 100) * $c;
    $gid = 'ring-'.uniqid();
@endphp
<div {{ $attributes->merge(['class' => 'relative inline-grid place-items-center']) }} style="width: {{ $size }}px; height: {{ $size }}px">
    <svg width="{{ $size }}" height="{{ $size }}" class="-rotate-90" aria-hidden="true">
        <circle cx="{{ $size / 2 }}" cy="{{ $size / 2 }}" r="{{ $r }}" fill="none" stroke="rgba(255,255,255,.08)" stroke-width="{{ $stroke }}" />
        <circle cx="{{ $size / 2 }}" cy="{{ $size / 2 }}" r="{{ $r }}" fill="none" stroke="url(#{{ $gid }})" stroke-width="{{ $stroke }}"
                stroke-linecap="round" stroke-dasharray="{{ $c }}" stroke-dashoffset="{{ $offset }}" style="transition: stroke-dashoffset .7s cubic-bezier(.2,.7,.2,1)" />
        <defs>
            <linearGradient id="{{ $gid }}" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0" stop-color="#8b5cf6" />
                <stop offset="1" stop-color="#22d3ee" />
            </linearGradient>
        </defs>
    </svg>
    <span class="absolute font-display text-sm font-extrabold tabular">{{ $label ?? (int) $v.'%' }}</span>
</div>