Progress Bar

A versatile progress bar component for displaying progress indicators, loading states, and completion status with customizable styling options.

Import

import {FktProgressBarComponent} from "frakton-ng/progress-bar";

Default

Basic progress bar with default settings.

With label

Progress bar with label text displayed above.

Value only

Progress bar with value shown inside the fill area.

Sizes

Progress bar with different sizes.

@for (variant of variants; track variant.label) {
	{{ variant.label }}
	
}

Semantic colors

Progress bar with semantic colors.

@for (variant of variants; track variant.label) {
	{{ variant.label }}
	
}

Variants

Progress bar with different variants.

@for (variant of variants; track variant.label) {
	{{ variant.label }}
	
}

Shapes

Progress bar with different shapes.

@for (variant of variants; track variant.label) {
	{{ variant.label }}
	
}

Indeterminate

Progress bar in indeterminate state.

@for (variant of variants; track variant.label) {
	{{ variant.label }}
	
}

Custom color

Progress bar with custom hex color.

@for (variant of variants; track variant.label) {
	{{ variant.label }}
	
}

Complete progress

Progress bar showing completed state.

Example list

Grouped progress bars showing sizes, semantic colors, and animated variants.


    
        
            Quick preview
            Basic usage
            Semantic colors, sizes, and variants in a simple list.
        
        Realtime
    

    
        @for (item of items; track item.label) {
            
                
                    {{ item.label }}
                    {{ item.meta }}
                

                
            
        }

Example with labels

Demonstrates label rows, inline values, and custom value formatting.


    
        
            Labels and value formatting
            Combine labels, inline values, and custom formatting for non-percentage units.
        
        Guided
    

    
        @for (item of items; track item.label) {
            
                
                {{ item.helper }}
            
        }

Example dashboard metrics

Dashboard-style KPIs with semantic colors, custom hex values, and striped states.


    
        
            Operations overview
            Dashboard metrics
            Highlight KPIs with semantic colors, stripes for in-flight work, and custom hex colors.
        
        Live
    

    
        @for (metric of metrics; track metric.title) {
            
                
                    
                        {{ metric.context }}
                        {{ metric.title }}
                    
                    {{ metric.valueLabel }}
                
                {{ metric.description }}

                
            
        }