LumexUI · kevinvenclovas · Feb 22, 2026 · Feb 22, 2026 · Feb 23, 2026 · Feb 28, 2026
@@ -43,6 +43,7 @@ public class NavigationStore
 			.Add( new( nameof( LumexNavbar ) ) )
 			.Add( new( nameof( LumexNumbox<T> ) ) )
 			.Add( new( nameof( LumexPopover ) ) )
+			.Add( new( nameof( LumexProgress ), PageStatus.New ) )
 			.Add( new( nameof( LumexRadioGroup<T> ) ) )
 			.Add( new( nameof( LumexSelect<T> ) ) )
 			.Add( new( nameof( LumexSkeleton ) ) )
@@ -100,6 +101,7 @@ public class NavigationStore
 			.Add( new( nameof( LumexPopover ) ) )
 			.Add( new( nameof( LumexPopoverContent ) ) )
 			.Add( new( nameof( LumexPopoverTrigger ) ) )
+			.Add( new( nameof( LumexProgress ) ) )
 			.Add( new( nameof( LumexRadio<T> ) ) )
 			.Add( new( nameof( LumexRadioGroup<T> ) ) )
 			.Add( new( nameof( LumexSelect<T> ) ) )

@@ -0,0 +1,9 @@
+<div class="w-full flex flex-col gap-4">
+    <LumexProgress Value="70" Color="@ThemeColor.Default" aria-label="Loading..." />
+    <LumexProgress Value="70" Color="@ThemeColor.Primary" aria-label="Loading..." />
+    <LumexProgress Value="70" Color="@ThemeColor.Secondary" aria-label="Loading..." />
+    <LumexProgress Value="70" Color="@ThemeColor.Success" aria-label="Loading..." />
+    <LumexProgress Value="70" Color="@ThemeColor.Warning" aria-label="Loading..." />
+    <LumexProgress Value="70" Color="@ThemeColor.Danger" aria-label="Loading..." />
+    <LumexProgress Value="70" Color="@ThemeColor.Info" aria-label="Loading..." />
+</div>
@@ -0,0 +1,13 @@
+<div class="w-full flex flex-col gap-8">
+    <div>
+        <LumexProgress Value="60" 
+                       Label="Rainbow Energy"
+                       ShowValueLabel
+                       Size="@Size.Large"
+                       Classes="@(new ProgressSlots { 
+                           Track = "bg-gradient-to-r from-red-100 via-green-100 to-blue-100", 
+                           Indicator = "bg-gradient-to-r from-violet-500 to-fuchsia-500"
+                       })">
+        </LumexProgress>
+    </div>
+</div>
@@ -0,0 +1,3 @@
+<div class="w-full flex flex-col gap-4">
+    <LumexProgress Indeterminate="true" Color="@ThemeColor.Primary" Size="@Size.Small" />
+</div>
@@ -0,0 +1,3 @@
+<div class="w-full flex flex-col gap-4">
+    <LumexProgress Value="55" Label="Loading..." />
+</div>
@@ -0,0 +1,5 @@
+<div class="w-full flex flex-col gap-4">
+    <LumexProgress Value="30" Size="@Size.Small" aria-label="Loading..." />
+    <LumexProgress Value="40" Size="@Size.Medium" aria-label="Loading..." />
+    <LumexProgress Value="50" Size="@Size.Large" aria-label="Loading..." />
+</div>
@@ -0,0 +1,9 @@
+<div class="w-full flex flex-col gap-4">
+    <LumexProgress Striped Value="70" Color="@ThemeColor.Default" aria-label="Loading..." Size="@Size.Medium" />
+    <LumexProgress Striped Value="70" Color="@ThemeColor.Primary" aria-label="Loading..." Size="@Size.Medium" />
+    <LumexProgress Striped Value="70" Color="@ThemeColor.Secondary" aria-label="Loading..." Size="@Size.Medium" />
+    <LumexProgress Striped Value="70" Color="@ThemeColor.Success" aria-label="Loading..." Size="@Size.Medium"/>
+    <LumexProgress Striped Value="70" Color="@ThemeColor.Warning" aria-label="Loading..." Size="@Size.Medium" />
+    <LumexProgress Striped Value="70" Color="@ThemeColor.Danger" aria-label="Loading..." Size="@Size.Medium" />
+    <LumexProgress Striped Value="70" Color="@ThemeColor.Info" aria-label="Loading..." Size="@Size.Medium" />
+</div>
@@ -0,0 +1,3 @@
+<div class="w-full flex flex-col gap-4">
+    <LumexProgress Value="60" aria-label="Loading..." />
+</div>
@@ -0,0 +1,37 @@
+@implements IAsyncDisposable
+@inject IJSRuntime JS
+
+<div class="w-full flex flex-col gap-4">
+    <LumexProgress Value="@value" 
+                     Label="Downloading..." 
+                     ShowValueLabel="true"
+                     Color="@ThemeColor.Success"
+                     Size="@Size.Medium" />
+
+    <LumexProgress Value="@value"
+                      ShowValueLabel="true"
+                      Color="@ThemeColor.Success"
+                      Size="@Size.Medium" />
+</div>
+
+@code {
+    private double value = 0;
+    private Timer? timer;
+
+    protected override void OnInitialized()
+    {
+        timer = new Timer(_ => 
+        {
+            value = value >= 100 ? 0 : value + 10;
+            InvokeAsync(StateHasChanged);
+        }, null, TimeSpan.Zero, TimeSpan.FromMilliseconds(500));
+    }
+
+    async ValueTask IAsyncDisposable.DisposeAsync()
+    {
+        if (timer is not null)
+        {
+            await timer.DisposeAsync();
+        }
+    }
+}
@@ -0,0 +1,5 @@
+@rendermode InteractiveWebAssembly
+
+<PreviewCode Code="@new(name: null, snippet: "Progress.Code.Colors")">
+    <LumexUI.Docs.Client.Pages.Components.Progress.Examples.Colors />
+</PreviewCode>
@@ -0,0 +1,5 @@
+@rendermode InteractiveWebAssembly
+
+<PreviewCode Code="@new(name: null, snippet: "Progress.Code.CustomStyles")">
+    <LumexUI.Docs.Client.Pages.Components.Progress.Examples.CustomStyles />
+</PreviewCode>
@@ -0,0 +1,5 @@
+@rendermode InteractiveWebAssembly
+
+<PreviewCode Code="@new(name: null, snippet: "Progress.Code.Indeterminate")">
+    <LumexUI.Docs.Client.Pages.Components.Progress.Examples.Indeterminate />
+</PreviewCode>
@@ -0,0 +1,5 @@
+@rendermode InteractiveWebAssembly
+
+<PreviewCode Code="@new(name: null, snippet: "Progress.Code.Label" )">
+    <LumexUI.Docs.Client.Pages.Components.Progress.Examples.Label />
+</PreviewCode>
@@ -0,0 +1,5 @@
+@rendermode InteractiveWebAssembly
+
+<PreviewCode Code="@new(name: null, snippet: "Progress.Code.Sizes")">
+    <LumexUI.Docs.Client.Pages.Components.Progress.Examples.Sizes />
+</PreviewCode>
@@ -0,0 +1,5 @@
+@rendermode InteractiveWebAssembly
+
+<PreviewCode Code="@new(name: null, snippet: "Progress.Code.Striped")">
+    <LumexUI.Docs.Client.Pages.Components.Progress.Examples.Striped />
+</PreviewCode>
@@ -0,0 +1,5 @@
+@rendermode InteractiveWebAssembly
+
+<PreviewCode Code="@new( name: null, snippet: "Progress.Code.Usage" )">
+    <LumexUI.Docs.Client.Pages.Components.Progress.Examples.Usage />
+</PreviewCode>
@@ -0,0 +1,5 @@
+@rendermode InteractiveWebAssembly
+
+<PreviewCode Code="@new(name: null, snippet: "Progress.Code.Value")">
+    <LumexUI.Docs.Client.Pages.Components.Progress.Examples.Value />
+</PreviewCode>
@@ -0,0 +1,102 @@
+@page "/docs/components/progress"
+@layout DocsContentLayout
+
+@using LumexUI.Docs.Client.Pages.Components.Progress.PreviewCodes
+
+<DocsSection Title="Usage">
+    <Usage />
+
+    <LumexAlert Radius="@Radius.Large" Class="my-6">
+        <DescriptionContent>
+            Note: Make sure to pass the <code>AriaLabel</code> prop when the <code>Label</code> prop is not provided. This is required for accessibility.
+        </DescriptionContent>
+    </LumexAlert>
+
+    <DocsSection Title="Sizes">
+        <p>Use the <code>Size</code> parameter to control the height of the progress bar.</p>
+        <Sizes />
+    </DocsSection>
+
+    <DocsSection Title="Colors">
+        <p>Use the <code>Color</code> parameter to set the color of the progress bar.</p>
+        <Colors />
+    </DocsSection>
+
+    <DocsSection Title="Indeterminate">
+        <p>
+            You can use the <code>Indeterminate</code> prop to display an indeterminate progress bar. This is useful when you don't know how long an operation will take.
+        </p>
+        <Indeterminate />
+    </DocsSection>
+
+    <DocsSection Title="Striped">
+        <Striped />
+    </DocsSection>
+
+    <DocsSection Title="With Label">
+        <p>
+            Use the <code>Label</code> parameter to display a custom label above the progress bar.
+        </p>
+        <Label />
+    </DocsSection>
+
+    <LumexAlert Radius="@Radius.Large" Class="my-6">
+        <DescriptionContent>
+            Note: If you pass the <code>Label</code> prop you don't need to pass <code>AriaLabel</code> prop anymore.
+        </DescriptionContent>
+    </LumexAlert>
+
+    <DocsSection Title="With Value">
+        <p>
+            Use the <code>ShowValueLabel</code> parameter to display the progress value/percentage.
+        </p>
+        <Value />
+    </DocsSection>
+
+</DocsSection>
+
+<DocsSection Title="Custom Styles">
+    <div>
+        <h4 class="font-semibold">ProgressBar</h4>
+        <ul>
+            <li><code>Class</code>: The CSS class names to style the progress bar track.</li>
+            <li><code>Classes</code>: The CSS class names to style the progress bar slots.</li>
+        </ul>
+    </div>
+    <CustomStyles />
+</DocsSection>
+
+<DocsApiSection Components="@_apiComponents" />
+
+@code {
+    [CascadingParameter] private DocsContentLayout Layout { get; set; } = default!;
+
+    private readonly Heading[] _headings = new Heading[]
+    {
+        new("Usage", [
+            new("Sizes"),
+            new("Colors"),
+            new("Indeterminate"),
+            new("With Label"),
+            new("With Value"),
+        ]),
+        new("Custom Styles"),
+        new("API")
+    };
+
+    private readonly string[] _apiComponents = new string[]
+    {
+        nameof(LumexProgress)
+    };
+
+    protected override void OnInitialized()
+    {
+        Layout.Initialize(
+            title: "Progress",
+            category: "Components",
+            description: "Progress displays the progress of a task or operation, and can also be used as animated loading indicators.",
+            headings: _headings,
+            linksProps: new ComponentLinksProps("Progress", isServer: false)
+        );
+    }
+}
@@ -0,0 +1,46 @@
+@namespace LumexUI
+@inherits LumexComponentBase
+
+@using S = ProgressSlots
+
+<div class="@GetStyles( nameof( S.Base ) )"
+     data-slot="base"
+     data-indeterminate="@Indeterminate"
+     data-disabled="@Disabled"
+     role="progressbar"
+     aria-valuenow="@GetAriaValueNow()"
+     aria-valuemin="@GetAriaValueMin()"
+     aria-valuemax="@GetAriaValueMax()"
+     aria-valuetext="@GetAriaValueText()"
+     @attributes="@AdditionalAttributes">
+
+    @if( !string.IsNullOrEmpty( Label ) || ShowValueLabel )
+    {
+        <div class="@GetStyles( nameof( S.LabelWrapper ) )"
+             data-slot="labelWrapper">
+            @if( !string.IsNullOrEmpty( Label ) )
+            {
+                <span class="@GetStyles( nameof( S.Label ) )"
+                      data-slot="label">
+                    @Label
+                </span>
+            }
+
+            @if( ShowValueLabel && !Indeterminate )
+            {
+                <span class="@GetStyles( nameof( S.Value ) )"
+                      data-slot="value">
+                    @ValueText
+                </span>
+            }
+        </div>
+    }
+
+    <div class="@GetStyles( nameof( S.Track ) )"
+         data-slot="track">
+        <div class="@GetStyles( nameof( S.Indicator ) )"
+             data-slot="indicator"
+             style="@GetIndicatorStyle()">
+        </div>
+    </div>
+</div>