Skip to content Skip to footer navigation

Progress

Control the magic progress bar at the top of the page.

You can control the progress bar at the top of the page through the $progress instance method. This progress bar will get a little further in small intervals automatically but will never reach 100% until itโ€™s told to.

The component can track the progress from multiple places, and will only be considered complete once all of them are complete.

this.$progress.start($name); // Starts the progress bar
this.$progress.complete($name); // Instantly progress to 100% and disappear
 
this.$progress.loading($name, true); // Alias of .start() - Useful for passing a boolean
this.$progress.loading($name, false); // Alias of complete()
 
this.$progress.names(); // The names of the items that are being tracked.
this.$progress.count(); // How many are being tracked.
this.$progress.isComplete(); // Whether all the items that were being tracked have completed.
Hot Tip!

If you have a component that may appear multiple times on one page (like a Fieldtype), make sure the name is unique. All Vue components already have a unique _uid property that can be used for this purpose.

this.$progress.start('things' + this._uid);
A troll pointing a teaching stick