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

rsup-progress

v3.2.0

Published

A lightweight (1KB) progress bar with promise support

Downloads

3,078

Readme

A lightweight (1KB) progress bar with promise support

npm npm npm

The progress bar starts quickly but decelerates over time. Invoke the end function to finish the animation, providing a natural user experience without an exact percentage of progress.

https://skt-t1-byungi.github.io/rsup-progress/

Example

Using start and end methods.

progress.start()

fetch('/data.json').then(response => {
    progress.end()
})

Using promise method.

const response = await progress.promise(fetch('/data.json'))

Install

npm install rsup-progress
import { Progress } from 'rsup-progress'

Browser ESM

<script type="module">
    import { Progress } from 'https://unpkg.com/rsup-progress/dist/esm/index.js'
    const progress = new Progress()
</script>

API

new Progress(options?)

Create an instance.

const progress = new Progress({
    height: 5,
    color: '#33eafd',
})

options

  • height - Progress bar height. Default is 4px.
  • className - class attribute for the progress bar.
  • color - Progress bar color. Default is #ff1a59.
  • container - Element to append a progress bar. Default is document.body.
  • maxWidth - Maximum width before completion. Default is 99.8%.
  • position - Position to be placed. Default is top (There are top, bottom, none).
  • duration - Time to reach maxWidth. Default is 60000(ms).
  • hideDuration - Time to hide when completion. Default is 400(ms).
  • zIndex - CSS z-index property. Default is 9999.
  • timing - CSS animation timing function. Default is cubic-bezier(0,1,0,1).

progress.setOptions(options)

Change the options.

progress.setOptions({
    color: 'red',
    className: 'class1 class2',
})

progress.isInProgress

Check whether the progress bar is active.

console.log(progress.isInProgress) // => false

progress.start()

console.log(progress.isInProgress) // => true

progress.start()

Activate the progress bar.

progress.end(immediately = false)

Complete the progress bar. If immediately is set to true, the element is removed instantly.

progress.promise(promise, options?)

Automatically call start and end methods based on the given promise.

const response = await progress.promise(fetch('/data.json'))

options.min

Minimum time to display and maintain the progress bar. Default is 100 ms. If 0 is set and the promise is already resolved, the progress bar won't appear.

progress.promise(Promise.resolve(), { min: 0 }) // => Progress bar does not appear.

options.delay

If options.delay is set, the progress bar will start after the specified delay.

progress.promise(delay(500), { delay: 200 }) // => It starts 200ms later.

If the promise resolves before the delay, the progress bar won't appear.

progress.promise(delay(500), { delay: 600 }) // => Progress bar does not appear.

This is useful to prevent "flashing" of the progress bar for short-lived promises.

options.waitAnimation

If options.waitAnimation is set, the returned promise waits for the hide animation to complete.

await progress.promise(fetch('/data.json'), { waitAnimation: true })

alert('Complete!')

Useful for immediate actions like alert or confirm. Default is false.

License

MIT License ❤️📝 skt-t1-byungi