Mulitple bars

[p10tyr]

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?

[p10tyr]

So what I did for a workaround for now is use some clever pseudo CSS

.nanobar .bar {
        visibility: hidden;
    }

        .nanobar .bar:first-child {
           visibility: visible;
       }

Which sets all .bar elements invisible always, except the first one. solves my problem and that enough for me.

[pir8radio]

This might be the same issue i came to report.. You can see after every reload the nano bar becomes not so nano.... it grows by 1 bar after every load... how can I stop this? here is it in action: https://explorer.notallmine.net/txsPending/ loads after every 10 seconds... it eventually takes over the whole page with one big loading bar lol

<script> var nanobar = new Nanobar(); setInterval(function () { nanobar.go(65); $('#update_pending').load(location.href + ' #update_pending'); $(document).ajaxComplete(function () { nanobar.go(100); //progress 100 after ajax update complete }); }, 10000); //update every X ms. </script>

[pir8radio]

.nanobar .bar {
visibility: hidden;
}

    .nanobar .bar:first-child {
       visibility: visible;
   }

I added this CSS to "hide" the issue:
.nanobar .bar { position: absolute; top: 0; left: 0; }
But those hidden divs are still building up in the background lol.. could cause issues. @jacoborus any help or advice would be great, i'm not sure what to do here :-)

[pir8radio]

🤷‍♂️