Progress bar with custom shape


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:


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 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!

1 Like

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. :slight_smile:

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="//">
	<link href="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!

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?