feat: add option trickleSpeed

README.md

@@ -22,18 +22,18 @@ yarn add @jambonn/vue-next-progressbar
 ### Global
 You may install Vue next progressbar globally:
 ```js
-import { createApp } from 'vue'
+import { createApp } from 'vue';
 import { createRouter, createWebHistory } from 'vue-router';
-import VueNextProgressbar from '@jambonn/vue-next-progressbar'
-import App from './App.vue'
+import VueNextProgressbar from '@jambonn/vue-next-progressbar';
+import App from './App.vue';
 
-const app = createApp(App)
+const app = createApp(App);
 app.use(createRouter({
     history: createWebHistory(),
     routes: [],
 }));
-app.use(VueNextProgressbar, { router: true })
-app.mount('#app')
+app.use(VueNextProgressbar, { router: true });
+app.mount('#app');
 ```
 ### Use in component
 When install global Vue next progressbar, you can control progress in component
@@ -43,12 +43,12 @@ When install global Vue next progressbar, you can control progress in component
   <button type="button" @click="progressBar.done()">Completes the progress</button>
 </template>
 <script>
-import { getCurrentInstance, inject } from 'vue'
+import { getCurrentInstance, inject } from 'vue';
 export default {
   setup() {
     // Get from global properties
-    const app = getCurrentInstance()
-    const progressBar = app.appContext.config.globalProperties.$Progressbar
+    const app = getCurrentInstance();
+    const progressBar = app.appContext.config.globalProperties.$Progressbar;
 
     // Get from provide
     const injectProgressBar = inject('Progressbar');
@@ -61,11 +61,26 @@ export default {
 ### Control progress
 Simply call start() and done() to control the Vue next progress bar.
 ```js
-import { VueProgressbar } from '@jambonn/vue-next-progressbar'
+import { VueProgressbar } from '@jambonn/vue-next-progressbar';
 VueProgressbar.start();
 VueProgressbar.done();
 ```
 
+### Configuration
+#### `trickleSpeed`
+Adjust how often to trickle/increment, in ms.
+```js
+import { createApp } from 'vue';
+import VueNextProgressbar from '@jambonn/vue-next-progressbar';
+import App from './App.vue';
+
+const app = createApp(App);
+const options = {
+  trickleSpeed: 500, // default: 800
+};
+app.use(VueNextProgressbar, options);
+```
+
 ### Compiles and hot-reloads for development
 ``` bash
 yarn install

src/progressbar.js

@@ -1,6 +1,12 @@
 const Progressbar = () => {
   const Progressbar = {
     status: null,
+    settings: {
+      trickleSpeed: 800,
+    },
+  };
+  Progressbar.configure = (options) => {
+    Progressbar.settings = Object.assign({}, Progressbar.settings, options);
   };
   Progressbar.set = (n) => {
     const started = typeof Progressbar.status === 'number';
@@ -57,7 +63,7 @@ const Progressbar = () => {
 
         Progressbar.trickle();
         work();
-      }, 800);
+      }, Progressbar.settings.trickleSpeed);
     };
 
     work();
@@ -71,17 +77,29 @@ const Progressbar = () => {
 
     if (!n) {
       return Progressbar.start();
+    } else if (n > 1) {
+      return () => {};
     } else {
       if (typeof amount !== 'number') {
-        amount = (1 - n) * clamp(Math.random() * n, 0.1, 0.95);
+        if (n >= 0 && n < 0.2) {
+          amount = 0.1;
+        } else if (n >= 0.2 && n < 0.5) {
+          amount = 0.04;
+        } else if (n >= 0.5 && n < 0.8) {
+          amount = 0.02;
+        } else if (n >= 0.8 && n < 0.99) {
+          amount = 0.005;
+        } else {
+          amount = 0;
+        }
       }
 
       n = clamp(n + amount, 0, 0.994);
       return Progressbar.set(n);
     }
   };
   Progressbar.trickle = () => {
-    return Progressbar.inc(Math.random() * 0.02);
+    return Progressbar.inc();
   };
   Progressbar.render = (fromStart) => {
     if (document.getElementById('v-progressbar')) {
@@ -163,6 +181,7 @@ export default {
 
     const config = Object.assign({ router: true }, options);
     const global = app.config.globalProperties;
+    VueProgressbar.configure(options);
     global.$Progressbar = VueProgressbar;
     if (config.router && typeof window !== 'undefined' && global.$router) {
       global.$router.beforeEach(() => {