简洁实用的jQuery进度条插件

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

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

tx000303.png

在线预览 下载

使用方法

在页面中引入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>
AI 代码解读

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

<div class="skillbar html">
  <div class="filled" data-width="90%"></div>
  <span class="title">HTML</span>
  <span class="percent">90%</span>
</div>
AI 代码解读

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

$(document).ready(function () {
   
    $(".skillbar").skillbar();
});
AI 代码解读

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

$(document).ready(function () {
   
    $(".skillbar").skillbar({
   
        speed: 1000,
        bg : "#008080"
    });
});
AI 代码解读
目录
打赏
0
12
12
0
53
分享
相关文章
|
11天前
jQuery+Slick插件实现游戏人物轮播展示切换源码
jQuery+Slick插件实现游戏人物轮播展示切换源码
33 14
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
64 21
|
29天前
|
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
44 9
简单易用的jquery响应式轮播图插件ma5slider
ma5slider是一款简单易用的jquery响应式轮播图插件。该轮播图支持鼠标拖拽,可以通过CSS定制外观,支持无限循环模式,内置水平,垂直和淡入淡出三种轮播图过渡动画效果。
jQuery文字跑马灯插件Marquee
jQuery.Marquee是一款jQuery文字跑马灯插件。jQuery.Marquee跑马灯插件可以结合使用CSS3动画,制作文字的上下左右移动效果。
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
29 2
jquery和CSS3响应式轮播图插件jcSlider
jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画,它可以和animate.css完美结合,生成60多种轮播图过渡动画效果。
jQuery Lightbox和弹出层插件flashy
Flashy.js是一款响应式jQuery Lightbox和弹出层插件
jQuery消息通知显示插件
MessageNotifyPlugin是一款简单的jQuery消息通知显示插件。该jQuery消息通知显示插件能够自动生成最新消息和提醒消息两个消息通知按钮。并且可以设置消息的是否已读状态等
29 2
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——7.7 技巧:使用进度条微件显示进程的状态
当Web应用程序执行一个动作的持续时间超过大约两秒钟时,为用户显示动作状态是一个很好的做法。如果不知道动作的状态,通常会改变鼠标光标或显示一个旋转的效果。
1882 0