这是一款炫酷吹风机样式loading进度条jquery插件。该吹风机样式loading进度条通过jquery和CSS3动画来构建进度条,用户可以通过调用插件的方式来使用这个Loading特效。
使用方法
在页面中引入jquery和blower-loading.js文件,以及样式文件style.css。
<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结构
该Loading进度条的基本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>
初始化插件
在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该Loading进度条插件。
$(document).ready(function () { blower = new LoadingBlower("#loadingContainer"); $("#plus_ten").on("click", function () { blower.addProgress(10); }); });