jQuery图片加载loading加载层动画插件

在线预览   下载

 

ProgressBar.js是一款jQuery图片加载loading加载层动画插件。该插件在图片加载时，为图片添加垂直的图片逐渐显示效果，非常炫酷。

 使用方法

在HTML文件中引入。

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

 HTML结构

< div id="container">

 javascript

普通垂直加载图片效果：

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

使用背景图片：

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