Progress Bar in ionic2

Ionic Framework ionic-v3
1

Is there any standard or plugins to show the progress bar in ionic2? like a progress bar shows how many percent of downloading progress.

Thanks

2 Likes
2

Hey man. I havent found any standard and I tried using the HTML5 progress element to no avail. This is a bit late, but hopefully it helps.

I hadn’t seen anything to suggest that they were working on it, so I started one on my own that you could use to start yourself off.

I started with an HTML5 progress bar native element, but had trouble styling it. For some reason the hidden elements that it creates (-webkit-progress-value…) would not style. So I feel back to following this guide.

image
Screen Shot 2016-11-23 at 4.18.35 PM.png770×130 10.4 KB

I came up with this progress bar for myself. The code looks a bit like this.

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

with a component that looks like,

  public workoutProgress: string = '0' + '%';
 
updateProgress(val) {
 // Update percentage value where the above is a decimal
  this.workoutProgress = Math.min( (val * 100), 100) + '%';
}

Hope this helps. The style guide I use is,

    .progress-bar {
    background-color: color($colors, description);
    height: 20px;
    width: 80%;
    padding-top: 2px;
    padding-bottom: 1px;
    padding-left: 2px;
    padding-right: 2px;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 10px;
    margin-bottom: 10px;
    box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
    border-radius: 5px;

    span {
        text-align: center;
        display: inline-block;
        height: 100%;
        border-radius: 3px;
        box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
        background-color: color($colors, primary);
        transition: width .4s ease-in-out;    
    }
}
6 Likes
3

Oh, it’s great. I am not working on it any more, but I will send this code to my colleague. Thank you so much @thielcole

4

Thank you ! I will use it in my project

5

Does this still work? I am getting - inline template:7:2 caused by: Failed to execute 'setAttribute' on 'Element': ']' is not a valid attribute name. on trying to set width programmatically. Anyone knows any other way?

6

Nevermind. simple error in my code. Thanks

7

thanks, it help me a lot.