Adding page loading prgress bar


#1

Hello there, I am new on this ionic platform, currently working on a project using the WordPress rest API to pull content from my WordPress site. I want to add a page loading progress bar below the header of the page i want to display the WordPress post, so that users will know that the page is loading and not just seeing a blank page.

Thank you for your anticipated response .


#2

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.

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;    
    }
}