Registry / ui / x-axios-progress-bar

x-axios-progress-bar

library1.2.2jsnpmunverified

A lightweight progress bar for Axios HTTP requests using NProgress. Version 1.2.2, last updated 2019, no active releases since. Requires axios 0.x. Integrates seamlessly with any web framework (React, Vue, vanilla JS) via a single function call. Provides configurable NProgress appearance and per-request disable option. CSS file must be imported separately. Key differentiator: minimal setup compared to other Axios progress bar solutions.

npm install x-axios-progress-bar

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · X-AXIOS-PROGRESS-B

x-axios-progress-bar

uijavascriptv1.2.2

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

loadProgressBar

✓ import { loadProgressBar } from 'x-axios-progress-bar'

✗ import loadProgressBar from 'x-axios-progress-bar'

Named export, not default. CommonJS: const { loadProgressBar } = require('x-axios-progress-bar')

CSS (import for bundlers)

✓ import 'x-axios-progress-bar/dist/nprogress.css'

✗ import 'x-axios-progress-bar'

Must import CSS separately for styling. Without CSS, progress bar is invisible.

CDN script (browser)

✓ <script src="https://cdn.rawgit.com/rikmms/progress-bar-4-axios/0a3acf92/dist/index.js"></script> loadProgressBar()

✗ loadProgressBar.config({})

No default config needed; just call loadProgressBar() after script loads.

Shows how to install, import, initialize progress bar, and make axios requests with automatic progress display. Includes per-request disable example.

// Install: npm install axios x-axios-progress-bar import { loadProgressBar } from 'x-axios-progress-bar'; import 'x-axios-progress-bar/dist/nprogress.css'; import axios from 'axios'; // Initialize progress bar for default axios instance loadProgressBar(); // Make requests with automatic progress bar axios.get('https://jsonplaceholder.typicode.com/posts') .then(response => console.log(response.data)); // Disable per request axios.post('/api/data', { key: 'value' }, { progress: false });

Debug

Known issues

breakingThe package requires axios 0.x. Incompatible with axios 1.x due to interceptor API changes.

fix

Either pin axios to 0.x or switch to a maintained progress bar library compatible with axios 1.x.

affects: >=1.0.0

deprecatedRawgit CDN links are deprecated and will be shut down. Rawgit has been deprecated since 2018.

fix

Use alternative CDN like unpkg or jsdelivr: https://unpkg.com/x-axios-progress-bar/dist/index.js

affects: *

gotchaCSS must be imported separately. Without importing nprogress.css, the progress bar will not be visible.

fix

Add import: import 'x-axios-progress-bar/dist/nprogress.css' or link the CSS file in HTML.

affects: *

gotchaloadProgressBar() is a named export, not default. Using default import will result in undefined.

fix

Import correctly: import { loadProgressBar } from 'x-axios-progress-bar'

affects: *

deprecatedPackage last updated in 2019. No active maintenance; consider using alternatives like 'axios-nprogress' or 'nprogress' directly.

fix

Migrate to a maintained package or manually integrate NProgress with axios interceptors.

affects: *

Errors

Common errors & fixes

Uncaught TypeError: loadProgressBar is not a function

CommonJS require returns object with named export. Using require('x-axios-progress-bar') directly without destructuring gives module object.

fix

Use: const { loadProgressBar } = require('x-axios-progress-bar');

Cannot find module 'x-axios-progress-bar/dist/nprogress.css'

CSS file path is incorrect or CSS import not supported by bundler configuration.

fix

Ensure bundler supports CSS imports (e.g., webpack with css-loader). Use correct path: 'x-axios-progress-bar/dist/nprogress.css'

Uncaught TypeError: axios.interceptors.request.use is not a function

Wrong version of axios (1.x) where interceptor API changed. Package expects axios 0.x.

fix

Downgrade axios to 0.x: npm install axios@0.27.2

The progress bar does not appear

Missing CSS import or CSS file not linked in HTML.

fix

Import or link the nprogress.css file from dist folder.

Upgrade

Version history

1.2.2latest on npm

Audit

Dependencies

axiosrequiredpeer dependency, required for interceptors

Agent activity

33 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/mszkb/progress-bar-4-axios ↗

packagex-axios-progress-bar ↗

homepagehttps://github.com/mszkb/progress-bar-4-axios#readme ↗