简洁实用的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>

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"
    });
});
相关文章
|
11天前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
51 21
|
12天前
|
JavaScript
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
43 16
|
7天前
|
JavaScript
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
31 9
|
10天前
|
移动开发 JavaScript 前端开发
简单易用的jquery响应式轮播图插件ma5slider
ma5slider是一款简单易用的jquery响应式轮播图插件。该轮播图支持鼠标拖拽,可以通过CSS定制外观,支持无限循环模式,内置水平,垂直和淡入淡出三种轮播图过渡动画效果。
|
11天前
|
JavaScript 容器
jQuery文字跑马灯插件Marquee
jQuery.Marquee是一款jQuery文字跑马灯插件。jQuery.Marquee跑马灯插件可以结合使用CSS3动画,制作文字的上下左右移动效果。
|
8天前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
20 2
|
8天前
|
JavaScript
jquery和CSS3响应式轮播图插件jcSlider
jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画,它可以和animate.css完美结合,生成60多种轮播图过渡动画效果。
|
11天前
|
JavaScript
jQuery Lightbox和弹出层插件flashy
Flashy.js是一款响应式jQuery Lightbox和弹出层插件
|
10天前
|
JavaScript 容器
jQuery消息通知显示插件
MessageNotifyPlugin是一款简单的jQuery消息通知显示插件。该jQuery消息通知显示插件能够自动生成最新消息和提醒消息两个消息通知按钮。并且可以设置消息的是否已读状态等
17 2
|
6月前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
70 1