GithubHelp home page GithubHelp logo

chenzhenyang / fakeloader.js Goto Github PK

View Code? Open in Web Editor NEW

This project forked from joaopereirawd/fakeloader.js

0.0 2.0 0.0 89 KB

fork 自 fakeLoader.js,改成了面向对象的版本,并增加了几个新特性,更好用;原来的属性都兼容。

License: MIT License

CSS 50.86% HTML 14.34% JavaScript 34.80%

fakeloader.js's Introduction

What is fakeLoader.js

fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulate the page preloading effect.

本库fork自fakeLoader.js,并将其改为了面向对象的方式,增加了几个位置相关的特性(主要是各种居中),用起来更方便。

1. Include Styles

Inside <head> tag

<link rel="stylesheet" href="yourPath/fakeLoader.css">

2. Include Folowing Libraries

JQuery reference and the fakeLoader.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">

<script src="yourPath/fakeLoader.min.js">

3. Basic Initialize

Include in bottom of your <body> tag


    <script type="text/javascript">
        var  fakeLoader = new FakeLoader({
                    bgColor:"#e74c3c",
                    spinner:"spinner2",
					width:'20%',
					height:'20%'
                });
			fakeLoader.mask();	
			fakeLoader.hide();
			fakeLoader.mask();
    </script>

可以多次调用mask和hide方法。这里的特性如下: hide调用之前调用了多少次mask就必须调用多少次hide才能隐藏。内部维护的这个次数,不会为负数,也就是说连着调用了100次hide方法,接着调用一次mask方法,mask也会出现。 一般来说,一个页面需要new一个FakeLoader对象。

4. Options

<script type="text/javascript">

var fakeLoader = new FakeLoader({ timeToHide:-1, // Default Time to hide fakeLoader pos:'fixed',// Default Position top:'0px', // Default Top value left:'0px', // Default Left value right:'0px', bottom:'0px', width:'100%', // Default width height:'100%', // Default Height zIndex: '9999', // Default zIndex bgColor: '#2ecc71', // Default background color spinner:'spinner7', // Default Spinner border_radius: '5px', imagePath:'' // Default Path custom image
});
&lt;/script&gt;

配置与官方的JQ版本是一致的,改了几个参数的特性。例如timeToHide=-1时,此参数不管用。不为-1时,不用调用hide方法,mask指定的时间就会消失。

fakeloader.js's People

Contributors

joaopereirawd avatar drawcard avatar okutani-t avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.