简单的jquery进度条插件

当前位置:主页 > jQuery库 > 布局和界面 > 简单的jquery进度条插件
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
简单的jquery进度条插件
分享:

    插件介绍

    LineProgressbar.js是一款最简单的jquery进度条插件。通过LineProgressbar.js可以创建带动画效果的线性进度条,你可以配置进度条的颜色,高度,圆角等属性。

    浏览器兼容性

    浏览器兼容性
    时间:2017-05-26
    阅读:
简要教程

LineProgressbar.js是一款最简单的jquery进度条插件。通过LineProgressbar.js可以创建带动画效果的线性进度条,你可以配置进度条的颜色,高度,圆角等属性。

使用方法

在页面中引入jquery.lineProgressbar.css和jquery.lineProgressbar.js文件。

<link rel="stylesheet" href="path/to/jquery.lineProgressbar.css">
<script src="path/to/js/circleMagic.js"></script>        
                
HTML结构

使用一个<div>作为进度条的容器。

<div id="progressbar1"></div>          
                
初始化插件

在页面DOM元素加载完毕之后,通过下LineProgressbar()方法来初始化该jquery进度条插件。

$('#progressbar1').LineProgressbar();           
                

配置参数

LineProgressbar.js进度条插件的可用配置参数有:

参数 类型 默认值 描述
percentage int null 定义进度条的百分比数。
ShowProgressCount boolean true 定义是否显示百分比数值。
duration int 1000 定义进度条动画的速度。默认为1000毫秒。可以使用整数值孟获关键字:slowfast
fillBackgroundColor string '#3498db' 定义进度条的背景填充色。
backgroundColor string '#EEEEEE' 定义进度条的背景色。
radius string '0px' 定义进度条的圆角。
height string '10px' 定义进度条的高度。
width string '100%' 定义进度条的宽度。

LineProgressbar.js进度条插件的github地址为:https://github.com/kingRayhan/LineProgressbar

网友评论