Call Topbar_Show to show and Topbar_Hide to hide the progress bar. Before Topbar_Hide is called, the progress bar will move slower and slower but never actually reach 100%. If you navigate from the page, the topbar will hide automatically.

You can also use the AutoTopbar block to have this behavior done automagically! Just provide a query selector like a class or an html tag to attach a listener to those elements that will do the magic for you.

E.g: ".trigger-topbar" will attach the event to all clickable elements with the class "trigger-topbar" and "a" will attach the event to all links.

Be sure to add the AutoTopbar_Hide block to your layout or screen if you want the topbar to disappear after a successful navigation.

Optionally, you can configure your topbar. Use the Topbar_SetConfigs action for that. You can configure:

• AutoRun (default: true): if false, call topbar.progress() manually to run.
• BarThickness (default: 3): the progress bar thickness.
• BarColors: list of gradient color stops used to draw the progress bar (use only 1 element if you want a solid color).
• ShadowBlur (default: 10): the shadow blur.
• ShadowColor: the shadow color.
• ClassName: the CSS class name for the progress bar.

I advise you to only configure the "BarColors" property for better results, but hack away!

For mobile apps:

If you're having trouble displaying the topbar in native mobile apps, it's because the status bar is on top of it. Try adding the following CSS:

.statusbar-overlay canvas.topbar {

    top: var(--status-bar-height) !important;

}

Call Topbar_Show to show and Topbar_Hide to hide the progress bar. Before Topbar_Hide is called, the progress bar will move slower and slower but never actually reach 100%. If you navigate from the page, the topbar will hide automatically.

You can also use the AutoTopbar block to have this behavior done automagically! Just provide a query selector like a class or an html tag to attach a listener to those elements that will do the magic for you.

E.g: ".trigger-topbar" will attach the event to all clickable elements with the class "trigger-topbar" and "a" will attach the event to all links.

Be sure to add the AutoTopbar_Hide block to your layout or screen if you want the topbar to disappear after a successful navigation.

Optionally, you can configure your topbar. Use the Topbar_SetConfigs action for that. You can configure:

• AutoRun (default: true): if false, call topbar.progress() manually to run.
• BarThickness (default: 3): the progress bar thickness.
• BarColors: list of gradient color stops used to draw the progress bar (use only 1 element if you want a solid color).
• ShadowBlur (default: 10): the shadow blur.
• ShadowColor: the shadow color.
• ClassName: the CSS class name for the progress bar.

I advice to configure only the "BarColors" property for better results, but hack away!