炫酷吹风机样式loading进度条插件
源码介绍
这是一款炫酷吹风机样式loading进度条jquery插件。该吹风机样式loading进度条通过jquery和CSS3动画来构建进度条,用户可以通过调用插件的方式来使用这个Loading特效。 在页面中引入jquery和blower-loading.js文件,以及样式文件style.css。 该Loading进度条的基本HTML结构如下: 在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该Loading进度条插件。简要教程
使用方法
<link href="path/to/css/style.css" rel="stylesheet">
<script src='path/to/js/jquery.min.js'></script>
<script src='path/to/js/blower-loading.js'></script>
HTML结构
<div id="loadingContainer">
<div class="loadingbar">
<div class="marker_container">
<div class="marker"></div>
<div class="marker"></div>
<div class="marker"></div>
<div class="marker"></div>
</div>
<div class="filler_wrapper">
<div class="filler">
<span class="value">0%</span>
</div>
</div>
</div>
</div>
初始化插件
$(document).ready(function () {
blower = new LoadingBlower("#loadingContainer");
$("#plus_ten").on("click", function () {
blower.addProgress(10);
});
});
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » 炫酷吹风机样式loading进度条插件
发表评论 取消回复