xxl-progress
TypeScript icon, indicating that this package has built-in type declarations

1.2.1 • Public • Published

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)

Readme

Keywords

Package Sidebar

Install

npm i xxl-progress

Weekly Downloads

1

Version

1.2.1

License

ISC

Unpacked Size

72.1 kB

Total Files

8

Last publish

Collaborators

  • b-hole