The idea is a little Svelte component that shows a cool progress bar, like what's on YouTube, or this cool thing.
You can use it in your plain old web app like this:
Or to include it in your built web app:
// orconst ProgressBar =// thenconst progress =target: document
If you were using a web app with a page change event emitter, it might look like:
const router = // the page/state change event emitterrouterrouter
Or if you had some progress event emitter that actually told you the percent of progress, you might set the progress bar width manually with something like this:
const dataLoad = // some sort of data load progress event emitterdataLoaddataLoad
Or if you are using the progress bar inside a Svelte template, you might use it like this:
The progress bar does not have a default color, so you will need to set one. You can either set the color as a data property or override the CSS.
const progress =target: documentdata: color: 'blue'
If you are using some type of navbar at the top of the page, like Bootstrap's, it is likely that you will need to change the z-index to get the progress bar to appear over the navbar:
The properties available are:
minimum(number, range: 0-1, default: 0.08): The starting percent width to use when the bar starts. Starting at
0doesn't usually look very good.
maximum(number, range: 0-1, default: 0.994): The maximum percent width value to use when the bar is at the end but not marked as complete. Letting the bar stay at 100% width for a while doesn't usually look very good either.
intervalTime(number, default: 800): Milliseconds to wait between incrementing bar width when using the
settleTime(number, default: 700): Milliseconds to wait after the
completemethod is called to hide the progress bar. Letting it sit at 100% width for a very short time makes it feel more fluid.
These additional methods are available on an instantiated progress bar:
start(): Set the width to the minimum and increment until maximum width.
complete(): Set the width to
100%and then hide after
reset(): Set the width to minimum but do not start incrementing.
continue(): Start incrementing from whatever the current width is.
stop(): Stop incrementing and take no further action.
Published and released under the Very Open License.