Advanced Component - Linear Progress Bar
Intro
A Linear Progress Bar Component is a sleek addition to web apps, offering a visual representation of values. It simplifies tracking processes like file uploads, loading content, or other sequential tasks. With customizable features, developers can seamlessly integrate this component, enhancing user experience with a clear and polished interface.
In this video tutorial you will learn how to use the Linear Progress Bar Component to display values of your project.
1. Drop a Component
You can choose any component to display your data. For this go to Components and choose, let's say, Data Group. Open its settings and choose the collection to fethc data from and Save it.
2. Create a Progress Bar
To display data in progress bar format, go to Components and choose the Progress Bar component. Drop it in the middle of the Data Group or where you want it and Save.
3. Configure the Progress Bar
Choose the coloured part of the progress bar and open its Settings. Here you can edit as per your use case and choose the collection to fetch data to display and then Save.
4. Preview the Changes
Reload the Preview page to find your data displayed in the form of linear progress bar.
5. Change Heights of the Progress Bar
To do this select the decoloured or the parent layer of the progress bar, open its Settings and choose the desired height and Save.
6. Preview the Changes
Reload the Preview page to find your data displayed in the changed height of the linear progress bar.
7. Update Data
You can change the data in the collection. For this go to the collection and then to the indidvidual product. Change its data and Update.
8. Preview the Changes
Reload the Preview page to find your new data updated as the linear progress bar.
9. Display Data in Numbers
You can display your data in numbers too. For this choose the Name of the field and the collection to fetch its data from and Save.
10. Preview the Changes
Reload the Preview page to find your new data updated in numbers format beside the progress bar.
Conclusion
One benefit of integrating a Linear Progress Bar Component in a web app is that it provides users with a visually intuitive way to track the completion status of ongoing processes, enhancing overall user experience.