Skip to main content

Screen: Progress bar/Title

The manual how the screen with the progress bar operates

L
Written by Leanid Yuryeu
Updated this week

Contents:

  1. Screen identification in the theme template

  2. List of parameters presented in Screen: Progress bar/Title

  3. Screen peculiarities and functions

    1. Setting the Total Timer for the Progress Bar

    2. Customizing the Progress bar design

    3. Managing the Progress bar animation

    4. Customizing Table items during animation

    5. Setting the Title parameter with the Progress bar

    6. Image container first/Chart container first

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.

There are three different designs of the Progress Bar/title screen:

  • Circle

  • Image container first

  • Chart container first
    ​

The default design of the screen with the progress bar consists of the following features:

  1. Progress bar in the circle form indicating 100%

  2. Text placed under the progress bar

  3. No vivid Title parameter in the screen

  4. No more active buttons are reflected or even possible to switch on here

  5. The screen contains animation

  6. No images are embedded into the progress bar animation tool

List of parameters presented in Screen: Progress bar/Title

  • Progress Bar

  • Title

  • Background

  • Basic Configuration

📢 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 that you set to display the progress bar during onboarding on the screen. The indicated number corresponds to the time limit you have set in seconds after which users will be automatically directed to the next stage based on predefined conditions.

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 can enter text with different symbols or leave it blank for a minimalist approach.

Simply click on the "settings" icon near each table's item title to see customization options. You can adjust the text font, size, color, alignment, and padding. To preview the changes, use the "RUN" button.

Setting the Title parameter with the Progress bar

The screen contains an additional parameter that can be added - Title. It is displayed below the progress bar and its table items, but it is not mandatory and can be turned off by default. You can see the difference 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


Image container first/Chart container first

You may also opt for a design featuring an image.

It offers the same features but adds an image either above (Image container first) or below (Chart container first) the progress bar.
​


A table customization option has been enhanced with an image upload feature. Additionally, there are settings for an image title and subtitle.


You can include an unlimited number of images and arrange them sequentially based on the percentages shown on the progress bar.

Did this answer your question?