Add demo, update documentation

rstacruz · rstacruz · commit f9eeeeca67f4 · 2020-04-24T00:48:26.000+10:00
diff --git a/README.md b/README.md
@@ -238,7 +238,7 @@ NProgress.configure({ parent: "#container" });
 Colors can be customized using CSS variables.
 
 ```css
-:root {
+#nprogress {
   --nprogress-color: #29d;
   --nprogress-height: 2px;
   --nprogress-spinner-opacity: 1;
@@ -247,6 +247,30 @@ Colors can be customized using CSS variables.
 }
 ```
 
+## Customization examples
+
+<summary>
+<details>Hiding the spinner</details>
+
+```css
+#nprogress {
+  --nprogress-spinner-opacity: 0;
+}
+```
+
+</summary>
+
+<summary>
+<details>Changing the color</details>
+
+```css
+#nprogress {
+  --nprogress-color: #29d;
+}
+```
+
+</summary>
+
 ## Resources
 
 - [New UI Pattern: Website Loading Bars](http://www.usabilitypost.com/2013/08/19/new-ui-pattern-website-loading-bars/) (usabilitypost.com)
diff --git a/demo.html b/demo.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <script src="dist/nprogress.umd.js"></script>
+    <link rel="stylesheet" href="css/nprogress.css">
+    <style data-js-dynamic-style></style>
+  </head>
+  <body>
+    <div class="actions">
+      <button data-js-start>Start</button>
+      <button data-js-done>Done</button>
+      <button data-js-style-0>Reset</button>
+      <button data-js-style-1>Style 1</button>
+    </div>
+
+    <script>
+      function qs(selector) {
+        return document.querySelector(selector);
+      }
+
+      console.log('NProgress demo')
+
+      qs("[data-js-start]").addEventListener("click", () => {
+        NProgress.start();
+      });
+
+      qs("[data-js-done]").addEventListener("click", () => {
+        NProgress.done();
+      });
+
+      qs("[data-js-style-0]").addEventListener("click", () => {
+        qs("[data-js-dynamic-style]").innerHTML = "";
+      });
+
+      qs("[data-js-style-1]").addEventListener("click", () => {
+        qs("[data-js-dynamic-style]").innerHTML = `
+          #nprogress {
+            --nprogress-color: #f00;
+            --nprogress-height: 1px;
+            --nprogress-spinner-size: 32px;
+            --nprogress-spinner-stroke-width: 3px;
+          }
+        `;
+      });
+    </script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -16,6 +16,12 @@
     "microbundle": "^0.11.0",
     "prettier": "^2.0.4"
   },
+  "files": [
+    "demo.html",
+    "dist",
+    "css",
+    "src"
+  ],
   "homepage": "https://github.com/rstacruz/nprogress#readme",
   "keywords": [
     "bar",
@@ -35,8 +41,8 @@
     "url": "git+https://github.com/rstacruz/nprogress.git"
   },
   "scripts": {
-    "build": "microbundle",
-    "dev": "microbundle watch",
+    "build": "microbundle --name NProgress",
+    "dev": "npm run build -- watch",
     "format": "prettier --write 'src/*.js' 'css/*.{css,scss}'",
     "prettier:check": "prettier --check 'src/*.js' 'css/*.{css,scss}'",
     "test": "jest"
