LoadingBar

The loading bar is a horizontal progress bar that appears at the top of the page. It simulates fake progress with a simple animation. This helps the page feel “alive” and responsive while a background request completes.

Behavior

When loading begins, the bar fades in and will animate from about 20% width towards 100%.

The animation will slow down the longer the request takes to complete, but will keep animating until it reaches 95%.

If the request completes fairly quickly (~250ms), the loading bar will not appear at all. This is fairly common for Stim.js preloads.

Stim Loading

By default, the loading bar appears whenever Stim.js internally loads a page. For link clicks, the loading bar only appears between the click release and final load.

You can completely disable this behavior if you prefer:

Stim.LoadingBar.setHandlePageLoads(false); // don't show for internal loads

Manual Use

To start the progress bar:

Stim.LoadingBar.start(); // fade in and begin animation (~250ms)

To finish the progress bar:

Stim.LoadingBar.finish(); // run to 100% and then fade out

To immediately cancel/abort the progress bar:

Stim.LoadingBar.stop(); // immediately stop and fade out

Styles

You can choose which built-in style to use:

Stim.LoadingBar.setStyle(LoadingBarStyle.Blue); // default style
Stim.LoadingBar.setStyle(LoadingBarStyle.None); // remove all styles

You can manually define/override CSS styles by targeting the .stim-loadingbar class.