Progress bar

The progress bar component is a graphical element in a user interface that visually indicates the progress of an operation.

This component is a horizontal track that fills up incrementally as a task, such as a file download or installation process, advances towards completion.

👉 The tag

To insert a progress bar into your interface, use the following tag format:

[component:progress-bar:<min>:<max>:<step>:<value>]

📍 Where to add the tag: A rectangle layer.

Replace <min>, <max>, <step>, and <value> with your desired numerical values:

• <min> is the minimum value the slider can represent.

• <max> is the maximum value the slider can represent.

• <step> is the incremental value between the range.

• <value> is the current value of the slider.

Example usage:

[component:progress-bar:0:100:5:25]

This creates a progress bar that ranges from 0 to 100, moves in increments of 5, and has an current value of 25.

🎨 Customize its style

To enhance the visual appeal of your slider control, apply custom styling. Here are the tags you can use to define the style:

• Background Color: [style:bg-color:#HEXCODE] - This sets the background color of the slider track. Replace #HEXCODE with the 6-digits hex color code of your choice.

• Active Color: [style:active-color:#HEXCODE] - This changes the color of the active portion of the slider (from the minimum value to the current thumb position). Replace #HEXCODE with your preferred 6-digits hex color code.

For example:

[style:bg-color:#42476ee]    // Sets the background color of the slider track to dark blue.
[style:active-color:#d9d9d9]    // Changes the active portion of the slider to a light grey.

Incorporate these style tags in your code to customize the look of your input slider to match your interface design.

🏷️ How to add the tag

In order to successfully integrate an progress bar component into your app, follow these steps:

1. Draw a rectangle on your design canvas to represent the progress bar. We recommend a minimum height of 32px at least.

2. Incorporate the following tag into the rectangle to embed the progress bar functionality:

[component:progress-bar:0:100:5:25]

3. To customize the progress bar's appearance, add these style tags directly after the progress bar component tag:

[style:bg-color:#42476e][style:active-color:#d9d9d9]

Binding with your API

1. Ensure your GET API request is properly set up.

2. From the left side of the screen, under the Elements section, select the progress bar, or directly tap on the progress bar image displayed in the center of the screen.

3. Navigate to the Form Data section on the right, choose your API collection, and then select either the GET request. Finally, specify the variable you wish to connect.

4. You're now set! Try and test your app with Bravo Vision! 🎉

💾 Example design file

Not found

Your feedback is valuable to us. If you have any suggestions or questions, please don't hesitate to reach out to us in the community.