Why not use transition translate x which is considerably less jerky?

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

you should add npm repo for browserify

Please add version (commented at top) in nanobar.js file when closes a new version

It helps to maintain track of version used

It looks like the release list here: https://github.com/jacoborus/nanobar/releases is out of date. Is there a reason the new releases aren't being tagged on github? I noticed in https://www.npmjs.com/package/nanobar it refers to the newest version as 0.4.0.

Basically my issue was I was trying to use version 0.2.0 when i was looking at the release list which i thought was the newest version, but was actually pretty outdated.

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).

you can try to run your page(http://nanobar.jacoborus.codes/) use ie8 mode

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

I have a heavily async app, and I'm having problems with managing multiple instances of nanobar - (What can I ask for in such a small library)? I like it's simplicity, but maybe adding a lightweight management utility to handle debouncing multiple instantiations?

bower install installs the older version

bower package version 0.2.0, repo version 0.2.3 😞

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.

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.

Hello,

Thank you for an awesome and lightweight preloader. Is it possible to change the speed and if possible looping animation till the page loads. I will use it in Ajax requests.

Thank you.

Hi, I am having trouble customizing nanobar with CSS.

I added the minified JS file and tried to change some of the CSS default values but I can't see them being applied.

I created a JSBin to demonstrate my issue. Am I missing something here?

Thanks!

I have a javascript method which invokes a php function which takes around 4 seconds, well the bar starts loading just when the ajax call returns the value from the PHP function. I'd like the bar to start loading just when the user clicks the JS function call. How can this be achieved.

function jsfunction(){ 
     simplebar.go(10);
     /*ajax call PHP takes around 4 seconds*/
    simplebar.go(100);
}

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?

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?

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:

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?

I love the plugin and that it's independent so that I can load it at the start of the page and add some scripts to slowly increment it until page loads completely and then disappear it,

But I like it as feature to be added to the plugin itself so I can show users that page is still loading,
sample http://github.hubspot.com/pace/docs/welcome/

thanks

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)

Hey @jacoborus great job with nanobar. We have added it to OSSCDN so devs who want to try it out quickly can: http://osscdn.com/#/nanobar

Can you add an method to fetch current completion status of nanobar? Is there a way to do it now in any way?

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

Hi,
Just hoping if its also supported with composer if I was to download it via the command prompt?
Cheers!

not working on ie8.

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...

Some example images would be nice to have in the README and on the main site for the project.

I tried to add the bar in a homepage but it didnt work. Then i tried to test it on a new page but it doesnt work there, too.

my code:

<head>
    <title>nanobar</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>

<body>

        <script language="javascript" type="text/javascript" src="nanobar.min.js"></script>
        <div id="progressbar"></div>
        <script>
            var options = {
                bg: '#acf';
                id: 'progressbar'
            };

            var nanobar = new Nanobar(options);
            nanobar.go(50);
        </script>
</body>
</html>

can you give me a hint whats wrong? Im a beginner and i dont see the problem.

Hello,

I would like to know if its possible to show the progress of the loading bar.
For example:
http://www.tennodrops.com/relics/

I recreated the page above with the Nanobar (the one above conflicts allot(html css build))
But i can't figure out a way to add the percentage numbers inside the bar.

Thankyou

Sometimes it would be useful to change the colour of the nanobar based on a response, perhaps from an AJAX request.

Your bar may be blue whilst running the request, then green on success and red on an error.

Being able to change the colour of the bar (animated?) would be great in this situation.

I propose an API such as:

nanobar.color('#0c6')

https://www.cssscript.com/demo/lightweight-slim-javascript-progress-bar-nanobar/

official demo site is not available
nanobar.jacoborus.codes

Can the % value be added somewhere so the user can see the digit.

Just wondering if you could tag with a version so we can track when it has changed?

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

Add Bower, NPM version badges to README.

Hi, is it possible to change color of progress bar via

var nanobar = new Nanobar( { barCss: {'background-color': 'green'  } );

I dont want to have it in less file.