Logo
Neura
Back to Home

Progress

Progress bar component for showing completion status with multiple variants and styles

Basic Usage

A simple progress bar with default styling: 
<neura::progress :value="65" />

With Value Display

Show the progress percentage with different positions:
Download
45%
Upload 72%
30% 
<neura::progress :value="45" :showValue="true" valuePosition="right" label="Download" />
<neura::progress :value="72" :showValue="true" valuePosition="top" label="Upload" />
<neura::progress :value="30" :showValue="true" valuePosition="bottom" />

Sizes

Progress bars come in multiple sizes:
xs
sm
md
lg
xl
2xl 
<neura::progress :value="60" size="xs" />
<neura::progress :value="60" size="sm" />
<neura::progress :value="60" size="md" />
<neura::progress :value="60" size="lg" />
<neura::progress :value="60" size="xl" />
<neura::progress :value="60" size="2xl" />

Colors

Apply different colors to progress bars:
Primary
70%
Secondary
55%
Success
90%
Danger
30%
Warning
60%
Info
80% 
<neura::progress :value="70" color="primary" />
<neura::progress :value="55" color="secondary" />
<neura::progress :value="90" color="success" />
<neura::progress :value="30" color="danger" />
<neura::progress :value="60" color="warning" />
<neura::progress :value="80" color="info" />

Gradients

Beautiful gradient colors for progress bars:
Default Gradient
75%
Success Gradient
85%
Danger Gradient
45%
Warning Gradient
60%
Info Gradient
90% 
<neura::progress :value="75" color="gradient" />
<neura::progress :value="85" color="gradient-success" />
<neura::progress :value="45" color="gradient-danger" />
<neura::progress :value="60" color="gradient-warning" />
<neura::progress :value="90" color="gradient-info" />

Variants

Different track style variants:
Default
Soft
Bordered 
<neura::progress :value="65" variant="default" />
<neura::progress :value="65" variant="soft" />
<neura::progress :value="65" variant="bordered" />

Striped & Animated

Add stripes and animations to progress bars:
Striped
Striped with Colors
Animated 
<neura::progress :value="70" :striped="true" />
<neura::progress :value="60" :striped="true" color="success" />
<neura::progress :value="80" :animated="true" />

Indeterminate

Use indeterminate mode when progress is unknown: 
<neura::progress :indeterminate="true" />
<neura::progress :indeterminate="true" color="success" />
<neura::progress :indeterminate="true" color="gradient" />

Border Radius

Control the corner rounding:
None
Small
Medium
Large
Full 
<neura::progress :value="60" rounded="none" />
<neura::progress :value="60" rounded="sm" />
<neura::progress :value="60" rounded="md" />
<neura::progress :value="60" rounded="lg" />
<neura::progress :value="60" rounded="full" />

Use Cases

Common use cases for progress bars:

File Upload

document.pdf 2.4 MB
78%

Storage Usage

15 GB of 20 GB used
85%

Multi-step Form

Step 2 of 4

Skills

JavaScript
90%
PHP
85%
Python
75%

Properties

Property Type Default Description
value number 0 Current progress value
max number 100 Maximum value for calculating percentage
size string md Height size (xs, sm, md, lg, xl, 2xl)
variant string default Track style (default, soft, bordered)
color string primary Bar color (primary, secondary, success, danger, warning, info, gradient, gradient-*)
showValue boolean false Show percentage value
valuePosition string right Value position (top, bottom, right)
label string|null null Label text above the progress bar
rounded string full Border radius (none, sm, md, lg, full)
animated boolean false Enable smooth transition animation
striped boolean false Add striped pattern to bar
indeterminate boolean false Show indeterminate loading animation