Screen identification in the theme template
The Screen: Progress Bar/Title is presented in the form of the circle progress bar placed in the center of the screen.
The default design of the screen with the progress bar consists of the following features:
Progress bar in the circle form indicating 100%
Text placed under the progress bar
No vivid Title parameter in the screen
No more active buttons are reflected or even possible to switch on here
The screen contains animation
No images are embedded into the progress bar animation tool
List of parameters presented in Screen: Progress bar/Title
Background
Basic Configuration
Title
Progress Bar
📢 Please note that all parameters can be customized and switched off or on depending on your app design.
Here, you may see where these parameters are displayed in the screen precisely.
Screen peculiarities and functions
Setting the Total Timer for the Progress Bar
The basic setting for the Progress Bar is presented as a timer you set for your progress bar to be displayed during onboarding in the screen. The number indicated corresponds to a time limit you set in seconds, after which users are automatically directed to the next step based on predefined connections.
Customizing the Progress bar design
The progress bar can be customized in accordance with the app requirements taking into account the color design, text settings as well as the progress bar alignment:
Design Adjustments Available:
Adjust the thickness and color of the progress bar line.
Configure the font settings for the percentage number, including type, weight, size, and color.
Manage the padding around the progress bar to fit your design layout.
Managing the Progress bar animation
The screen with the Progress bar tool contains animation. That means you can set up a number of statements with the help of table items so that they can change in time while your progress bar counter performs.
Thus, you should set the percentage of the total time each title is displayed. For example, a title with a 50% setting will be displayed for 2.5 seconds in a 5-second total duration.
The main peculiarities are as follows:
You may set the unlimited number of table items to be reflected in your progress bar animation.
The progress bar duration time should be divided relevantly among the number of table items added to the animation.
Each table item requires a separate setting of the duration time: when this text line is going to appear in the screen within which percentage frame.
You may click the RUN button to see a preview of the installed animation.
Table items can be deleted if no text is predetermined per your app design
No images are possible to be embedded into the progress bar animation.
Customizing Table items during animation
Each title that switches during the progress bar animation can be customized. You may enter text with different symbols, or leave it empty for a minimalistic approach.
Simply click on the settings icon near each table item title to view customization options. Here, you may adjust text font, weight, height, color, and alignment, as well as modify the text alignment using padding options. To see how the changes have been reflected, you can preview with the RUN button.
Setting the Title parameter with the Progress bar
The screen contains the additional parameter to be added - the Title. It will be displayed below the progress bar tool and its table items. However, this parameter is not obligatory and can be easily switched off which has already been done by default configuration. You may see the difference reflected in the screen:
Title present with the Progress Bar | No Title with the Progress Bar |
 |  |
The main settings for the Title parameter include:
Text size: font family, font size, line height, font weight
Color: text color and background color
Text alignment with the padding adjustments
