pure javascript preloader
Simple javascript preloader animation, created to use on Android 2.3.x web apps because of .gif rare behavior.
Add the library to your html
<script src="priloader.js"></script>
Create a to container the preloader
<div id="priloader2"></div>
Add the code
var priloader = new Priloader("priloader2");
// priloader.start() to start spinning & shown
priloader.start();
// priloader.stop() to stop spinning & hide
peiloader.stop();
// default settings
settings = {
size: 48,
bgColor: false,
speed: 3,
className: false,
color: false
}
// your own settgins
settings = {
size: 36,
speed: 3,
className: "myPreloader",
color: "#fc5a17"
}
var priloader = new Priloader("priloader2", settings);
priloader.start();
size
: width(height) of the preloader animation. Min. value: 24, Max. value: 168bgColor
: background color of the preloader container. Set to false as defaultspeed
: animation speed. Min. value: 1, Max. value: 5className
: class to add in the main priloader containercolor
: hex color for the spinner(webview must be support canvas)Add Polymer library to your html
<script src="/bower_components/platform/platform.js"></script>
Import the pri-loader element
<link rel="import" href="/elements/pri-loader.html"/>
Add the pri-loader elements into your html
<pri-loader elid="priloader3" color="#fc5a17" state="spin"></pri-loader>
Change the state attribute to start(or stop) spinning the priloader
<pri-loader elid="priloader3" state="spin"></pri-loader>
<pri-loader elid="priloader3" state="stop"></pri-loader>
elid
: polymer pri-loader unique idstate
: [ stop | spin ] changing this attribute will make the priloader start(or stop) spinningsize
: width(height) of the preloader animation. Min. value: 24, Max. value: 168bgColor
: background color of the preloader container. Set to false as defaultspeed
: animation speed. Min. value: 1, Max. value: 5className
: class to add in the main priloader containercolor
: hex color for the spinner(webview must be support canvas)Demo
<pri-loader color="#fc5a17" state="spin"></pri-loader>
|
|
<pri-loader color="#fc5a17" state="spin"></pri-loader>
|
|
<pri-loader color="#fc5a17" state="spin"></pri-loader>
|
|
<pri-loader color="#fc5a17" state="spin"></pri-loader>
|