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, without bundling it, like this:
<script src="ProgressBar.min.js"></script>
<script>
const progress = new ProgressBar({
target: document.querySelector('body')
})
</script>
Or to include it in your bundled web app:
import ProgressBar from 'svelte-progress-bar'
// or
const ProgressBar = require('svelte-progress-bar')
// then
const progress = new ProgressBar({
target: document.querySelector('body')
})
If you were using a web app with a page change event emitter, it might look like:
const router = // the page/state change event emitter
router.on('stateChangeStart', () => {
progress.start()
})
router.on('stateChangeEnd', () => {
progress.complete()
})
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 emitter
dataLoad.on('percentDone', percent => {
progress.setWidthRatio(percent / 100) // must be a ratio
})
dataLoad.on('end', () => {
progress.complete()
})
Or if you are using the progress bar inside a Svelte template, you might use it like this:
<ProgressBar width="{width}" />
<script>
import ProgressBar from 'svelte-progress-bar'
export default {
components: { ProgressBar }
// somewhere later: this.setWidthRatio(0.4)
}
</script>
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.
JavaScript:
const progress = new ProgressBar({
target: document.querySelector('body'),
data: { color: '#0366d6' }
})
Svelte component:
<ProgressBar width="{{width}}" color="#0366d6" />
CSS:
.svelte-progress-bar, .svelte-progress-bar-leader {
background-color: #0366d6;
}
.svelte-progress-bar-leader {
color: #0366d6;
}
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:
.svelte-progress-bar {
z-index: 100;
}
.svelte-progress-bar-leader {
z-index: 101;
}
The properties available are:
minimum
(number, range: 0-1, default: 0.08): The starting percent width to use when the bar starts. Starting at0
doesn'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 thestart
(auto-increment) method.settleTime
(number, default: 700): Milliseconds to wait after thecomplete
method 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 to100%
and then hide aftersettleTime
.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.setWidthRatio(ratio: number)
: Stop auto-incrementing and manually specify the width.
Published and released under the Very Open License.