Tinybar

Tiny progress bar (~337 bytes gzipped).

Installation

# Yarn
yarn add tinybar

# NPM
npm install tinybar --save

# UMD
<script src="https://unpkg.com/tinybar/dist/index.umd.js"></script>

Usage

import Tinybar from 'tinybar'

const tinybar = new Tinybar()

tinybar.go(30)
tinybar.go(100)

Add Custom CSS

Tinybar comes with some default inline styling that works out-of-the-box. You can take control of the styling by passing an id when instantiating Tinybar.

const tinybar = new Tinybar('my-progress-bar')

Now, just add your own CSS:

/* Wrapper div element */
#my-progress-bar {
  background: #e2e8f0;
  height: 2px;

  /* (!) Be careful when editing the properties below */
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  transition: height .3s;
  width: 100%;
  z-index: 10000;
}

/* Progress bar */
#my-progress-bar div {
  background: #90cdf4;

  /* (!) Be careful when editing the properties below */
  height: 100%;
  transition: width .2s ease-out;
  width: 0;
}