Progress bar ionic


hi guys… I am trying to make a progress bar , but i am stuck in how to pass percentage value of loading data from a service… currently I am just presenting loading item using LoadingController

  presentLoadingCustom() {
  let loading = this.loadingCtrl.create({
    spinner: 'hide',
    content: `<div class="cssload-square">                           ////////// this is a custom loading content with CSS styling
          <div class="cssload-square cssload-two">
           </div><div class="text">Please  wait...</div>`,
    cssClass: 'loader'
    return loading;

Which then is being return to the constructor:

    res => { = res;
      loading.dismiss();                //////// dismiss loading once data is loaded
    err => {
      loading.dismiss();               ///////// dismiss loading when there is an error
      let toast = this.loadingfailure(err);        ////// present toast for the error

      toast.onDidDismiss(() => {
   let loading = this.presentLoadingCustom();

Since there is no in built progress bar component in ionic 2 yet , I am trying to implement HTML5 progress element:

  <div class="progress-bar">
  <span [style.width]="progressBar">{{progressBar}}</span>

Is there a way to pass the progress/value/percentage of the service to determine the progress percentage !!


Try this, native angular2 implementation using bootstrap css progress bars. Using in my app and it works pretty well.


They’ll be added to Ionic 2 soon: Originally destined for rc.5 but that milestone has been removed it appears.

Hopefully they’ll be in final.


I have a tutorial on that here:


Hi, can you provide some example!! Or show how to include it to ionic 2 project, thanx


I have followed your example and its good…but still my question stands on how to bind the progressBar property to Loading service…(the percentage value of data loaded from the service)


Same here, your tutorial is about creating a component, not really touching base on how to bind the progress bar to the feedback from the service.


I agree with you @joshmorony


this is my solution

import { Input, Component,trigger, transition, style, animate, state } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

  selector: 'page-progress-bar',
  animations: [
        ':leave', [
          style({transform: 'translateX(0)', 'opacity': 1}),
          animate('1000ms', style({transform: 'translateX(100%)', 'opacity': 0}))
  templateUrl: 'progress-bar.html',
export class ProgressBarPage 

   @Input() showChild: boolean;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
setTimeout(() => {
    }, );

the html of progress bar

<div class="progress-outer">

  <div  *ngIf="showChild"   [@myAnimation] class="progress-inner" ></div>


the css of progress bar. I use some line from @joshmorony . thank you :slight_smile:

page-progress-bar {
    .progress-outer {
         margin:             5px 0;
        position: relative;
        height: 4px;
        display: block;
        width: 100%;
        background-color: map-get($colors, primary);
        border-radius: 2px;
        margin: 0.5rem 0 1rem 0;
        overflow: hidden;

    .progress-inner {
        min-width: 15%;
        white-space: nowrap;
        overflow: hidden;
        padding: 5px;
        border-radius: 10px;
        background-color:  lighten( map-get($colors, airlabtechcolor), 35% );


the parent component:

  selector: 'page-parent',
  templateUrl: 'parent.html',
export class ParentPage {
showParent:boolean = false;

the html:

<div *ngIf='showParent'>
  <page-progress-bar   [(showChild)] ="showParent"   ></page-progress-bar>

  <button color="primary" full ion-button (click)="add()">Add</button>


hi, in your solution, where the data thats passed to progress page to determine what percentage has it reached ??


Hi Josh, I have learnt most of ionic from you. Thanks for awesome tutorials.