炫酷吹风机样式loading进度条插件

当前位置:主页 > jQuery库 > 布局和界面 > 炫酷吹风机样式loading进度条插件
炫酷吹风机样式loading进度条插件
分享:

    插件介绍

    这是一款炫酷吹风机样式loading进度条jquery插件。该吹风机样式loading进度条通过jquery和CSS3动画来构建进度条,用户可以通过调用插件的方式来使用这个Loading特效。

    浏览器兼容性

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

这是一款炫酷吹风机样式loading进度条jquery插件。该吹风机样式loading进度条通过jquery和CSS3动画来构建进度条,用户可以通过调用插件的方式来使用这个Loading特效。

吹风机样式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);
    });
});