ionic.atlas.progress

Ionic.atlas.progress

An Ionic progress bar for the Ionic header using the uber style

Status

Demo

Ionic Play Demo

Using

Installing via bower

bower install ionic.atlas.progress

Add the following to your index.html:

<link href="lib/ionic.atlas.progress/dist/ionic.atlas.progress.min.css" rel="stylesheet">
<script src="lib/ionic.atlas.progress/dist/ionic.atlas.progress.min.js"></script>

Installing via npm

npm install ionic.atlas.progress

Add the following to your index.html:

<link href="node_modules/ionic.atlas.progress/dist/ionic.atlas.progress.min.css" rel="stylesheet">
<script src="node_modules/ionic.atlas.progress/dist/ionic.atlas.progress.min.js"></script>

Integrate into app

Add the plugin to your app:

angular.module('yourApp', ['ionic', 'atlasProgress'])

Now you can use the directive:

<ion-header-bar class="bar-stable">
    <h1 class="title">Your App Title</h1>
    <atlas-progress class="atlas-progress-positive"></atlas-progress>
</ion-header-bar>

Custom Color

If you want to use a custom color, instead of the Ionic class color scheme, you can do so. Just simply extend the directive with an color attribute:

<atlas-progress color="'#7658f6'"></atlas-progress>

If you at a color attribute and has specified a color with the Ionic class scheme, the color attribute will be used. The Ionic class color scheme will be ignored.

If the color attribute is undefined the specified Ionic class scheme will be used.

Change speed

The speed of the animation has three states:

1. slow
2. default
3. fast

You able to change the speed using the speed attribute:

<atlas-progress speed="2" class="atlas-progress-positive"></atlas-progress>

If no speed attribute is added, the default speed will be used.