Variants

Different configurations and states available for progress components to accommodate various completion tracking requirements, step visualization needs, and user feedback patterns. These variants provide flexibility in appearance, behavior, and functionality while maintaining design consistency across different progress indication contexts and task completion scenarios.

Progress Bar

Linear progress indication elements that display completion percentage or task advancement through visual fill representation. These components serve as simple progress visualization tools, adapting their appearance based on step configuration and completion status to provide clear progress feedback for determinate tasks and process tracking.

Segmentation Variants

Progress segmentation configurations that determine the visual division and completion tracking approach within progress bar interfaces. These variants control the step organization to match different task complexity and completion measurement requirements.

10 Segments

Standard ten-segment progress division providing detailed completion tracking for complex tasks. Use for percentage-based progress indication, detailed task tracking, five-step processes with intermediate milestones, or when providing granular progress feedback for extended workflows.

12 Segments

Enhanced twelve-segment progress division providing flexible completion tracking for varied task structures. Use for three-step, four-step, or six-step processes with clear segment boundaries, quarterly progress tracking, or when providing divisible progress indication for structured workflows.

State Variants

Progress completion states that affect the visual appearance and completion feedback of progress bar elements. These variants communicate the current progress status and completion level to provide clear advancement indication.

Current State

Dynamic progress state indicating ongoing task completion with current advancement display. Use for active processes, real-time progress tracking, or when providing immediate feedback for tasks in progress.

Progress Step

Individual step elements that display specific milestones within multi-step progress sequences. These components serve as discrete progress markers for complex workflows, adapting their appearance based on completion status and visual style to provide clear step-by-step guidance and maintain consistent user experience across all progress tracking scenarios.

Type Variants

Visual presentation modes that affect the step's appearance and interaction style within progress sequences. These variants determine the visual treatment and emphasis approach for different design contexts and step importance requirements.

Thumb

Circular step styling with compact visual treatment and minimal space requirements. Use for streamlined progress indication, mobile interfaces, or when providing subtle step markers without visual complexity.

Chip

Chip-based step styling with enhanced visual presence and label accommodation. Use for detailed progress tracking, desktop interfaces, or when providing comprehensive step information with clear visual hierarchy.

State Variants

Step completion states that affect the visual appearance and interaction capabilities of progress step elements. These variants communicate the step's completion status and availability within the overall progress sequence.

Next

Upcoming step state indicating the next milestone to be completed within the progress sequence. Use for guiding user attention to the next action, providing clear workflow direction, or when highlighting the immediate next step in task completion.

Current

Current step state indicating the presently active milestone within the progress sequence. Use for showing current position, highlighting active tasks, or when providing clear indication of the user's current location in the workflow.

Past

Completed step state indicating previously accomplished milestones within the progress sequence. Use for showing completed tasks, providing completion feedback, or when maintaining visual record of accomplished progress steps.

Progress Flow

Complete progress indication systems that combine multiple step elements to display comprehensive task completion status. These components serve as complete progress tracking interfaces, adapting their layout and visual treatment based on step configuration and size requirements to provide clear overall progress visualization and maintain consistent user experience across all progress tracking scenarios.

Type Variants

Visual presentation modes that affect the progress status appearance and step styling within complete progress tracking interfaces. These variants determine the visual treatment and step emphasis approach for different design contexts and progress complexity requirements.

Thumb

Circular step styling with compact visual treatment and efficient space utilization. Use for streamlined progress interfaces, mobile layouts, or when providing complete progress tracking without visual complexity.

Chip

Chip-based step styling with enhanced visual presence and detailed step information. Use for comprehensive progress tracking, desktop interfaces, or when providing detailed progress visualization with clear step hierarchy.

Size Variants

Dimensional configurations that determine the overall scale and proportional relationships of progress status elements. These variants control the component sizing to match different screen contexts and interface density requirements.

Large

Expanded progress status sizing optimized for desktop and tablet interfaces with enhanced visual presence. Use for desktop applications, tablet interfaces, detailed progress tracking, or when providing comprehensive progress visualization with clear step visibility.

Small

Compact progress status sizing optimized for mobile interfaces with efficient space utilization. Use for mobile applications, constrained layouts, simplified progress tracking, or when providing progress indication within space-limited contexts.

State Variants

Step completion states that affect the visual appearance and interaction capabilities of progress status elements. These variants communicate the overall progress completion status and current step position within the complete progress tracking interface.

Current Step

Current step state indicating the presently active milestone within the complete progress status interface. Use for showing current position, highlighting active tasks, or when providing clear indication of the user's current location in the overall progress workflow.

Loading Indicator

Dynamic progress indication elements that display indeterminate loading states with label positioning options. These components serve as loading feedback interfaces for ongoing processes, adapting their label placement based on layout requirements and information hierarchy to provide clear loading communication and maintain consistent user experience across all loading scenarios.

Label Variants

Label positioning configurations that determine the text placement and information hierarchy within progress loader interfaces. These variants control the label organization to match different layout requirements and loading feedback patterns.

External

Elevated label positioning with text placed above the progress loader element. Use for prominent loading feedback, detailed status messages, clear information hierarchy, or when providing comprehensive loading context with enhanced visibility.

Internal

Integrated label positioning with text placed within the progress loader element. Use for compact loading feedback, space-efficient layouts, minimal information display, or when providing loading indication within constrained interface contexts.