@bassist/progress

@bassist/progress

Simple slim progress bars base on NProgress.

Usage

With npm(or yarn, or pnpm):

npm install @bassist/progress

In .js / .ts or other files:

import progress from '@bassist/progress'

// Used in the framework's router hooks.
// Or in other scenarios (e.g. AJAX requests).

router.beforeEach(() => {
  progress.start()
})

router.afterEach(() => {
  progress.done()
})

All configurations and options of NProgress are supported.

Set Color

This plugin extends NProgress's API and adds a setColor method.

• Type Declarations:

export interface Progress extends NProgress {
  /**
   *
   * @param color - A valid CSS color value or CSS variable
   *
   * @example use HEX
   *  progress.setColor('#ff0000')
   *
   * @example use RGB
   *  progress.setColor('rgb(255, 0, 0)')
   *
   * @example use RGBA
   *  progress.setColor('rgba(255, 0, 0, 1)')
   *
   * @example use CSS Variable
   *  progress.setColor('var(--color-primary)')
   */
  setColor: (color: string) => void
}

• Example:

import progress from '@bassist/progress'

// Set the color before start
progress.setColor('#ff0000')

// Then, used in the framework's router hooks.
// Or in other scenarios (e.g. AJAX requests).

router.beforeEach(() => {
  progress.start()
})

router.afterEach(() => {
  progress.done()
})

Release Notes

Please refer to CHANGELOG for details.

License

MIT License © 2022 chengpeiquan