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.

Upload Progress75%

Value only

Progress bar with value shown inside the fill area.

45%

Sizes

Progress bar with different sizes.

Extra Small

Small

Medium

Large

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

Semantic colors

Progress bar with semantic colors.

Primary

Accent

Success

Warning

Danger

Info

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

Variants

Progress bar with different variants.

Default

Striped

Animated

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

Shapes

Progress bar with different shapes.

Rounded

Square

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

Indeterminate

Progress bar in indeterminate state.

Primary

Success

Warning

Info

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

Custom color

Progress bar with custom hex color.

Purple

32%

Lime

44%

Black

23%

White

93%

Magenta

31%

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

Complete progress

Progress bar showing completed state.

Download Complete100%

Example list

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

Profile completionAccount setup

68%

Team onboarding4/5 members active

80%

Release deploymentIn progress

45%

Error budgetStability window

22%


    
        
            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.

Onboarding checklist3 of 5 steps

Walk users through the five setup steps.

Data migration62%

Custom hex color with square edges and animated stripes.

Document review12/20 files

Show absolute units instead of percentage.


    
        
            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.

Progress toward the $1M Q4 target.

72%

Monthly response goal with a custom brand color.

340/500 responses

Rolling 7d compliance with animated stripes while incidents are open.

86%


    
        
            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 }}

                
            
        }