ProgressBar.js - jQuery圖片加載loading加載層動畫插件

ProgressBar.js插件簡介

ProgressBar.js是一款jQuery圖片加載loading加載層動畫插件。該插件在圖片加載時，為圖片添加垂直的圖片逐漸顯示效果，非常炫酷。我們看一下ProgressBar.js效果圖如下：

ProgressBar.js插件使用方法

<link rel="stylesheet" type="text/css" href="../src/progressbar.css">
<script type="text/javascript" src="../src/jquery.min.js"></script>     
<script type="text/javascript" src="../src/jquery.progressbar.js"></script>     

1、 HTML結構

<div id="container">
 
</div>
 javascript

2、普通垂直加載圖片效果：

var myProgress = $("#example").progressBar({
    imageUrl: 'image.png',
    imageHeight: 300,
    imageWidth: 250
});

3、使用背景圖片：

var myProgress = $("#example").progressBar({
    imageUrl: 'image.png',
    imageHeight: 300,
    imageWidth: 250,
    backgroundImageUrl: 'bg.png',
    backgroundOpacity: 1
});