YJL

When I first saw nanobar last month, my mind made two connections, even the bar in the demostration is black:

1. YouTube

   You should have seen it, that red progress bar:

   

2. A battery monitor program for X Window

   Which renders a red bar at top edge of screen, I couldn’t remember the name of it.

By no means that I am saying it’s a copycat since YouTube definitely isn’t the first one, that battery monitor might not be the first one, either. It’s simply just a good idea to put a progress up there.

I wrapped up a simple example code, and it’s a copycat of YouTube-style:

<style>
.nanobar {
  height: 2px !important;
}
</style>
<script>
var nanobar = new Nanobar({bg: '#b91f1f'});
var pct = 0.0;
setInterval(function(){
  pct += 0.1;
  nanobar.go(pct);
  if (pct > 100.0) {
    pct = 0.0;
  }
}, 25);
</script>

This library is only about 730 bytes and jQuery isn’t required, works for IE8+ and others, written by Jacobo Tabernero and licensed under the MIT License.