超轻量级、纯JavaScript页面加载进度条

v1.0.0 2020-10-19 03:59 UTC

This package is auto-updated.

Last update: 2024-09-29 05:42:26 UTC


README

超轻量级、纯JavaScript页面加载进度条

状态

GitHub Version License

Github Star Github Fork

JS gzip size

预览

目录

快速开始

有几种选项可供选择

  • 下载最新版本。
  • 克隆仓库: git clone https://github.com/the-muda-organization/nanobar.git
  • 使用 Composer 安装: composer require the-muda-organization/nanobar

包含内容

在下载中,您将找到以下目录和文件,逻辑上组织常见资产,并提供编译和压缩版本。您将看到如下内容

没有依赖项。有关安装指南如何使用的详细信息,请见下文

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

错误和功能请求

有错误或功能请求?在打开新问题之前,请搜索现有和已关闭的问题。如果您的错误或想法尚未得到解决,请打开新问题

安装

  1. 下载并复制文件到您的项目
  2. 将JS添加到您的项目
    <script src="https://example.com/nanobar/1.x.x/nanobar.min.js"></script>

或添加内联脚本(推荐)

    <script>Paste script here</script>
  1. 将nanobar <script> 放在 <body> 标签之后。
  2. 立即使用!

如何使用

Nanobar旨在放置在CDN上并在多个页面上使用。Nanobar的默认背景颜色设置为红色。您可以在JavaScript变量(脚本开始处)中设置您最喜欢的自定义背景颜色。

如果您想在一个页面上更改颜色,请向 <body> 添加 data-nanobar="" 属性。您可以使用CSS中通常使用的任何颜色值(#nanobar{background: something} - 颜色名称,十六进制值,渐变等)。

    <body data-nanobar="#ff8c00">
    <body data-nanobar="blue">
    <body data-nanobar="linear-gradient(to right,#40e0d0,#ff8c00,#ff0080)">

如果您不想更改背景颜色,请不要添加此属性并留空。JavaScript会检查是否有新的背景颜色值 data-nanobar="#ff8c00"

Nanobar已分配ID: <div id="nanobar"></div>

版本控制

Nanobar将在尽可能多的程度上遵循语义版本控制指南。版本号将按以下格式编号: <major>.<minor>.<patch>

变更日志

有关最新版本,请参阅详细的变更日志

团队

行为准则

如果你表现得很好,我们会表现得很好。有关更多详细信息,请参阅我们的行为准则

版权和许可

代码和文档版权所有 2017-2020 The MUDA Organization

代码在MIT许可下发布。