Priloader

pure javascript preloader

View the Project on GitHub Urucas/priloader

priloader

Simple javascript preloader animation, created to use on Android 2.3.x web apps because of .gif rare behavior.

Usage

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();

Settings & Defaults

// 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();

Demo






Polymer Usage

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>

Attributes

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>