Very lightweight progress bars. No jQuery

Overview

nanobar

Very lightweight progress bars (~699 bytes gzipped).

Compatibility: iE7+ and the rest of the world

npm version Bower version

Demo

See nanobar.jacoborus.codes

Installation

Download and extract the latest release or install with package manager:

Bower:

$ bower install nanobar

npm:

$ npm install nanobar

Usage

Load

Link nanobar.js from your html file

<script src="path/to/nanobar.min.js"></script>

or require it:

var Nanobar = require('path/to/nanobar');

Generate progressbar

var nanobar = new Nanobar( options );

options

  • id <String>: (optional) id for nanobar div
  • classname <String>: (optional) class for nanobar div
  • target <DOM Element>: (optional) Where to put the progress bar, nanobar will be fixed to top of document if no target is passed

Move bar

Resize the bar with nanobar.go(percentage)

arguments

  • percentage <Number> : percentage width of nanobar

Example

Create bar

var options = {
	classname: 'my-class',
  id: 'my-id',
	target: document.getElementById('myDivId')
};

var nanobar = new Nanobar( options );

//move bar
nanobar.go( 30 ); // size bar 30%
nanobar.go( 76 ); // size bar 76%

// size bar 100% and and finish
nanobar.go(100);

Customize bars

Nanobar injects a style tag in your HTML head. Bar divs has class .bar, and its containers .nanobar, so you can overwrite its values.

Default css:

.nanobar {
  width: 100%;
  height: 4px;
  z-index: 9999;
  top:0
}
.bar {
  width: 0;
  height: 100%;
  transition: height .3s;
  background:#000;
}

You should know what to do with that ;)




© 2016 jacoborus - Released under MIT License

