• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

aaronlumsden/Material-Preloader: A jQuery plugin that recreates the Material Des ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

aaronlumsden/Material-Preloader

开源软件地址(OpenSource Url):

https://github.com/aaronlumsden/Material-Preloader

开源编程语言(OpenSource Language):

CSS 66.0%

开源软件介绍(OpenSource Introduction):

Material Design Preloader!s

A jQuery plugin that recreates the Material Design preloader (as seen on inbox).

materialPreloader.js

I was fascinated when I first saw the preloader for Google's inbox website so I thought I'd recreate it and turn it into a plugin so that others can use it in their app or website.

How to use

Make sure you have jQuery included and include 'materialPreloader.js' after jQuery.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="materialPreloader.js"></script>

You also need to include 'materialPreloader.css'.

<link rel="stylesheet" type="text/css" href="css/materialPreloader.css">

You can then instantiate the plugin along with its options (if required).

<script type="text/javascript">

 preloader = new $.materialPreloader({
        position: 'top',
        height: '5px',
        col_1: '#159756',
        col_2: '#da4733',
        col_3: '#3b78e7',
        col_4: '#fdba2c',
        fadeIn: 200,
        fadeOut: 200
    });
 
</script>

You can then call the following functions to turn the preloader on & off

 preloader.on();
 preloader.off();

materialPreloader Options

Option Required Description Options Default
position No Position to place the preloader top/bottom bottom
height No The height of the preloader bar any length 5px
col_1 No Color 1 option any color #159756
col_2 No Color 2 option any color #da4733
col_3 No Color 3 option any color #3b78e7
col_4 No Color 4 option any color #fdba2c
fadeIn No Speed in milliseconds any speed 200
fadeOut No Speed in milliseconds any speed 200

Browser Support

  • Chrome
  • Safari
  • Firefox
  • Not tested in IE



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap