Home›Docs›Data›Progress Library

Progress Library

Last updated: 4 months ago

Category: Data

The Progress component displays data loading status, task completion, or process tracking. It supports multiple variants including bar, full circle, semicircle, and large arc designs. The component offers various theme colors (including gradients), adjustable overall and track dimensions, and accepts any numeric progress value (not limited to percentages).

Progress Component: Property and Method Usage Examples4 months ago Progress Component4 months ago Progress Library: Animation and Control Examples4 months ago Progress Library: Visual Style Examples4 months ago Progress Library4 months ago Result Component4 months ago Step Component: How to Use Data and Customize Styles4 months ago Step Component4 months ago

Basic Usage

Apply the oc-progress attribute to a text container to create a progress bar. Typically use the value parameter to indicate progress (default range 0-100).

Output
HTML

```
                
                
            
```

You can also create an instance using id+new approach:

Output
HTML
JS

```
                
                
            
```

                
                new orca.Progress('#demo01',{
                    value:21,
                });

Hide Text

The label parameter defaults to true to show progress text. Set label:false or label.enable:false to hide it.

Output
HTML

```
                
                
            
```

Square Line Caps

The linecap parameter sets the shape of track ends. Default is round (rounded), can be set to square.

Output
HTML

```
                
                
            
```

Progress Types

The default progress bar is linear. Change appearance with type parameter:

type: line - Linear progress bar
type: circle - Full circle progress
type: semicircle - Half circle progress
type: gapcircle - Gauge circle (3/4 circle) progress

Output
HTML

```
                
                
            
```

Theme Colors

All four progress types support multiple colors and gradients. Set color theme with theme parameter (options: prim, succ, error, warn, info, issue, text).

Use gradient:true for gradient effects when needed.

Output
HTML

```
                
                
            
```

Output
HTML

```
                
                
            
```

Basic Appearance Configuration

Property	Type	Default	Description
type	'line'/'circle'/'semicircle'/'gapcircle'	'line'	Progress type
theme	'prim'/'succ'/'error'/'info'/'issue'/'warn'/''	''	Color theme
gradient	boolean	false	Use gradient
linecap	'round'/'square'	'round'	Line cap style
width	'xxs'/'xs'/'sm'/'md'/'lg'/'xl'/'xxl'/''	''	Progress width
size	'xxs'/'xs'/'sm'/'md'/'lg'/'xl'/'xxl'/''	''	Progress thickness
classes	string	''	Additional CSS classes

Value Configuration

Property	Type	Default	Description
range	array	[0, 100]	Value range
value	number	0	Initial value
steps	array	[]	Progress steps

Animation Configuration

Property	Type	Default	Description
curve	'easeOut'/'linear'/'easeIn'/'easeInOut'/'easeOutIn'	'easeOut'	Animation curve
duration	number	0	Animation duration (ms)
rotate	boolean	false	Enable rotation

Display Control

Property	Type	Default	Description
simple	boolean	false	Hide track
control	boolean	false	Show control buttons

Label Configuration

Property	Type	Default	Description
label.enable	boolean	true	Show text
label.template	string	''	Text HTML template
label.placement	string	''	Text position
label.unit	string	'%'	Unit
label.tips	boolean	false	Show tooltip

Number Display Configuration

Property	Type	Default	Description
number.type	'percent'/'value'	'percent'	Display type
number.trunc	boolean	true	Round numbers
number.emphatic	boolean	false	Emphasize display

Wait Function

Property	Type	Default	Description
b4Set	function	null	Pre-set callback

Callback Functions

Property	Type	Default	Description
onStart	function	null	Start callback
onMove	function	null	Progress callback
onEnd	function	null	End callback
onZero	function	null	0% callback
onCompleted	function	null	Completion callback
onSet	function	null	After set callback
onPause	function	null	Pause callback
onContinue	function	null	Continue callback
onRestored	function	null	Restore callback