Progress Library: Animation and Control Examples

Last updated: 1 month ago

Category: Examples

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).

Animated Transition

The animateTo method enables smooth animated transitions between progress values. Parameters:

Immediate Jump

The locateTo method jumps directly to a value without animation. Parameters same as animateTo.

Pause and Resume

The plugin supports pausing and resuming progress bar operations.

Display Controller

The progress bar controller enables pause/resume functionality for the progress tracking.

Controller Usage

The controller is disabled by default. It only becomes available when:

• The progress is actively changing, or
• When switching between pause() and continue() methods.

Custom Text Formatting

Customize label HTML via label.template parameter. Default structure uses these special attributes:

• rep=label - Main container
• rep=result - Wraps number and unit
• rep=number - Progress value
• rep=unit - Unit text
• rep=tips - Tip text

//expample
<div rep=label>
    <div rep=result>
        <i rep=number></i>
        <i rep=unit></i>
    </div>
    <div rep=tips></div>
</div>

Customize text via lang parameter:

Custom Progress Range

While the standard progress range uses 0~100, some scenarios may require alternative ranges (e.g., dates, steps, monetary values).

Rotating Progress

For circle type, set rotate:true to animate via rotation.

Using the steps Parameter

The steps parameter configures progress stage controls. It accepts an array where each item contains the following properties:

Strength validation example using text to replace values:

Output Values

The get method retrieves the instance's internal variable values, returning an object with the following properties:

Event Listeners

Commonly used event listeners include:

Destroy and Initialize

When an instance is no longer needed, it can be destroyed using the destroy method. To reuse it, the init method can be called to reinitialize the instance.