UNPKG

@bprogress/core

Version:

NProgress-inspired library with more features

112 lines (73 loc) 2.41 kB
# BProgress A slim progress bar inspired by NProgress. **NProgress V2 and Next NProgress Bar become BProgress!** ## Migration from `nprogress-v2` If you are using `nprogress-v2`, you can migrate to `@bprogress/core` by following the [migration guide](https://bprogress.vercel.app/docs/migration). ## Installation ### Node.js To install BProgress, run the following command: ```bash npm install @bprogress/core ``` ### CDN Use **unpkg**: - JS: https://unpkg.com/@bprogress/core/dist/index.global.js - ESM: https://unpkg.com/@bprogress/core/dist/index.js - CSS: https://unpkg.com/@bprogress/core/dist/index.css Use **jsDelivr**: - JS: https://cdn.jsdelivr.net/npm/@bprogress/core/dist/index.global.js - ESM: https://cdn.jsdelivr.net/npm/@bprogress/core/dist/index.js - CSS: https://cdn.jsdelivr.net/npm/@bprogress/core/dist/index.css ### Integrations libraries The following frameworks have a dedicated package for using BProgress: - [React](https://www.npmjs.com/package/@bprogress/react) - [Next.js](https://www.npmjs.com/package/@bprogress/next) - [Remix](https://www.npmjs.com/package/@bprogress/remix) - [Vue](https://www.npmjs.com/package/@bprogress/vue) ## Quick Start ### Import #### CDN Import CSS in your `index.html` file. ```html <link rel="stylesheet" type="text/css" href="https://unpkg.com/@bprogress/core/dist/index.css" /> ``` Import JavaScript in your `index.html` file. ```html <script type="module"> import { BProgress } from 'https://unpkg.com/@bprogress/core/dist/index.js'; BProgress.configure({ ... }); </script> ``` Or you can add `BProgressJS` as a global variable using the legacy include: ```html <script src="https://unpkg.com/@bprogress/core/dist/index.global.js"></script> <script> const { BProgress } = BProgressJS; BProgress.configure({ ... }); </script> ``` #### Node.js ```js import '@bprogress/core/css'; import { BProgress } from '@bprogress/core'; ``` ### Basic Usage Simply call `start()` and `done()` to control the progress bar. ```js BProgress.start(); BProgress.done(); ``` ## More information on documentation Go to the [documentation](https://bprogress.vercel.app/docs) to learn more about BProgress. ## Issues If you encounter any problems, do not hesitate to [open an issue](https://github.com/imskyleen/bprogress/issues) or make a PR [here](https://github.com/imskyleen/bprogress). ## LICENSE MIT