包简介

Super lighweight, pure JavaScript page load progress bar

README 文档

README

Super lighweight, pure JavaScript page load progress bar

Status

View Preview

Quick Start

Several options are available:

Download the latest release.
Clone the repo: git clone https://github.com/the-muda-organization/nanobar.git
Install with Composer: composer require the-muda-organization/nanobar

What's 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 and How to Use

nanobar/
 │
 └─ dist/
    │
    ├── nanobar.js
    └── nanobar.min.js

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.

Installation

Download and copy files to your project
Add JS to your project:

    <script src="https://example.com/nanobar/1.x.x/nanobar.min.js"></script>

OR add script inline (recommended):

    <script>Paste script here</script>

Place nanobar <script> right after opening <body> tag.
Ready 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 <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.

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

Versioning

Nanobar will be maintained under the Semantic Versioning guidelines as much as possible. Releases will be numbered with the following format: <major>.<minor>.<patch>

Changelog

For last releases see detailed CHANGELOG.

Team

Jakub Muda

Code of conduct

We will behave ourselves if you behave yourselves. For more details see our CODE OF CONDUCT.

Copyright and license

Code released under the MIT License.

the-muda-organization/nanobar 适用场景与选型建议

the-muda-organization/nanobar 是一款基于 HTML 开发的 Composer 扩展包，目前已累计 6 次下载、GitHub Stars 达 7，最近一次更新时间为 2019 年 09 月 20 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「javascript」「css」「JS」「lightweight」「progress」「statusbar」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 the-muda-organization/nanobar 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 the-muda-organization/nanobar 我们能提供哪些服务？

定制开发 / 二次开发

基于 the-muda-organization/nanobar 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 the-muda-organization/nanobar 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

microweber-deps/ziggy 0

Generates a Blade directive exporting all of your named Laravel routes. Also provides a nice route() helper function in JavaScript.

nerds-and-company/css-to-inline-styles-twig-extension 3

A Twig extension to insert css as inline styles with a tag

odan/twig-assets 22

Caching and compression for Twig assets (JavaScript and CSS).

firmaprofesional/js-translation-bundle 0

A pretty nice way to expose your translation messages to your JavaScript.

machy8/google-closure-compiler 5

PHP client for the Google Closure Compiler API in one file.

devgroup/yii2-polyglot 3

Yii2 integration for AirBnB Polyglot.js

the-muda-organization/nanobar

包简介

关键字：