nanobar is a super tiny JavaScript library to create a custom *FAKE* page load progress bar on the top of the page.
How to use it:
1. Download and add the JavaScript nanobar.js to the page.
<script src="nanobar.js"></script>
2. That’s it. To customize the styles of the progress bar, just define the background color in the data-nanobar and then add the attribute to the body tag.
<body data-nanobar="#222"> <body data-nanobar="radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)">
Changelog:
10/18/2020
- v1.0.0
See Also:
Pure CSS Progress Bar Library with Custom Themes – progress-bar.css
Modern TypeScript Progress Bar Library – BProgress
3D Liquid Progress Bar in Pure CSS/CSS3
Easy Scroll Position Tracking – ScrollProgress.js
Visualize Progress Data With Animated, Circular Progress Bars – ProgressJS
Radial Progress Indicator For Click-and-hold Actions – HoldCircleJS
Simple Scroll Progress Indicator For Long Pages – PageBar.js
Generate Linear & Radial Progressbars Using CSS – Progress.css