Skip to content

Add circular variant to progress component#2461

Closed
jdc1898 wants to merge 1 commit intolivewire:mainfrom
jdc1898:circular-progress
Closed

Add circular variant to progress component#2461
jdc1898 wants to merge 1 commit intolivewire:mainfrom
jdc1898:circular-progress

Conversation

@jdc1898
Copy link
Copy Markdown

@jdc1898 jdc1898 commented Mar 4, 2026

Summary

Adds a circular variant to the progress component using the existing variants pattern (matching checkbox, radio, and select).

  • Restructures progress.blade.php into progress/index.blade.php + progress/variants/default.blade.php (100% rename, zero changes to existing code)
  • Adds progress/variants/circular.blade.php — SVG-based circular progress indicator
  • Supports all existing color variants, five size presets (xs, sm, base, lg, xl), and an optional label overlay

Usage

{{-- Boolean shorthand --}}
<flux:progress value="75" circular />

{{-- Variant prop --}}
<flux:progress value="75" variant="circular" />

{{-- With color and size --}}
<flux:progress value="60" max="100" circular color="green" size="lg" />

{{-- With percentage label --}}
<flux:progress value="42" circular label />

{{-- With custom label slot --}}
<flux:progress value="3" max="5" circular label>
    3/5
</flux:progress>

Files

File Description
progress/index.blade.php Delegates to variant (same pattern as checkbox/radio/select)
progress/variants/default.blade.php Existing linear progress, moved with zero changes
progress/variants/circular.blade.php New circular SVG variant

Restructures the progress component to use the variants pattern
(matching checkbox, radio, and select). Caleb's existing linear
progress is moved to variants/default.blade.php with zero changes.

Adds a new circular variant with SVG-based circular progress,
supporting all color variants, five size presets (xs, sm, base, lg, xl),
and an optional label overlay.

Usage:
  <flux:progress value="75" circular />
  <flux:progress value="75" variant="circular" />
@ganyicz
Copy link
Copy Markdown
Collaborator

ganyicz commented Mar 23, 2026

Hi @jdc1898

Thanks for contributing. We're going to hold off on this for now. This is a good addition however requires more considerations around design, implementation and APIs. That said, we're open to adding this in the future.

Discussion: #2457

@ganyicz ganyicz closed this Mar 23, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants