Skip to content
⌛ Minimal indeterminate loading bar for websites
TypeScript
Branch: master
Clone or download
Latest commit dfb33b4 Aug 7, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo update demo and docs Aug 7, 2019
dist initial build Aug 7, 2019
src initial build Aug 7, 2019
.gitignore
.npmignore initial build Aug 7, 2019
LICENSE.txt
README.md update docs again :( Aug 7, 2019
npm-shrinkwrap.json add license Aug 7, 2019
package.json bump version Aug 7, 2019
tsconfig.json initial build Aug 7, 2019
tslint.json

README.md

⌛ Untrusive

This project is built by path_of_dev

Untrusive is a indeterminate loading bar for websites and web applications. It features:

  • Zero-dependencies
  • Lightweight, only 1.2kb gzipped
  • Minimal API
  • No CSS import required
  • Safe to import server-side
  • Includes TypeScript definitions

View demo

Installing

Install via CDN

Add the following script tag to your HTML before using this library

<script src="https://cdn.jsdelivr.net/npm/untrusive@1.0.0/dist/umd/untrusive.min.js"></script>

Install via NPM

npm install --save untrusive

Usage

Untrusive is a class which you can create multiple instances of.

import Untrusive from "untrusive"; // only for NPM installation

const loader = new Untrusive({
  bgColor: "#333", // Background color
  barColor: "#222", // Animated stripe color
  height: 4, // Optional: Height of bar in pixels 
});

loader.start();

loader.stop();

loader.toggle();

// Re-initalize instance with new options
loader.init({
  bgColor: "#333",
  barColor: "#222",
});

Untrusive Options

Takes an object with the following properties:

Property Type Description
bgColor string Background color of the loading bar. Can be any valid CSS color
bgColor string Color of the animated stripe on the loading bar. Can be any valid CSS color
height number Height of the loading bar in pixels, defaults to 4

Contributing

If you would like to contribute to this project, you need to:

  1. Fork the GitHub repo
  2. Make the required changes on your fork
  3. Submit a pull request in this repo comparing your fork
You can’t perform that action at this time.