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