Koyaka
Patreon

Progress

Basic Progress

Preview Code 

    <progress class="progress my-3" value="50" max="100"></progress>
    <progress class="progress my-3 secondary" value="50" max="100"></progress>
    <progress class="progress my-3 accent" value="50" max="100"></progress>
    <progress class="progress my-3 info" value="50" max="100"></progress>
    <progress class="progress my-3 success" value="50" max="100"></progress>
    <progress class="progress my-3 warning" value="50" max="100"></progress>
    <progress class="progress my-3 danger" value="50" max="100"></progress>

Progress Sizes

Preview Code
15% 15% 15% 15% 15% 

    <progress class="progress xs fixed top-0 left-0">15%</progress>
    <progress class="progress my-3 sm">15%</progress>
    <progress class="progress my-3">15%</progress>
    <progress class="progress my-3 lg">15%</progress>
    <progress class="progress my-3 xl">15%</progress>

Radial Progress

Preview Code 

    <div class="flex gap-2">
        <div class="radial-progress" style="--value: 57%" value="57%"></div>
        <div
            class="radial-progress secondary"
            style="--value: 60%"
            value="60%"
        ></div>
        <div
            class="radial-progress accent"
            style="--value: 63%"
            value="63%"
        ></div>
        <div
            class="radial-progress info"
            style="--value: 66%"
            value="66%"
        ></div>
        <div
            class="radial-progress success"
            style="--value: 69%"
            value="69%"
        ></div>
        <div
            class="radial-progress warning"
            style="--value: 72%"
            value="72%"
        ></div>
        <div
            class="radial-progress danger"
            style="--value: 75%"
            value="75%"
        ></div>
    </div>

Contents