Preloaders

Disabled buttons with an amazing animation, linear and circle progress bars.

---

Live Example

---

Usage

Installation

Link to the CSS file if you loaded phonon-base.css only:

<link rel="stylesheet" href="preloaders.css">

Link to the JS file if you loaded phonon-core.js only:

<script src="preloaders.js"></script>

RequireJS Compatible

require(['preloaders'], function(preloader)) {
    preloader('#id').show();
});

Circle progress bars

Place this code inside the .content of your page.

<div class="circle-progress">
    <div class="spinner"></div>
</div>

Negative color

<div class="circle-progress negative">
    <div class="spinner"></div>
</div>

Positive color

<div class="circle-progress positive">
    <div class="spinner"></div>
</div>

Center in the middle of the screen

Add the .center class name.

<div class="circle-progress center">
    <div class="spinner"></div>
</div>

Determinate progress bars

Place this code inside the .content of your page.

<div class="progress">
    <div class="determinate" style="width: 60%;"></div>
</div>

Negative color

<div class="progress negative">
    <div class="determinate" style="width: 60%;"></div>
</div>

Positive color

<div class="progress positive">
    <div class="determinate" style="width: 60%;"></div>
</div>

Indicator with Dialog

Also, there is a indicator with the dialog module.

Show and hide preloaders

phonon.preloader('#my-preloader').show();
phonon.preloader('#my-preloader').hide();