Registry / testing / axios-progress-bar

axios-progress-bar

library1.2.0jsnpmunverified

Slim progress bar (NProgress) for Web applications that use the Axios library for HTTP requests. Version 1.2.0 (latest, stable) is unmaintained since 2020. It integrates with axios by intercepting requests to show a progress bar using NProgress. Key differentiator: framework-agnostic, works with any axios usage. No breaking changes known but relies on peer dependency axios@0.x (not compatible with axios v1.x). No TypeScript types.

testing

npm install axios-progress-bar

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · AXIOS-PROGRESS-BAR

axios-progress-bar

testingjavascriptv1.2.0

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 'axios-progress-bar'

✗ import loadProgressBar from 'axios-progress-bar'

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

CSS

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

✗ import { nprogress } from 'axios-progress-bar'

CSS is not a JavaScript import; it must be imported separately as a side-effect or linked in HTML.

CDN usage (browser global)

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

✗ <script src='axios-progress-bar'></script>

In browser, the global function 'loadProgressBar' is available after including the script. The CDN link is not versioned properly.

Shows how to import and initialize the progress bar for all axios requests.

import axios from 'axios'; import { loadProgressBar } from 'axios-progress-bar'; import 'axios-progress-bar/dist/nprogress.css'; loadProgressBar(); // Now every axios request will show a progress bar axios.get('https://jsonplaceholder.typicode.com/todos/1').then(response => { console.log(response.data); });

Debug

Known issues

gotchaMust import the CSS file separately; otherwise no progress bar appears.

fix

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

affects: >=1.0.0

breakingIncompatible with axios v1.x due to changes in the interceptor API and the base URL property.

fix

Use axios@0.x (e.g., axios@0.27.2) or switch to an alternative progress bar library like 'axios-nprogress-bar' or 'nprogress-axios'.

affects: >=1.0.0

deprecatedPackage has not been updated since 2020 and is effectively unmaintained.

fix

Consider using 'axios-nprogress-bar' (active) or implementing your own interceptor with nprogress.

affects: >=1.0.0

gotchaThe function 'loadProgressBar' must be called only once; calling it multiple times may cause duplicate interceptors.

fix

Call loadProgressBar() once, typically at app initialization.

affects: >=1.0.0

gotchaCDN link in documentation uses a specific commit hash and may break if repository is moved or deleted.

fix

Use unpkg CDN for versioned releases: https://unpkg.com/axios-progress-bar@1.2.0/dist/index.js

affects: >=1.0.0

Errors

Common errors & fixes

Uncaught TypeError: Cannot read properties of undefined (reading 'use')

Using axios v1.x with axios-progress-bar; the library expects axios@0.x interceptor API.

fix

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

Error: loadProgressBar is not a function

Using default import instead of named import.

fix

Change import to: import { loadProgressBar } from 'axios-progress-bar'

Failed to load resource: net::ERR_FILE_NOT_FOUND (referring to nprogress.css)

CSS file not imported or path incorrect.

fix

Add correct import: import 'axios-progress-bar/dist/nprogress.css' or link from CDN.

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

Axios instance is not properly initialized or is falsy.

fix

Ensure axios is installed and imported: import axios from 'axios'

Upgrade

Version history

1.2.0latest on npm

Audit

Dependencies

axiosrequiredPeer dependency; the library intercepts axios requests to show the progress bar.

nprogressoptionalUsed internally for the progress bar UI; included in the bundle, but CSS must be imported separately.

Agent activity

20 hits · last 30 days

node

OpenAI (training)

Resources

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

packageaxios-progress-bar ↗

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