PHPackages the-muda-organization/nanobar - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. the-muda-organization/nanobar ActiveLibrary[Utility & Helpers](/categories/utility) the-muda-organization/nanobar ============================= Super lighweight, pure JavaScript page load progress bar v1.0.0(5y ago)751MITHTML Since Oct 19Pushed 1mo ago1 watchersCompare [ Source](https://github.com/the-muda-organization/nanobar)[ Packagist](https://packagist.org/packages/the-muda-organization/nanobar)[ RSS](/packages/the-muda-organization-nanobar/feed)WikiDiscussions master Synced today READMEChangelog (1)DependenciesVersions (3)Used By (0) Nanobar ======= [](#nanobar) Super lighweight, pure JavaScript page load progress bar --- Status ------ [](#status) [![GitHub Version](https://camo.githubusercontent.com/66b1d75fbfb703e9de51f2307b7cf2e199173c27f6e18d7f003c7c20b850843f/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f7468652d6d7564612d6f7267616e697a6174696f6e2f6e616e6f6261722e7376673f7374796c653d666f722d7468652d6261646765)](https://github.com/the-muda-organization/nanobar)[![License](https://camo.githubusercontent.com/23fead763904d0b17e1065428d2a26b38fc705da20aad6f7a50ba1e0336ee62b/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f7468652d6d7564612d6f7267616e697a6174696f6e2f6e616e6f6261722e7376673f7374796c653d666f722d7468652d6261646765)](https://github.com/the-muda-organization/nanobar) [![Github Star](https://camo.githubusercontent.com/1b1291a023305d15ff75f50bb9ac7d1d451c2cbc061c5212751c4dba1f0a70ea/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f7468652d6d7564612d6f7267616e697a6174696f6e2f6e616e6f6261722e7376673f7374796c653d666f722d7468652d6261646765)](https://github.com/the-muda-organization/nanobar)[![Github Fork](https://camo.githubusercontent.com/67f59f0fd5949162764e8010165ab70986c2870d7480e1586cf4a84438e61d17/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f666f726b732f7468652d6d7564612d6f7267616e697a6174696f6e2f6e616e6f6261722e7376673f7374796c653d666f722d7468652d6261646765)](https://github.com/the-muda-organization/nanobar) [![JS gzip size](https://camo.githubusercontent.com/f4b98be32d1309fc74b526d9960359b1289e1096dc63a60010ccf8e6efb0a90e/68747470733a2f2f696d672e626164676573697a652e696f2f7468652d6d7564612d6f7267616e697a6174696f6e2f6e616e6f6261722f6d61737465722f646973742f6e616e6f6261722e6d696e2e6a733f636f6d7072657373696f6e3d677a6970266c6162656c3d4a532b677a69702b73697a65)](https://github.com/the-muda-organization/nanobar/blob/master/dist/nanobar.min.js) --- [View Preview](https://rawcdn.githack.com/the-muda-organization/nanobar/bc45c370a045bb0026cce61b937902ac90dc021f/DEMO.html) --------------------------------------------------------------------------------------------------------------------------- [](#view-preview) --- [![](https://github.com/the-muda-organization/nanobar/raw/master/PREVIEW.jpg?raw=true)](https://github.com/the-muda-organization/nanobar/blob/master/PREVIEW.jpg?raw=true) --- Table of contents ----------------- [](#table-of-contents) - [Status](#status) - [Quick Start](#quick-start) - [What's included](#whats-included) - [Bugs and feature requests](#bugs-and-feature-requests) - [Installation](#installation) - [How to Use](#how-to-use) - [Versioning](#versioning) - [Changelog](#changelog) - [Team](#team) - [Code of Conduct](#code-of-conduct) - [Copyright and License](#copyright-and-license) --- Quick Start ----------- [](#quick-start) Several options are available: - [Download the latest release.](https://github.com/the-muda-organization/nanobar/archive/master.zip) - Clone the repo: `git clone https://github.com/the-muda-organization/nanobar.git` - Install with [Composer](https://getcomposer.org/): `composer require the-muda-organization/nanobar` --- What's included --------------- [](#whats-included) Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this: There are no dependencies. See below for [Installation Guide](#installation) and [How to Use](#how-to-use) ``` nanobar/ │ └─ dist/ │ ├── nanobar.js └── nanobar.min.js ``` --- Bugs and feature requests ------------------------- [](#bugs-and-feature-requests) Have a bug or a feature request? Before opening a new issue search for existing and closed issues. If your problem or idea is not addressed yet, [open a new issue](https://github.com/the-muda-organization/nanobar/issues/new). --- Installation ------------ [](#installation) 1. Download and copy files to your project 2. Add JS to your project: ``` ``` OR add script inline (recommended): ``` Paste script here ``` 3. Place nanobar `` right after opening `` tag. 4. Ready to use! --- How to Use ---------- [](#how-to-use) 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 ``. You can use any color value that is usually used in CSS `#nanobar{background: something}` - color name, hex value, gradients and more. ``` ``` > 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. Nanobar has assigned ID: `` --- Versioning ---------- [](#versioning) Nanobar will be maintained under the Semantic Versioning guidelines as much as possible. Releases will be numbered with the following format: `..` --- Changelog --------- [](#changelog) For last releases see detailed [CHANGELOG](https://github.com/the-muda-organization/nanobar/blob/master/CHANGELOG.md). --- Team ---- [](#team) - [Jakub Muda](https://github.com/jakubmuda) --- Code of conduct --------------- [](#code-of-conduct) We will behave ourselves if you behave yourselves. For more details see our [CODE OF CONDUCT](https://github.com/the-muda-organization/nanobar/blob/master/CODE_OF_CONDUCT.md). --- Copyright and license --------------------- [](#copyright-and-license) Code and documentation copyright 2017-2020 [The MUDA Organization](https://muda.pl). Code released under the [MIT License](https://github.com/the-muda-organization/nanobar/blob/master/LICENSE). --- ### Health Score 36 ↑ LowBetter than 82% of packages Maintenance60 Regular maintenance activity Popularity10 Limited adoption so far Community8 Small or concentrated contributor base Maturity55 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~1988 days Total 2 Last Release 42d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/40349972?v=4)[Jakub Muda](/maintainers/jakubmuda)[@jakubmuda](https://github.com/jakubmuda) --- Top Contributors [![jakubmuda](https://avatars.githubusercontent.com/u/40349972?v=4)](https://github.com/jakubmuda "jakubmuda (25 commits)") --- Tags cssjavascriptlightweightprogress-barstatusbarjavascriptcssJSlightweightprogressprogress barstatusbarmudanojquery ### Embed Badge ![Health badge](/badges/the-muda-organization-nanobar/health.svg) ``` [![Health](https://phpackages.com/badges/the-muda-organization-nanobar/health.svg)](https://phpackages.com/packages/the-muda-organization-nanobar) ``` ### Alternatives [matthiasmullie/minify CSS & JavaScript minifier, in PHP. Removes whitespace, strips comments, combines files (incl. @import statements and small assets in CSS files), and optimizes/shortens a few common programming patterns. 2.0k30.5M336](/packages/matthiasmullie-minify)[stolz/assets An ultra-simple-to-use assets management library 296519.2k8](/packages/stolz-assets)[axy/sourcemap Work with JavaScript/CSS Source Map 24734.1k5](/packages/axy-sourcemap)[sensiolabs/minify-bundle Assets Minifier (CSS, JS) for Symfony & Minify integration in Asset Mapper 5694.9k1](/packages/sensiolabs-minify-bundle)[dkcwd/dkcwd-zf2-munee Zend Framework 2 module leveraging 'munee' an asset optimisation library developed by Cody Lundquist. You can find munee at http://github.com/meenie/munee 102.1k](/packages/dkcwd-dkcwd-zf2-munee) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)