UI Lab

    Progress

    Explore different variants and configurations of the Progress component.

    Install with:
    npx afnoui add progress/progress-linear
    Linear Progress
    Loading...33%
    Install with:
    npx afnoui add progress/progress-circular
    Circular Progress
    25%

    Small

    50%

    Medium

    75%

    Large

    100%

    Complete

    Install with:
    npx afnoui add progress/progress-colored-circular
    Colored Circular Progress
    0%

    Primary

    0%

    Success

    0%

    Warning

    0%

    Error

    Install with:
    npx afnoui add progress/progress-ring
    Ring/Donut Progress
    0percent
    0percent
    100percent
    Install with:
    npx afnoui add progress/progress-semi-circular
    Semi-circular & Indeterminate
    65%

    Semi-circular

    Indeterminate

    Spinner Icon

    Refresh Spin

    Install with:
    npx afnoui add progress/progress-styled
    Styled Progress Bars
    Install with:
    npx afnoui add progress/progress-step
    Step Progress
    2
    3
    4
    Install with:
    npx afnoui add progress/progress-system-indicators
    System Indicators
    75%
    Install with:
    npx afnoui add progress/progress-contextual-cards
    Contextual Progress Cards

    Downloading...

    project-assets.zip

    0%

    Uploading...

    3 of 5 files

    60%

    Storage Used

    7.5 GB of 10 GB

    75%

    Profile Completion

    4/5 steps