feat: add zIndex prop

.eslintrc.json

@@ -1,4 +1,5 @@
 {
+	"root": true,
 	"env": {
 		"es6": true,
 		"browser": true,
@@ -28,53 +29,24 @@
 				"skipStrings": false
 			}
 		],
-		"comma-dangle": [
-			"error",
-			"always-multiline"
-		],
-		"eqeqeq": [
-			"error",
-			"always"
-		],
-		"no-undef": [
-			"error"
-		],
-		"indent": [
-			"error",
-			"tab"
-		],
-		"linebreak-style": [
-			"error",
-			"unix"
-		],
-		"eol-last": [
-			"error",
-			"always"
-		],
-		"block-spacing": [
-			"error",
-			"always"
-		],
+		"comma-dangle": ["error", "always-multiline"],
+		"eqeqeq": ["error", "always"],
+		"no-undef": ["error"],
+		"indent": ["error", "tab"],
+		"linebreak-style": ["error", "unix"],
+		"eol-last": ["error", "always"],
+		"block-spacing": ["error", "always"],
 		"no-return-await": "error",
 		"no-useless-rename": "error",
-		"object-curly-spacing": [
-			"error",
-			"always"
-		],
-		"semi": [
-			"error",
-			"never"
-		],
+		"object-curly-spacing": ["error", "always"],
+		"semi": ["error", "never"],
 		"keyword-spacing": [
 			"error",
 			{
 				"before": true
 			}
 		],
-		"space-before-blocks": [
-			"error",
-			"always"
-		],
+		"space-before-blocks": ["error", "always"],
 		"space-before-function-paren": [
 			"error",
 			{
@@ -83,20 +55,13 @@
 				"asyncArrow": "always"
 			}
 		],
-		"space-in-parens": [
-			"error",
-			"never"
-		],
+		"space-in-parens": ["error", "never"],
 		"no-eval": "error",
 		"no-implied-eval": "error",
 		"no-new": "error",
 		"no-unexpected-multiline": "error",
-		"no-unused-vars": [
-			"error"
-		],
-		"no-var": [
-			"error"
-		],
+		"no-unused-vars": ["error"],
+		"no-var": ["error"],
 		"brace-style": [
 			"error",
 			"1tbs",

README.md

@@ -8,27 +8,27 @@ You can use it in your plain old web app, without bundling or anything, using th
 <script src="https://unpkg.com/svelte-progress-bar/dist/ProgressBar.umd.js"></script>
 <script>
 	const progress = new ProgressBar({
-		target: document.querySelector('body')
-	})
+		target: document.querySelector("body"),
+	});
 	// start it on a page load
-	progress.start()
+	progress.start();
 	// complete it at some point in the future
 	setTimeout(() => {
-		progress.complete()
-	}, 1000)
+		progress.complete();
+	}, 1000);
 </script>
 ```
 
 Or to include it in your web app:
 
 ```js
-import ProgressBar from 'svelte-progress-bar'
+import ProgressBar from "svelte-progress-bar";
 // or
-const ProgressBar = require('svelte-progress-bar')
+const ProgressBar = require("svelte-progress-bar");
 // then
 const progress = new ProgressBar({
-	target: document.querySelector('body')
-})
+	target: document.querySelector("body"),
+});
 ```
 
 Or if you are using the progress bar inside a Svelte template, you might use `bind:this` like this:
@@ -49,26 +49,33 @@ If you were using a web app with a router, or some sort of page change event emi
 
 ```js
 const router = // the page/state change event emitter
-router.on('stateChangeStart', () => {
-	progress.start()
-})
-router.on('stateChangeEnd', () => {
-	progress.complete()
-})
+	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:
 
 ```js
 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()
-})
+	dataLoad.on("percentDone", (percent) => {
+		progress.setWidthRatio(percent / 100); // must be a ratio
+	});
+dataLoad.on("end", () => {
+	progress.complete();
+});
 ```
 
+## Svelte props
+
+| Prop name | required? | default     | Description              |
+| --------- | --------- | ----------- | ------------------------ |
+| `color`   | Yes ✅    | `undefined` | Set the bar's color.     |
+| `zIndex`  | No        | `1`         | Set the bar's `z-index`. |
+
 ## Bar Color
 
 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.
@@ -77,9 +84,9 @@ JavaScript:
 
 ```js
 const progress = new ProgressBar({
-	target: document.querySelector('body'),
-	props: { color: '#0366d6' }
-})
+	target: document.querySelector("body"),
+	props: { color: "#0366d6" },
+});
 ```
 
 Svelte component:
@@ -91,18 +98,27 @@ Svelte component:
 Or in your CSS:
 
 ```css
-.svelte-progress-bar, .svelte-progress-bar-leader {
+.svelte-progress-bar,
+.svelte-progress-bar-leader {
 	background-color: #0366d6;
 }
 .svelte-progress-bar-leader {
 	color: #0366d6;
 }
 ```
 
-## Other Styles
+## z-index
 
 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 component:
+
+```html
+<ProgressBar zIndex="{200}" color="#000000" />
+```
+
+Plain CSS:
+
 ```css
 .svelte-progress-bar {
 	z-index: 100;
@@ -116,21 +132,21 @@ If you are using some type of navbar at the top of the page, like Bootstrap's, i
 
 You shouldn't need to play with these, they've been selected based on UX design expertise, but they're available if you need them:
 
-* `minimum` *(number, range: 0-1, default: 0.08)*: The starting percent width use when the bar starts. Starting at `0` 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 the `start` (auto-increment) method.
-* `settleTime` *(number, default: 700)*: Milliseconds to wait after the `complete` method is called to hide the progress bar. Letting it sit at 100% width for a very short time makes it feel more fluid.
+-   `minimum` _(number, range: 0-1, default: 0.08)_: The starting percent width use when the bar starts. Starting at `0` 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 the `start` (auto-increment) method.
+-   `settleTime` _(number, default: 700)_: Milliseconds to wait after the `complete` method is called to hide the progress bar. Letting it sit at 100% width for a very short time makes it feel more fluid.
 
 ## Methods
 
 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 `settleTime`.
-* `reset()`: Set the width to minimum but do not start incrementing.
-* `animate()`: 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.
+-   `start()`: Set the width to the minimum and increment until maximum width.
+-   `complete()`: Set the width to `100%` and then hide after `settleTime`.
+-   `reset()`: Set the width to minimum but do not start incrementing.
+-   `animate()`: 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.
 
 ## License
 

docs/App.svelte

@@ -9,6 +9,6 @@
 	export const complete = () => bar.complete()
 </script>
 
-<ProgressBar color="blue" bind:this={bar} bind:width />
+<ProgressBar color="blue" zIndex="13" bind:this={bar} bind:width />
 
 <Controls bind:bar currentWidth={width} />