Progress Bar Components

Dev Design Library indexes 136 progress bar components from 53 open-source UI libraries, with the most coming from Tremor Blocks, LocalMode, ReUI, UI Lab and Spectrum UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Progress bar components belong to the Feedback group.

Showing 120 of 136, a mix from every library. Open a library to see all of its components.

• Progressshadcn/ui · ReactDisplays an indicator showing the completion progress of a task, typically displayed as a progress bar.
• Linear ProgressMUI / Material UI · React
• Bar SegmentChakra UI · ReactUsed to display data as segments within a horizontal bar, showing proportions and part-to-whole relationships between…
• MeterHeroUI · ReactA meter represents a quantity within a known range, or a fractional value.
• Scroll ProgressMagic UI · ReactAnimated Scroll Progress for your pages
• MeterReact Spectrum · ReactMeters are visual representations of a quantity or an achievement. Their progress is determined by user actions…
• Metercoss ui · ReactA graphical display of a numeric value within a range.
• ProgressOrigin UI · ReactDisplays the status of a task that takes a long time.
• Loading CarouselCult UI · ReactLoading carousel component with smooth transitions and customizable content
• ProgressArk UI · React
• Progress BarTremor · React
• Basic progress.ReUI · ReactBasic progress.
• Progress IndicatorAmicro Micro Transitions · ReactHorizontal page scroll progress indicator bar.
• ProgressPark UI · ReactA display component for showing task completion and loading states.
• Base Ui ProgressLobe UI · React
• File UploadKokonut UI · ReactA multi-file upload queue with per-file progress, retry and cancel.
• meterIntent UI · Reactmeter
• File UploadUntitled UI React · React
• Scroll ProgressbeUI · ReactReading-progress indicator — fixed bar or circular ring — driven by scroll position via useSmoothScroll, with spring…
• ProgressTailGrids · ReactA progress bar component with multiple variants.
• Step PlayerRare UI · ReactAn iOS-style stepped progress track with a play, pause and replay control. The active step stretches into a bar that…
• Inventory TableSpectrum UI · ReactStock management with SKU tiles, capacity meters that change color at thresholds and status labels.
• ProgressVengeance UI · React
• Reading ProgressUser Interface Wiki · React
• ProgressToolcraft · React
• Web UsagePanel UI · React NativeA usage and credits panel for an AI app: credit used, renewal date and context compaction.
• Battery ChargeKinetics · HTML/CSSFill climbs as the bolt pulses
• Category BarTremor Blocks · ReactSingle horizontal bar split into coloured segments, with threshold labels and an optional marker for the current value.
• Scroll ProgressAnimations (Svelte) · SvelteA fixed progress bar component that indicates page scroll progress with a gradient color effect.
• ProgressObsidianUI · React
• Channel Stripaudiocn · ReactOne channel of a mixer: header, status, meter, fader, value, controls and a notice, as a row or a console strip. The…
• meterBaseLayer · ReactA meter represents a quantity within a known range, or a fractional value.
• ProgressShark UI · ReactDisplays task progress with a linear indicator.
• Labeled Progress IndicatorWatermelon UI · React
• File uploadArc Library · ReactA complete file selection flow with constraints, progress, and error feedback.
• Glass Progressglasscn · ReactGlass Progress with five variants: clear, frosted, subtle, liquid, and liquid-refract
• Download ButtonUI Lab · ReactThe arrow drops into the tray while the button fills with progress.
• ProgressHextaUI · ReactA bar or ring that shows how far a task has come, eases between updates and slides while the total is unknown.
• Multi-Step Pipeline TrackerLocalMode · ReactProgress surfaces for local workflows: a horizontal numbered-step indicator (active/completed/pending), a…
• ProgressCojeev UI · ReactOne measured amount, explained as an inline task, a small report or connected milestones—with independent organic…
• Progress CardROI UI · ReactA file upload progress card with multiple file tracking.
• With progressFLX UI · ReactLive import banner with a spinner and a progress bar.
• Scroll ProgressVelora UI · ReactGradient page-progress bar pinned to the top.
• Confidence BarHalaska UI · React
• Password Input With Strength Indicatorsv-particles · Svelte
• MeterSpaceUI · ReactDisplays a visual gauge bar showing a quantity within a known range, such as battery level, disk capacity, or password…
• Aria ProgressReScript shadcn · ReScript
• Liquid ProgressLiquefy UI · ReactProgress bar in liquid glass style. Barra de progresso em estilo vidro líquido.
• File UploadD2Studio UI · ReactA single upload row mid-flight: a PDF badge, the filename, a thin progress rail and the byte count under it. The bar…
• File UploadEaseUI · ReactDropzone that also opens the native file picker, with a list below it that pops each file in and collapses smoothly on…
• Chapter ScrubberFibo · ReactA rail of marks that swell under the pointer like the Dock, previewing the chapter at the crest.
• Linear Progress BarsReactFrame · ReactA card of linear progress rows, plain ratio bars, file-upload rows with icons/subtitles/shimmer, milestone ticks, and…
• Progress Linearark-cn · ReactA shadcn-style progress linear component built with Ark UI primitives.
• ProgressChakra UI · ReactUsed to display the progress status for a task.
• Progress BarHeroUI · ReactA progress bar shows either determinate or indeterminate progress of an operation over time.
• Progress BarReact Spectrum · ReactProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way…
• Progresscoss ui · ReactDisplays the status of a task that takes a long time.
• Small progress.ReUI · ReactSmall progress.
• Progress StepperAmicro Micro Transitions · ReactHorizontal step line (STEP 1 → STEP 2 → STEP 3) with animated fill bar.
• Dashboard Route ProgressLobe UI · React
• progress-barIntent UI · Reactprogress-bar
• Progress IndicatorsUntitled UI React · React
• File UploadbeUI · React
• Password StrengthSpectrum UI · ReactA password input with an animated four-segment strength meter, crossfading strength label, requirements checklist with…
• Elastic ProgressKinetics · HTML/CSSBar overshoots target width slightly before settling
• Progress BarTremor Blocks · React
• Level Meteraudiocn · ReactA peak and RMS level meter: mono or stereo, horizontal or vertical, solid, segmented or gradient, with zones, peak…
• Labeled Progress Indicator BaseWatermelon UI · React
• Password strengthArc Library · ReactShow how strong a new password is while it is typed.
• Progressglasscn · React
• Onboarding ChecklistUI Lab · ReactA setup checklist that counts up as you go and celebrates the finish.
• Chrome AI Download GateLocalMode · ReactThe gate a user sees when a Chrome Built-in AI capability exists but its on-device model has not been fetched yet…
• MeterROI UI · ReactA graphical display of a numeric value within a range.
• Confidence PatternHalaska UI · React
• Password Input With Strength Inidicatorsv-particles · Svelte
• ProgressSpaceUI · ReactDisplays an animated progress bar indicating how much of a task or file upload has completed so users know how long to…
• Base ProgressReScript shadcn · ReScript
• ProgressD2Studio UI · ReactDisplays an indicator showing the completion progress of a task.
• ProgressEaseUI · ReactProgress bar that fills with scale instead of width, plus an indeterminate state for unknown durations.
• ProgressFibo · ReactShows how far a task has got, or that it's under way.
• MeterReactFrame · ReactA meter for a value within a known range: bar, semicircle gauge or segmented variants with threshold zones, animated…
• Tailwind MeterReact Spectrum · React
• Large progress.ReUI · ReactLarge progress.
• Segmented Step BarAmicro Micro Transitions · ReactBattery-style multi-segment discrete progress bar with stepped fill.
• Progress With ValueSpectrum UI · Reactcomponent for the Progress With Value
• Indeterminate BarKinetics · HTML/CSSLooping sweep for unknown-length work
• Billing Usage 01Tremor Blocks · React
• Microphone Setupaudiocn · ReactChoose and check a microphone: device select with a live preview, a level meter, gain, mute and a level check that…
• ProgressWatermelon UI · React
• ProgressArc Library · ReactShow how much of a known task is complete.
• Password FieldUI Lab · ReactReveals the password with a wave of dots turning into letters; the meter fills as it gets stronger.
• Context Usage MeterLocalMode · ReactA token / context-window budget meter (with composable Context/ContextTrigger/ContextContent/ContextInputUsage/ContextO…
• ProgressROI UI · ReactDisplays the status of a task that takes a long time.
• Context Bar PatternHalaska UI · React
• Progress BarD2Studio UI · ReactA frosted-glass progress pill with technical-drawing leader lines bracketing a monospace readout. Three levels of…
• Password InputReactFrame · ReactA password field with an animated show/hide eye toggle, a four-segment strength meter, a live requirements checklist…
• Tailwind Progress BarReact Spectrum · React
• Progress bar with status messages.ReUI · ReactProgress bar with status messages.
• Segmented Stepper DotsAmicro Micro Transitions · ReactPill-morphing connected page dots with spring expansion indicator.
• Limit ReachedSpectrum UI · ReactA quota wall with a full meter, seven days of history and a reset clock.
• Password MeterKinetics · HTML/CSSSegments fill and shift color as strength climbs
• Billing Usage 02Tremor Blocks · React
• Quick Audio Popoveraudiocn · ReactCompact microphone and system audio controls behind one toolbar button that shows a live level.
• Usage meterArc Library · ReactShow what fills an allowance and how close it is to the limit.
• Progress StepperUI Lab · ReactFills the line toward the next step and unfills it in reverse.
• Model DownloaderLocalMode · ReactThe headline local-first card a user sees while a model loads on-device: model name, size, context length, category, a…
• ProgressHalaska UI · React
• Usage SplitD2Studio UI · ReactToken usage split three ways across one shared track. The segments sit in a single rail rather than three of their…
• Vanilla MeterReact Spectrum · React
• File upload list with progress & status.ReUI · ReactFile upload list with progress & status.
• Gear Tooth StepAmicro Micro Transitions · React
• Status TrackerSpectrum UI · ReactA staged progress tracker for long-running AI jobs.
• Step ProgressKinetics · HTML/CSSConnector fills and the next node pops active
• Billing Usage 03Tremor Blocks · React
• System Audio Mixeraudiocn · ReactThe complete mixer: microphone, system audio, music and sound pads with meters, faders, mute, solo, monitor and…
• Storage MeterUI Lab · ReactPoint at any slice to read its size, then clear the cache and watch the total count down.
• Model Loading PanelLocalMode · ReactA full-height "waiting for model" splash — the richer blocking sibling of ModelDownloader — combining model metadata…
• Vanilla Progress BarReact Spectrum · React
• Progress bar with slider.ReUI · ReactProgress bar with slider.
• Drop FilesSpectrum UI · ReactA drop zone with real drag handling and per-file upload meters.

Libraries with progress bar components

• Tremor Blocks
• LocalMode
• ReUI
• UI Lab
• Spectrum UI

Related categories

• React Progress Bar Components
• Tailwind CSS Progress Bar Components
• Animated Progress Bar Components
• shadcn/ui Progress Bar Components
• Feedback Components
• Badge Components
• Spinner Components
• Progress Components
• Alert Components
• Chip Components
• Empty State Components
• Notification Components
• Status Indicator Components
• Skeleton Components
• Banner Components
• Typing Indicator Components
• Progress Circle Components
• Error State Components
• Success Animation Components
• Scroll Progress Components