the-muda-organization/nanobar

Super lighweight, pure JavaScript page load progress bar

Maintainers

Details

github.com/the-muda-organization/nanobar

Source

Issues

Installs: 4

Dependents: 0

Suggesters: 0

Security: 0

Stars: 7

Watchers: 1

Forks: 1

Open Issues: 0

Language:HTML

v1.0.0 2020-10-19 03:59 UTC

MIT 37f5ed83d945d20d12fc55b599068f6ad0c4001d

  • Jakub Muda <info.woop@muda.pl>

javascriptcssJSlightweightprogressstatusbarprogress-barmudanojquery

This package is auto-updated.

Last update: 2025-04-29 01:14:58 UTC

README

Super lighweight, pure JavaScript page load progress bar

Status

GitHub Version License

Github Star Github Fork

JS gzip size

View Preview

Table of contents

Quick Start

Several options are available:

What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

There are no dependencies. See below for Installation Guide and How to Use

nanobar/
 │
 └─ dist/
    │
    ├── nanobar.js
    └── nanobar.min.js

Bugs and feature requests

Have a bug or a feature request? Before opening a new issue search for existing and closed issues. If your problem or idea is not addressed yet, open a new issue.

Installation

  1. Download and copy files to your project
  2. Add JS to your project:
    <script src="https://example.com/nanobar/1.x.x/nanobar.min.js"></script>

OR add script inline (recommended):

    <script>Paste script here</script>
  1. Place nanobar <script> right after opening <body> tag.
  2. Ready to use!

How to Use

Nanobar is designed to be placed in CDN and used on multiple pages. Nanobar has default background color set to red. You may set custom background color you like the most in JavaScript variables (at the beginning of the script).

If you want to change color on a single page add data-nanobar="" attribute to <body>. You can use any color value that is usually used in CSS #nanobar{background: something} - color name, hex value, gradients and more.

    <body data-nanobar="#ff8c00">
    <body data-nanobar="blue">
    <body data-nanobar="linear-gradient(to right,#40e0d0,#ff8c00,#ff0080)">

Do not add this attribute and do not leave blank if you don't want to change background color. JavaScript checks if data-nanobar="#ff8c00" has a new background color value.

Nanobar has assigned ID: <div id="nanobar"></div>

Versioning

Nanobar will be maintained under the Semantic Versioning guidelines as much as possible. Releases will be numbered with the following format: <major>.<minor>.<patch>

Changelog

For last releases see detailed CHANGELOG.

Team

Code of conduct

We will behave ourselves if you behave yourselves. For more details see our CODE OF CONDUCT.

Copyright and license

Code and documentation copyright 2017-2020 The MUDA Organization.

Code released under the MIT License.