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

xxl-progress

介绍

这是一个用于 路由导航或者其他类型的页面加载顶部进度条动画的小框架 使用方式非常简单

快速开始

下载依赖

# 使用 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()

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

配置

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

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

class Progress(setting:ProgressSetting)