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.
with a component that looks like,
public workoutProgress: string = '0' + '%';
// 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,
background-color: color($colors, description);
box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
background-color: color($colors, primary);
transition: width .4s ease-in-out;