前端顶部路由导航进度条工具

• xxl-progress
  • 介绍
  • 快速开始
    • 下载依赖
    • 导入依赖
  • 详解
    • 函数
      • el(el:string|HTMLElement)
      • start()
      • to(p?:number)
      • end()
    • 配置

xxl-progress

介绍

这是一个用于 路由导航或者其他类型的页面加载顶部进度条动画的小框架，使用方式非常简单，开始是因为对nprogress不太喜欢，没法绑定到其他位子 比如说我只想在路由的组件上方进行这个进度条动画，然后调整颜色我也不想使用css 并且我一个页面可能有多个地方需要进度条（dance都是某个元素顶部的），所以自己写了一个进度条，向vue或是react等框架都能使用，因为使用的原生js实现的

效果

能够调整颜色 高度 以及在哪里渲染

最上面有一条绿色的 是原本的样子 以及原本的渲染位置

下面蓝色的是自己改的

// 代码如下
let setting ={
	color: {
 		start: '#37d1be',end:"rgb(38 247 214)" 
 		},
 	timing: { "interval": 100 }, 
 	height: '20px' 
}
let progress2 = new Progress(setting )

有可能出现以下问题圆角的时候有空隙

只需要做以下设置

let setting ={
	color: {
 		start: '#37d1be',end:"rgb(38 247 214)" 
 		},
 	width: { radius: false }, 
 	//或者 width: { radius: '0 0 12px 0' }, /** 这是下面效果使用的代码*/
 	timing: { "interval": 100 }, 
 	height: '20px' 
}
let progress2 = new Progress(setting )

效果如下

快速开始

下载依赖

# 使用 npm 
npm i xxl-progress
# pnpm  
pnpm i xxl-progress
# yarn
yarn add xxl-progress

导入依赖

import { Progress } from 'xxl-progress';
// 初始化进度条
let progress  = new Progress()
// 开始进度条动画
progress.start()
setTimeout(()=>{
    // 结束进度条动画
    progress.end()
},1000)
// 若是不使用了记得销毁
// progress.destroy()

基本使用就是这样 一般情况下已经能够满足使用要求

默认设置下 进度条是放在body标签 作为子标签 在body 的最上方

详解

函数

el(el:string|HTMLElement)

设置进度条在哪个元素中使用

start()

开始进度条，进度条会进入一个默认长度

to(p?:number)

让进度条到达某一个进度

end()

结束进度条，进度条会直接跑满然后消失

destroy()

销毁进度条 再调用start 就没有用了 如果想用 请从新 调用 el(document.body)就能继续start 啦

配置

当初始化进度条对象的时候可以使用以下配置

type ProgressSetting = {
    timing?: {
        // 进度条动每一次过度时间
        delay?: number;
        // 进度条自动前进的计时时间
        interval?: number;
        // 是否让进度条自动前进
        auto?: boolean;
    };
    // 进度条挂载的目标元素
    target?: HTMLElement;
    color?: {
        // 进度条左侧的颜色
        start?: string;
        // 进度条右侧的颜色 如果浏览器不支持渐变 就会以end 的颜色为准
        end?: string;
    };
    width?: {
        // 进度条 start 的初始长度 默认20%
        initial?: string;
        // 进度条是否是圆角 默认为 true 如果设置为string 的话 就是 css 值例如'0 0 2px 2px'
        radius?: boolean | string;
        // 进度条自动前进的百分比 小数 默认 0.1
        autoRun?: string;
        // 进度条到达100% 后 后边剩余的长度 默认20%
        end?: string;
    };
    // 进度条的高度
    height?: string;
};

class Progress(setting:ProgressSetting)

说明
状态条有个左右默认长度 也就是 width的initial和end百分比计算是需要减去这两个长度的 百分比长度在这两长度中间

git仓库

如果你觉得可以好用话麻烦动动你的小手给个start吧
gitee仓库
github仓库