@php
    switch (true) {
        case $percentage < 25:
            $color = '#F2415A';
            break;
        case $percentage < 50:
            $color = '#F2994A';
            break;
        case $percentage < 75:
            $color = '#20c997';
            break;
        default:
            $color = '#20c997';
            break;
    }
@endphp

<div>
    <div class="d-flex justify-content-center align-items-center">
        <div class="progress-circle-sm">
            <svg class="progress-ring">
                <circle class="progress-ring__circle-sm" stroke="#20c997" stroke-width="6" fill="transparent" r="20" cx="60" cy="60" style="stroke: {{ $color }}; stroke-dashoffset:{{ 126 - (126 * $percentage / 100) }};"></circle>
            </svg>
            <div class="progress-info-sm">{{ $percentage }}%</div>
        </div>
    </div>
</div>