Progress bar ionic

Ionic Framework ionic-v3
1

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><div><div><div><div></div></div></div></div></div>
           <div><div><div><div><div></div></div></div></div></div>
            </div>
          <div class="cssload-square cssload-two">
           <div><div><div><div><div></div></div></div></div></div>
           <div><div><div><div><div></div></div></div></div></div> 
           </div><div class="text">Please  wait...</div>`,
    cssClass: 'loader'
    
  });
    loading.present();
    return loading;
 }

Which then is being return to the constructor:

  jobsData.load().subscribe(
    res => {
      this.jobs = 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(() => {
        this.platform.exitApp();
    })
   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>
</div>

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

1 Like
2

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

https://valor-software.com/ng2-bootstrap/#/

1 Like
3

They’ll be added to Ionic 2 soon: https://github.com/driftyco/ionic/issues/6669. Originally destined for rc.5 but that milestone has been removed it appears.

Hopefully they’ll be in final.

4

I have a tutorial on that here: http://www.joshmorony.com/build-a-simple-progress-bar-component-in-ionic-2/

3 Likes
5

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

6

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
7

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.

8

I agree with you @joshmorony

9

this is my solution


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

@Component({
  selector: 'page-progress-bar',
  animations: [
    trigger(
      'myAnimation',
      [
      transition(
        ':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(() => {
  this.showChild=false;
    }, );
  }
}

the html of progress bar

<div class="progress-outer">

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

</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:


 @Component({
  selector: 'page-parent',
  templateUrl: 'parent.html',
})
export class ParentPage {
showParent:boolean = false;
constructor()
add(){
this.showParent=true;
}
}

the html:

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

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

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

11

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