Nucleic Photon Magnetizer

    wave-loading

    1.0.0 • Public • Published

    波浪进度指示器

    灵感来自开发者头条介绍的iOS版波浪进度加载指示器,用js仿写了一个。

    动画演示 网页演示

    示例动画

    使用

    • waveLoading.init(options) 初始化
    • waveLoading.draw() 绘制动画
    • waveLoading.setProgress(num) 动画执行过程中控制进度(0 ~ 100)

    配置

    所有选项在init()参数中配置:

    • target 绘制目标,可以是canvas元素或者其选择器,若不设置,会从文档中选择第一个canvas元素作为绘制目标
    • speed 波浪运行速度倍率,默认为1
    • color 全局主题颜色,默认为rgba(40, 230, 200, 1)
    • alpha 全局透明度,默认为1
    • lineWidth 圆形容器的边框宽度,默认为1
    • showText 是否显示进度提示文字(百分比),默认不显示
    • textSize 进度提示文字的大小,默认16px
    • textColor 进度提示文字的颜色,默认为主题色
    • bgColor 文字被波浪动画遮盖时的颜色,默认为白色
    • fontFamily 进度提示文字使用的字体,默认为Helvetica, Tahoma, Arial, STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑", sans-serif
    • fontWeight 进度提示文字的字重,默认为lighter
    • callback 进度完成后执行的回调函数

    计划中

    • 进度改变时平滑移动,带有缓冲效果,而不是现在的生硬上升
    • 波浪平坦程度调节
    • 前后波浪相位差调节
    • 前后波浪速度差调节

    Keywords

    none

    Install

    npm i wave-loading

    DownloadsWeekly Downloads

    3

    Version

    1.0.0

    License

    ISC

    Last publish

    Collaborators

    • newraina