npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-js-loading-progress-bar

v0.3.1

Published

React JS loading progress (bar and throbber) component that shows estimated time left (if several requests need to be made) and progress bar with percentage.

Downloads

321

Readme

npm npm npm

React-loading-progress

Simple react JS Progress / Loading bar for multiple files

Description

React loading component with progress bar, percentage and time estimated for the operation to be completed.

How it looks: alt text

It has two options the compact mode, that shows the progress bar, percentage and time left in a single line, and the full mode which outputs in different lines how much items has processed, the current percentage, the progress bar and the estimated time to complete the current operation.

You can now opt for two more options:

  1. Having a spinner instead of a progress bar
  2. Showing just the spinner and progress bar without any text

alt text

How to thank me? Just click on ⭐️ button :)

Installation

Install it from npm and include it in your React build process (using Webpack, Browserify, etc).

npm i react-js-loading-progress-bar

Usage

Import LoadingProgress in your react component.

import LoadingProgress from 'react-js-loading-progress-bar';

Props available:

| Name | Type | Mandatory | Description
| ------------- |:-------------:| -----:|:-----| | total | integer | Y |The total items you are going to process | | active | boolean | Y | If you want to activate the loading component | | current | integer | Y| The current item being processed | | showCompact | present? |N | If you want the single line version (full by default) | | title | String |N | Render custom title | | hideProcessingRequest | present? |N | Render processing request in full mode | | hideTimeRemaining | present? |N | Render time remaining in full mode | | hideProgressBar | present? |N | Hide entirely the progress bar or spinner | | hideQtyProcessed | present? |N | Hide the amount of items processed | | useSpinner | present? |N | changes the progress bar with a spinner (throbber) | | visualOnly | present? |N | Shows only the progress bar or throbber (depending on the mode you are using) |

For example:

 <LoadingProgress
  active={true}
  total={this.state.total}
  current={this.state.current}
  showCompact       
/>

To use the spinner instead of the progress bar you can use the useSpinner prop as follows:

<LoadingProgress
  useSpinner
  active={true}
  total={this.state.total}
  current={this.state.current}
/>

Changelog

v0.3.1

  • Overall package size optimized

v0.3.0

  • Dependencies updated

License

Licensed under the MIT License © jciccio