{"id":47086,"library":"axios-progress-bar","title":"Axios Progress Bar","description":"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.","status":"deprecated","version":"1.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/rikmms/progress-bar-4-axios","tags":["javascript","axios","http","progress","bar","loading","react","reactjs","vue"],"install":[{"cmd":"npm install axios-progress-bar","lang":"bash","label":"npm"},{"cmd":"yarn add axios-progress-bar","lang":"bash","label":"yarn"},{"cmd":"pnpm add axios-progress-bar","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; the library intercepts axios requests to show the progress bar.","package":"axios","optional":false},{"reason":"Used internally for the progress bar UI; included in the bundle, but CSS must be imported separately.","package":"nprogress","optional":true}],"imports":[{"note":"Named export, not default. Also works with CommonJS: const { loadProgressBar } = require('axios-progress-bar')","wrong":"import loadProgressBar from 'axios-progress-bar'","symbol":"loadProgressBar","correct":"import { loadProgressBar } from 'axios-progress-bar'"},{"note":"CSS is not a JavaScript import; it must be imported separately as a side-effect or linked in HTML.","wrong":"import { nprogress } from 'axios-progress-bar'","symbol":"CSS","correct":"import 'axios-progress-bar/dist/nprogress.css'"},{"note":"In browser, the global function 'loadProgressBar' is available after including the script. The CDN link is not versioned properly.","wrong":"<script src='axios-progress-bar'></script>","symbol":"CDN usage (browser global)","correct":"<script src='https://cdn.rawgit.com/rikmms/progress-bar-4-axios/0a3acf92/dist/index.js'></script>"}],"quickstart":{"code":"import axios from 'axios';\nimport { loadProgressBar } from 'axios-progress-bar';\nimport 'axios-progress-bar/dist/nprogress.css';\n\nloadProgressBar();\n\n// Now every axios request will show a progress bar\naxios.get('https://jsonplaceholder.typicode.com/todos/1').then(response => {\n  console.log(response.data);\n});","lang":"javascript","description":"Shows how to import and initialize the progress bar for all axios requests."},"warnings":[{"fix":"Add import 'axios-progress-bar/dist/nprogress.css' or include the CSS link in HTML.","message":"Must import the CSS file separately; otherwise no progress bar appears.","severity":"gotcha","affected_versions":">=1.0.0"},{"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'.","message":"Incompatible with axios v1.x due to changes in the interceptor API and the base URL property.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Consider using 'axios-nprogress-bar' (active) or implementing your own interceptor with nprogress.","message":"Package has not been updated since 2020 and is effectively unmaintained.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Call loadProgressBar() once, typically at app initialization.","message":"The function 'loadProgressBar' must be called only once; calling it multiple times may cause duplicate interceptors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use unpkg CDN for versioned releases: https://unpkg.com/axios-progress-bar@1.2.0/dist/index.js","message":"CDN link in documentation uses a specific commit hash and may break if repository is moved or deleted.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'0':61 '1.2.0':20 '2020':26 'agnost':45 'applic':10 'axio':1,14,30,49,60,66,72 'bar':3,6,38,75 'break':52 'chang':53 'compat':64 'depend':59 'differenti':42 'framework':44 'framework-agnost':43 'http':17,73 'integr':28 'intercept':32 'javascript':71 'key':41 'known':54 'latest':21 'librari':15 'load':76 'nprogress':7,40 'peer':58 'progress':2,5,37,74 'react':77 'reactj':78 'reli':56 'request':18,33 'show':35 'sinc':25 'slim':4 'stabl':22 'type':70 'typescript':69 'unmaintain':24 'usag':50 'use':12,39 'v1.x':67 'version':19 'vue':79 'web':9 'work':46 'x':62","created_at":"2026-06-07T16:49:42.716370+00:00","updated_at":"2026-06-07T16:49:42.716370+00:00","problems":[{"fix":"Downgrade axios to version 0.x: npm install axios@0.27.2","cause":"Using axios v1.x with axios-progress-bar; the library expects axios@0.x interceptor API.","error":"Uncaught TypeError: Cannot read properties of undefined (reading 'use')"},{"fix":"Change import to: import { loadProgressBar } from 'axios-progress-bar'","cause":"Using default import instead of named import.","error":"Error: loadProgressBar is not a function"},{"fix":"Add correct import: import 'axios-progress-bar/dist/nprogress.css' or link from CDN.","cause":"CSS file not imported or path incorrect.","error":"Failed to load resource: net::ERR_FILE_NOT_FOUND (referring to nprogress.css)"},{"fix":"Ensure axios is installed and imported: import axios from 'axios'","cause":"Axios instance is not properly initialized or is falsy.","error":"Uncaught TypeError: axios.interceptors.request.use is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/rikmms/progress-bar-4-axios#readme","github":"https://github.com/rikmms/progress-bar-4-axios","docs":null,"changelog":null,"pypi":null,"npm":"axios-progress-bar","openapi_spec":null,"status_page":null,"smithery":null,"categories":["testing"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-07","next_check":"2026-09-05","install_tag":null}}