Progress bar

The Progress bar component visually indicates progress or completion as a percentage.

Preview

Fields

  • slider (required) - A slider field:

    • Range: 0 to 100.

    • Default: 50.

Behavior

  • Displays a progress bar filled based on the selected percentage value.

  • The numeric percentage is shown below the bar for clarity.

Creating the component

To create this component in your project, run:

npm run mgnl -- create-component ProgressBar -p progressBar
This command adds a local copy of the component to your project. You can fully customize it afterward.

Available in

Feedback

DX Core

×

Location

This widget lets you know where you are on the docs site.

You are currently perusing through the Magnolia CLI docs.

Main doc sections

DX Core Headless PaaS Legacy Cloud Incubator modules