@types/nprogress

What is @types/nprogress?

@types/nprogress provides TypeScript definitions for the nprogress library, which is a simple and lightweight JavaScript library for showing a progress bar on the top of the page. It is often used to indicate loading states in web applications.

What are @types/nprogress's main functionalities?

Start the Progress Bar

This feature starts the progress bar animation. It is typically used when an action that takes time begins, such as an AJAX request.

NProgress.start();

Set Progress

This feature sets the progress bar to a specific value between 0 and 1. It can be used to manually control the progress bar's state.

NProgress.set(0.5);

Increment Progress

This feature increments the progress bar by a random amount. It is useful for showing progress in situations where the exact progress is unknown.

NProgress.inc();

Complete the Progress Bar

This feature completes the progress bar animation and hides it. It is typically used when an action that takes time is finished.

NProgress.done();

Configure NProgress

This feature allows you to configure various settings of the progress bar, such as whether to show the spinner or not.

NProgress.configure({ showSpinner: false });

Other packages similar to @types/nprogress

react-top-loading-bar

react-top-loading-bar is a React component that provides a loading bar at the top of the page. It is similar to nprogress but is specifically designed for React applications, making it easier to integrate with React's component-based architecture.

pace-js

pace-js is a library that automatically shows a progress bar for page loads and AJAX requests. It offers more customization options and different themes compared to nprogress, but it is also larger in size.

progressbar.js

progressbar.js is a library for creating progress bars with SVG paths. It offers more advanced and customizable progress bar shapes compared to nprogress, but it requires more setup and configuration.

README

Installation

npm install --save @types/nprogress

Summary

This package contains type definitions for nprogress (https://github.com/rstacruz/nprogress).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/nprogress.

index.d.ts

declare namespace nProgress {
    interface NProgressOptions {
        minimum: number;
        template: string;
        easing: string;
        speed: number;
        trickle: boolean;
        trickleSpeed: number;
        showSpinner: boolean;
        parent: string;
        positionUsing: string;
        barSelector: string;
        spinnerSelector: string;
    }

    interface NProgress {
        version: string;
        settings: NProgressOptions;
        status: number | null;

        configure(options: Partial<NProgressOptions>): NProgress;
        set(number: number): NProgress;
        isStarted(): boolean;
        start(): NProgress;
        done(force?: boolean): NProgress;
        inc(amount?: number): NProgress;
        trickle(): NProgress;

        /* Internal */

        render(fromStart?: boolean): HTMLDivElement;
        remove(): void;
        isRendered(): boolean;
        getPositioningCSS(): "translate3d" | "translate" | "margin";
    }
}

declare const nProgress: nProgress.NProgress;
export = nProgress;

Additional Details

• Last updated: Tue, 07 Nov 2023 09:09:39 GMT
• Dependencies: none

Credits

These definitions were written by Judah Gabriel Himango, and Ovyerus.