Hi
Does anybody know if it is even possible to design a custome shaped progress bar? If I have a black human shape, is it possible to “fill it” with another color, depending on some extern factors? Ex: completing 5 equal tasks. After completing the first one the shaped will be 20 percent covered with red color.
Thank you for your advices!
Maybe using ng-class and check if the tasks.completed value is equal to X, then apply red color. If equal to Y, then apply blue color, etc?
I decided to try and figure this out in a codepen, maybe this is what you need: http://codepen.io/brandyshea/pen/PwLNXE
Wow, brandyshea, this looks great! I’ll give it a try as soon as I’ll get some free time. Thank you very much! You guys are really great here at Ionic!
Hy @brandyshea!
I am trying to implement your solution in my code. I do have a problem (due to my lack of experience with Sass).
Where should I implement the CSS code you used? I am assuming (after trying without success) that I shouldn’t write it directly in my custom css file. I was trying to add the code in ionic.app.scss file, without success.
Can you help me please? Thank you!
Later edit: it seems that the problem appears because of progress-bar class. The icon doesn’t appear at all when this class is present. If I remove the class the icon appear, but there is no animation on it whatsoever.
Later edit2: It seems like the “unquote” function for selecting the color (or the “ramdom” function, I’m not sure) is not working on my side. If I hardcode a color (ex red) everything works fine. Thank you again for your help!
Sorry about that. I was messing around with Sass later on. The initial codepen example for this post didn’t have random colors. Glad you got it working though. 
Hi again @brandyshea
I am sorry to bother you again about this subject, but I have another problem. I’ve implemented the code and all works fine when I use Chrome, but when I install the app on the phone (or when I run it on emulator) the picture does not show up. Any idea why?
Later Edit: I’ve isolated the problem. It is the font that is not randered. When I’ll try with some ionic built in font (ev ion-navicon) then classes “progress-bar task-{{task}}” works without problem. I am not sure why “fa fa-male” is not accepted by the phone or by the emulator, but gets accepted by the browser…
Later Edit 2: I’ve solved (at least temporary) the issue by replacing font awesome with ionicons (‘icon icon-man’ instead for ‘fa fa-male’). It does not look as good, but it works.
Here is how I declare my CSS files in index.html:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="css/ionic.app.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
Is it something I am missing(wrong order maybe, or should I download font-awesome instead of running it remote)?
Many thanks for your time!
Jao
I don’t know why the font isn’t working remotely, it would require some debugging. I have it downloaded and stored in the www/lib/ folder - you will need the css folder and the fonts to do this. I would try it this way to see if calling it remotely is the problem.
Anyway to do this in ionic creator?