Nanobar

Super lighweight, pure JavaScript page load progress bar.

How to use?

Add JS to your project: <script src="nanobar.min.js"></script>

OR add script inline (recommended): <script>Paste script here</script>

Place nanobar <script> right after opening <body> tag.

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

Colors:

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.

Few usefull colors:

red

#007bff

#ffd700

#39ff14

#6610f2

#ff00cc

#b5cc18

#ff9600

#EE82EE

#000

#fff

Example gradients:

linear-gradient(to right,#40e0d0,#ff8c00,#ff0080)

linear-gradient(-45deg,#F0AE00,#F43C78)

linear-gradient(-45deg,#e65c00,#F9D423)

linear-gradient(-45deg,#16A085,#F4D03F)

linear-gradient(to bottom right,#4A4A4A,#2B2B2B)

linear-gradient(to bottom right,#007bff,#339dd6)

linear-gradient(to bottom right,#FF9500,#FC0)

linear-gradient(to bottom right,#FF2A68,#FF5E3A)

linear-gradient(to bottom right,#28a745,#84b42d)

linear-gradient(to right,#1c4dad,#6ca7de)

linear-gradient(to right,#008482,#0DBDBD)

linear-gradient(to right,#ff6e00,#ffbf00)

radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)