简洁实用的jQuery进度条插件

当前位置:主页 > jQuery库 > 表单 > 简洁实用的jQuery进度条插件
 简洁实用的jQuery进度条插件
分享:

    插件介绍

    这是一款简洁实用的jQuery进度条插件。该插件使用简单,通过在页面中放置指定的HTML代码,即可生成带动画效果的进度条。

    浏览器兼容性

    浏览器兼容性
    时间:2018-10-30
    阅读:
简要教程

这是一款简洁实用的jQuery进度条插件。该插件使用简单,通过在页面中放置指定的HTML代码,即可生成带动画效果的进度条。

使用方法

在页面中引入an-skill-bar.css和jquery、an-skill-bar.js文件。

<link href="css/an-skill-bar.css" rel="stylesheet">  
<script type="text/javascript" src="js/jquery.min.js"></script>             
<script type="text/javascript" src="js/an-skill-bar.js"></script>             
                
HTML

该进度条的基本HTML结构如下:

<div class="skillbar html">
  <div class="filled" data-width="90%"></div>
  <span class="title">HTML</span>
  <span class="percent">90%</span>
</div>
                
初始化插件

在页面DOM元素加载完毕之后,通过skillbar()方法来初始化该插件。

$(document).ready(function () {
    $(".skillbar").skillbar();
});
                

你可以在初始化时,指定进度条的动画速度和背景颜色。

$(document).ready(function () {
    $(".skillbar").skillbar({
        speed: 1000,
        bg : "#008080"
    });
});
                

该进度条插件的github网址为:https://github.com/hasanmisbah/an-skill-bar