Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including use-axios-progress-bar with all npm packages installed. Try it out:

var useAxiosProgressBar = require("use-axios-progress-bar")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

use-axios-progress-bar v1.0.2

query progress react hook

use-axios-progress-bar react hook

  1. yarn add use-axios-progress-bar or npm i use-axios-progress-bar --save
  2. Find the progress bar component of your dream
  3. Use it
import useAxiosProgressBar from "use-axios-progress-bar";

const GlobalProgressBar = () => {
    const currentProgress = useAxiosProgressBar();

        -1: no activity
        0: smth is running, but exact loading/total ratio cannot be calculated
        1-100: smth is running and loading/total ratio is known
    return (
        <div>Current state: ${currentProgress}</div>
  1. Or something more usable and beautiful
import Axios from "axiosInstance";
import useAxiosProgressBar from "use-axios-progress-bar";
import LinearProgress from "@material-ui/core/LinearProgress";
import { css } from "@emotion/core";

/* Overprioriting MUI styles with && */
const fixedProgressBarCss = css`
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10;

const AxiosProgressIndicator = () => {

    const loaded = useAxiosProgressBar({
        axiosInstance: Axios,
        delay: 500

    return loaded === -1 ? null : (
  1. Profit!


RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free