Comments
  • multiple bars get created when repeatedly calling go(100)

    multiple bars get created when repeatedly calling go(100)

    Hi,

    In my project I want to use the nanobar whenever the user causes some (potentially long-running) calculations. However, some of them end really quickly and the user can click as often as they want. In this case multiple bars appear that are layouted below one another. Eventually this could fill the whole screen.

    This should be avoided, e.g. by removing the previous bar without an animation,

    You can also try this on the demo page by repeatedly clicking the button nanobar.go(100).

    opened by stuikomma 9
  • Bars stack when triggered before transition ends

    Bars stack when triggered before transition ends

    If you call nanobar.go(100) and then call nanobar.go(50) one or more times before the transition ends, you'll see the bars stack. It looks like init() is creating the bar and appending it to the target and doesn't check for the existence of another bar.

    Example:

    2016-05-18 10 10 01

    I'm not sure what your preferred solution is, but I have a few ideas to toss around:

    1. Empty the target element before calling el.appendChild().
    2. Check for an existing bar. If one exists, use that instead (might look funny since the transition would animate backwards; might be able to disable the transition on the fly to prevent that behavior).
    3. Provide a reset() method to programmatically remove the bar without animation.
    4. Apply overflow: hidden to the .nanobar container (more of a stop gap than a real fix)

    I don't think this is an edge case since it's not abnormal for apps to send consecutive asynchronous requests. Not having a programmatic way to reset progress before the transition ends is a bit of a shortcoming. (The only other option is to wait until the transition ends to start the next request.)

    Happy to help out with this if you have any feedback or other ideas on it. Which approach do you think is best?

    opened by claviska 5
  • Can't style it at all

    Can't style it at all

    You put all the styles inline in the HTML and now you can't style the bar or container at all. What is the point of setting the ID attribute if you can't use it to set styles? Can't adjust the height, etc...

    bug 
    opened by Jakobud 5
  • Cannot invoke 'new' on Nanobar using requireJS

    Cannot invoke 'new' on Nanobar using requireJS

    I am unable to invoke a new Nanobar object when using RequireJS. Here is an example implementation:

    var Nanobar = require('nanobar') 
    var nanobar = new Nanobar();
    nanobar.go(50)
    

    The result is Uncaught TypeError: Nanobar is not a constructor However the following will correctly render nanobar:

    var Nanobar = require('nanobar')
    Nanobar.go(50)
    

    With this implementation, however, I am unable pass options to it (need to set the target)

    bug 
    opened by westonkjones 4
  • Add

    Add "trickle" option.

    With nprogress (my current progress bar of choice) you can .start() the progress bar which will cause it to trickle along indefinetly until you call .done().

    This is extremely handy for representing tasks which are difficult to measure. Is this something that could be added?

    opened by DylanPiercey 4
  • Allow overwrite CSS

    Allow overwrite CSS

    Hi, Thanks for sharing this cool control. I tried a couple of css styles but they didn't work... just wondering if I can/should be able to have the nanobar centered in the div so that it fills in/grows "from the middle" instead of from the left.

    Any ideas appreciated.

    Thanks, Dave G

    enhancement 
    opened by dgerding 4
  • Combine index.js and nanobar.js

    Combine index.js and nanobar.js

    From what I can tell, the difference between index.js and nanobar.js is the addition of

    module.exports = Nanobar;
    

    to the bottom of index.js. (Correct me if I'm wrong.)

    Thoughts on combining the two files? The export could be conditional on whether the exports global variable exists.

    opened by whymarrh 4
  • nanobar doesn't disappear if it's hidden

    nanobar doesn't disappear if it's hidden

    I am using Bootstrap tabs, and inside each tab I have content that is loading via AJAX. Now I'm using nanobars to display the progress of those calls, and everything works fine.

    The problem is that the bars inside the tabs that aren't active don't disappear after reaching 100%.

    Sample (See tabs in the center, happening at least in the moment of writing) http://new.djs-music.com/

    If you click on the pagination links at the bottom you will trigger the nanobar again

    opened by aurbano 4
  • Nanobar is not removed when attached to an element

    Nanobar is not removed when attached to an element

    Hello,

    I have notice, that when the nanobar is attached to an element (div), the created nanobar is not removed from dom, after .go(100), is just hidden. This is annoying, because the bars created are pushing my elements down.

    opened by butchero 3
  • nanobar.go(0)

    nanobar.go(0)

    I want to let nanobar go back to 0 and disapper instead of going to 100 when an ajax request is failed. But when I excute nanobar.go(0) it doesn't make a different

    opened by balthild 3
  • Changes animation timing so bar reset isn't visibile

    Changes animation timing so bar reset isn't visibile

    Really like this idea, wanted to run a small change by you. This commit increases the time before the bar gets the active class when init is called, which means the user doesn't see the bar resetting back to 100% height and 0 width.

    Let me know what you think!

    opened by nlfurniss 3
  • Bump eslint from 2.13.1 to 6.8.0

    Bump eslint from 2.13.1 to 6.8.0

    Bumps eslint from 2.13.1 to 6.8.0.

    Release notes

    Sourced from eslint's releases.

    v6.8.0

    • c5c7086 Fix: ignore aligning single line in key-spacing (fixes #11414) (#12652) (YeonJuan)
    • 9986d9e Chore: add object option test cases in yield-star-spacing (#12679) (YeonJuan)
    • 1713d07 New: Add no-error-on-unmatched-pattern flag (fixes #10587) (#12377) (ncraley)
    • 5c25a26 Update: autofix bug in lines-between-class-members (fixes #12391) (#12632) (YeonJuan)
    • 4b3cc5c Chore: enable prefer-regex-literals in eslint codebase (#12268) (薛定谔的猫)
    • 05faebb Update: improve suggestion testing experience (#12602) (Brad Zacher)
    • 05f7dd5 Update: Add suggestions for no-unsafe-negation (fixes #12591) (#12609) (Milos Djermanovic)
    • d3e43f1 Docs: Update no-multi-assign explanation (#12615) (Yuping Zuo)
    • 272e4db Fix: no-multiple-empty-lines: Adjust reported loc (#12594) (Tobias Bieniek)
    • a258039 Fix: no-restricted-imports schema allows multiple paths/patterns objects (#12639) (Milos Djermanovic)
    • 51f9620 Fix: improve report location for array-bracket-spacing (#12653) (Milos Djermanovic)
    • 45364af Fix: prefer-numeric-literals doesn't check types of literal arguments (#12655) (Milos Djermanovic)
    • e3c570e Docs: Add example for expression option (#12694) (Arnaud Barré)
    • 6b774ef Docs: Add spacing in comments for no-console rule (#12696) (Nikki Nikkhoui)
    • 7171fca Chore: refactor regex in config comment parser (#12662) (Milos Djermanovic)
    • 1600648 Update: Allow $schema in config (#12612) (Yordis Prieto)
    • acc0e47 Update: support .eslintrc.cjs (refs eslint/rfcs#43) (#12321) (Evan Plaice)
    • 49c1658 Chore: remove bundling of ESLint during release (#12676) (Kai Cataldo)
    • 257f3d6 Chore: complete to move to GitHub Actions (#12625) (Toru Nagashima)
    • ab912f0 Docs: 1tbs with allowSingleLine edge cases (refs #12284) (#12314) (Ari Kardasis)
    • dd1c30e Sponsors: Sync README with website (ESLint Jenkins)
    • a230f84 Update: include node version in cache (#12582) (Eric Wang)
    • 8b65f17 Chore: remove references to parser demo (#12644) (Kai Cataldo)
    • e9cef99 Docs: wrap {{}} in raw liquid tags to prevent interpolation (#12643) (Kai Cataldo)
    • e707453 Docs: Fix configuration example in no-restricted-imports (fixes #11717) (#12638) (Milos Djermanovic)
    • 19194ce Chore: Add tests to cover default object options in comma-dangle (#12627) (YeonJuan)
    • 6e36d12 Update: do not recommend require-atomic-updates (refs #11899) (#12599) (Kai Cataldo)

    v6.7.2

    • bc435a9 Fix: isSpaceBetweenTokens() recognizes spaces in JSXText (fixes #12614) (#12616) (Toru Nagashima)
    • 4928d51 Fix: don't ignore the entry directory (fixes #12604) (#12607) (Toru Nagashima)
    • b41677a Docs: Clarify suggestion's data in Working with Rules (refs #12606) (#12617) (Milos Djermanovic)
    • ea16de4 Fix: Support tagged template literal generics in no-unexpected-multiline (#11698) (Brad Zacher)
    • fa6415d Sponsors: Sync README with website (ESLint Jenkins)
    • e1e158b Sponsors: Sync README with website (ESLint Jenkins)

    v6.7.1

    • dd1e9f4 Fix: revert changes to key-spacing due to regression (#12598) (Kai Cataldo)
    • c644b54 Docs: Update README team and sponsors (ESLint Jenkins)

    v6.7.0

    • 312a88f New: Add grouped-accessor-pairs rule (fixes #12277) (#12331) (Milos Djermanovic)
    • 5c68f5f Update: Add 'lexicalBindings' to no-implicit-globals and change messages (#11996) (Milos Djermanovic)
    • 6eaad96 New: Add suggestions API (#12384) (Will Douglas)
    • b336fbe Fix: indent rule with JSX spread props (#12581) (Nathan Woltman)
    • 97c745d Update: Report assignment expression location in no-cond-assign (#12465) (Milos Djermanovic)
    • 0f01f3d Update: Check member expressions with this in operator-assignment (#12495) (Milos Djermanovic)
    • 62c7038 Fix: invalid token checking in computed-property-spacing (fixes #12198) (#12533) (YeonJuan)
    • 4f8a1ee Update: Add enforceForClassMembers option to no-useless-computed-key (#12110) (ark120202)
    ... (truncated)
    Changelog

    Sourced from eslint's changelog.

    v6.8.0 - December 20, 2019

    • c5c7086 Fix: ignore aligning single line in key-spacing (fixes #11414) (#12652) (YeonJuan)
    • 9986d9e Chore: add object option test cases in yield-star-spacing (#12679) (YeonJuan)
    • 1713d07 New: Add no-error-on-unmatched-pattern flag (fixes #10587) (#12377) (ncraley)
    • 5c25a26 Update: autofix bug in lines-between-class-members (fixes #12391) (#12632) (YeonJuan)
    • 4b3cc5c Chore: enable prefer-regex-literals in eslint codebase (#12268) (薛定谔的猫)
    • 05faebb Update: improve suggestion testing experience (#12602) (Brad Zacher)
    • 05f7dd5 Update: Add suggestions for no-unsafe-negation (fixes #12591) (#12609) (Milos Djermanovic)
    • d3e43f1 Docs: Update no-multi-assign explanation (#12615) (Yuping Zuo)
    • 272e4db Fix: no-multiple-empty-lines: Adjust reported loc (#12594) (Tobias Bieniek)
    • a258039 Fix: no-restricted-imports schema allows multiple paths/patterns objects (#12639) (Milos Djermanovic)
    • 51f9620 Fix: improve report location for array-bracket-spacing (#12653) (Milos Djermanovic)
    • 45364af Fix: prefer-numeric-literals doesn't check types of literal arguments (#12655) (Milos Djermanovic)
    • e3c570e Docs: Add example for expression option (#12694) (Arnaud Barré)
    • 6b774ef Docs: Add spacing in comments for no-console rule (#12696) (Nikki Nikkhoui)
    • 7171fca Chore: refactor regex in config comment parser (#12662) (Milos Djermanovic)
    • 1600648 Update: Allow $schema in config (#12612) (Yordis Prieto)
    • acc0e47 Update: support .eslintrc.cjs (refs eslint/rfcs#43) (#12321) (Evan Plaice)
    • 49c1658 Chore: remove bundling of ESLint during release (#12676) (Kai Cataldo)
    • 257f3d6 Chore: complete to move to GitHub Actions (#12625) (Toru Nagashima)
    • ab912f0 Docs: 1tbs with allowSingleLine edge cases (refs #12284) (#12314) (Ari Kardasis)
    • dd1c30e Sponsors: Sync README with website (ESLint Jenkins)
    • a230f84 Update: include node version in cache (#12582) (Eric Wang)
    • 8b65f17 Chore: remove references to parser demo (#12644) (Kai Cataldo)
    • e9cef99 Docs: wrap {{}} in raw liquid tags to prevent interpolation (#12643) (Kai Cataldo)
    • e707453 Docs: Fix configuration example in no-restricted-imports (fixes #11717) (#12638) (Milos Djermanovic)
    • 19194ce Chore: Add tests to cover default object options in comma-dangle (#12627) (YeonJuan)
    • 6e36d12 Update: do not recommend require-atomic-updates (refs #11899) (#12599) (Kai Cataldo)

    v6.7.2 - November 30, 2019

    • bc435a9 Fix: isSpaceBetweenTokens() recognizes spaces in JSXText (fixes #12614) (#12616) (Toru Nagashima)
    • 4928d51 Fix: don't ignore the entry directory (fixes #12604) (#12607) (Toru Nagashima)
    • b41677a Docs: Clarify suggestion's data in Working with Rules (refs #12606) (#12617) (Milos Djermanovic)
    • ea16de4 Fix: Support tagged template literal generics in no-unexpected-multiline (#11698) (Brad Zacher)
    • fa6415d Sponsors: Sync README with website (ESLint Jenkins)
    • e1e158b Sponsors: Sync README with website (ESLint Jenkins)

    v6.7.1 - November 24, 2019

    • dd1e9f4 Fix: revert changes to key-spacing due to regression (#12598) (Kai Cataldo)
    • c644b54 Docs: Update README team and sponsors (ESLint Jenkins)

    v6.7.0 - November 22, 2019

    • 312a88f New: Add grouped-accessor-pairs rule (fixes #12277) (#12331) (Milos Djermanovic)
    • 5c68f5f Update: Add 'lexicalBindings' to no-implicit-globals and change messages (#11996) (Milos Djermanovic)
    • 6eaad96 New: Add suggestions API (#12384) (Will Douglas)
    • b336fbe Fix: indent rule with JSX spread props (#12581) (Nathan Woltman)
    ... (truncated)
    Commits
    Maintainer changes

    This version was pushed to npm by eslintbot, a new releaser for eslint since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Mulitple bars

    Mulitple bars

    Great plugin 👍

    One little issue I came across is that on page load I hook into all ajax request, to call go(0) and increment that with a timer. When I have like several ajax going, one after the other, not asynchronous.. then multiple bars get created. They all look like they execute at the same time.. but actually its the delay when i set go(100) at the end of one, it spans out to 100% and fades out... while the next request, on the same nanobar variable object calls go(0) and a new html bar gets created on the UI? "under the previous one"

    Then if I got several fast ajax calls, the bar stack under each other.. looks wierd.

    I tried to add flags, is loading, is timer set.. obviously by the time the first ajax finished the next on checks the flag, it says yes the previous call ended, start a new one.

    I would have thought it would just use the same bar?

    opened by ppumkin 4
  • Automatically fill nanobar

    Automatically fill nanobar

    This is an alternative approach to PR #56. Instead of explicitly starting and stopping the nanobar, you simply pass autoRun: true to the instantiation options. The nanobar will then start filling automatically (never reaching 100) until nanobar.go(100) is called.

    opened by onecrayon 0
Material Progress —Google Material Design Progress linear bar. By using CSS3 and vanilla JavaScript.

MProgress.js Google Material Design Progress Linear bar. It uses CSS3 and vanilla JavaScript which doesn't depend on any other libraries. Types and pr

gc 1.5k Nov 30, 2022
ProgressJs is a JavaScript and CSS3 library which help developers to create and manage progress bar for every objects on the page.

ProgressJS ProgressJs is a JavaScript and CSS3 library which helps developers create and manage progress bars for every object on the page. How To Use

usablica 2.4k Dec 30, 2022
Automatically add a progress bar to your site.

PACE An automatic web page progress bar. Demo Documentation Include pace.js and the theme css of your choice on your page (as early as is possible), a

null 15.5k Jan 8, 2023
Dropzone is an easy to use drag'n'drop library. It supports image previews and shows nice progress bars.

Dropzone is a JavaScript library that turns any HTML element into a dropzone. This means that a user can drag and drop a file onto it, and Dropzone wi

Dropzone 17k Dec 30, 2022
Multiple file upload plugin with image previews, drag and drop, progress bars. S3 and Azure support, image scaling, form support, chunking, resume, pause, and tons of other features.

Fine Uploader is no longer maintained and the project has been effectively shut down. For more info, see https://github.com/FineUploader/fine-uploader

Fine Uploader 8.2k Jan 2, 2023
Responsive and slick progress bars

ProgressBar.js Responsive and slick progress bars with animated SVG paths. Use built-in shapes or create your own paths. Customize the animations as y

Kimmo Brunfeldt 7.7k Jan 8, 2023
Slim progress bars for anywhere you want to use

qier-progress is a progress bar. It can be used for some watting time like jump links, request data, and load or upload files and images to give us feedback and reduce our anxiety. Also if you have used nprogress, then you must know what I am talking about ~

chen xin 370 Nov 5, 2022
Very very very powerful, extensible http client for both node.js and browser.

ES-Fetch-API 中文 | English Very very very powerful, extensible http client for both node.js and browser. Why should you use ES-Fetch API? Still using a

null 17 Dec 12, 2022
Material Progress —Google Material Design Progress linear bar. By using CSS3 and vanilla JavaScript.

MProgress.js Google Material Design Progress Linear bar. It uses CSS3 and vanilla JavaScript which doesn't depend on any other libraries. Types and pr

gc 1.5k Nov 30, 2022
A set of flat and 3D progress button styles where the button itself serves as a progress indicator

A set of flat and 3D progress button styles where the button itself serves as a progress indicator. 3D styles are used for showing the progress indication on one side of the button while rotating the button in perspective.

Codrops 608 Oct 19, 2022
📈 A small, fast chart for time series, lines, areas, ohlc & bars

?? μPlot A small (~35 KB min), fast chart for time series, lines, areas, ohlc & bars (MIT Licensed) Introduction μPlot is a fast, memory-efficient Can

Leon Sorokin 7.5k Jan 7, 2023
一个基于node.js,express,socket.io的websocket非常棒的聊天室,代码简单很适合新手. A very nice websocket chat room based on node.js, express, socket.io. the code is simple, very suitable for novices

来来往下看,虽然教程又臭又长但是一步步地保姆式教学很简单的,毕竟我是真菜鸟嘛,当然什么都往细了说╮(╯_╰)╭ 一、使用方法 该教程内容所有指令都为Linux CentOS 7.x环境下指令,其他平台请您自行查询(⊙x⊙;) 1.下载node.js并下载Sakura_Chat_Room node.j

樱樱怪 10 Jul 21, 2022
Easy and simple twitch bot in node.js.. very very easy..

How It Works identity: { username: 'YOUR BOTS USERNAME', <-- This is where you place the username that you gave the bot account password: '

Ventispurr 3 Dec 18, 2021
An exercise in building a very minimal (and very stupid) in-memory SQL-like database for educational purposes.

Stupid Database This is an exercise in building a very minimal (and very stupid) in-memory SQL-like database for educational purposes. None of this co

Fabio Akita 196 Dec 20, 2022
A Very Good Documentation Site created by the Very Good Ventures Team 🦄

Very Good Docs Site Developed with ?? by Very Good Ventures ?? A Very Good Docs Site created by the Very Good Ventures Team. Generated by the Very Goo

Very Good Open Source 8 Nov 2, 2022
Simple patch that adds a 'progress' callback to jquery Ajax calls

Jquery Ajax Progresss A simple patch to jQuery that will call a 'progress' callback, using the XHR.onProgress event Usage Simply include the script on

Chad Engler 118 Sep 8, 2022
A very lightweight and chatbot with multi language support

A very lightweight and chatbot with multi language support

Artificial Intelligence 6 Jul 25, 2022
A very lightweight and flexible accessible modal dialog script.

A11y Dialog This is a lightweight (1.3Kb) yet flexible script to create accessible dialog windows. Documentation ↗ Demo on CodeSandbox ↗ Features: Clo

Kitty Giraudel 2.1k Jan 2, 2023
A form management library for SolidJS that is very lightweight and simple!

solform A form management library for SolidJS that is very lightweight and simple! Why solform Very easy, fast, lightweight and powerful! It has built

Okan YILDIRIM 16 Nov 15, 2022