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 !!

1 Like

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

1 Like

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)

1 Like

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.