"Progress bars use CSS3 gradients, transitions, and animations to achieve
\n all their effects. These features are not supported in IE7-9 or older
\nversions of Firefox."<\/em><\/li>\n
Let’s start.<\/p>\n
1. Create 100 progress bars using a php loop and a Bootstrap progress bar code<\/a>:<\/strong><\/p>\n It is possible to use other colours and stripes, etc … but I’ll use simplest progress bar. Keep in mind that my outer div is 500px wide as this is the size of a progress bar I wanted.<\/p>\n 2. Crop the progress bars from a web page produces by the above code <\/strong><\/p>\n The simplest way is to use Awesome screenshot<\/a> extension for Chrome, Safari or Firefox. It is also good to cut down the image size with e.g. re-saving it for the web so it would be smaller in size (not resolution).<\/p>\n I ended up with this image (original size can be downloaded here<\/a>):<\/p>\n This can be already the end of the story. The only thing wee need is to use this image as a background of a div and slide up or down based on the percentage we want to show.<\/p>\n 3. Show the progress bar <\/strong><\/p>\n 3.1 Using CSS<\/strong> background-position and AngularJS binding<\/strong> <\/p>\n Each progress bar is 22px high and I multiply it with the percentage I calculate based on how much of the form is filled in. I also use the Math JS in binding for multiplication (maybe there’s a better way but I’m not aware of any). To do this I had to define the Math object in my $scope this way $scope.Math = window.Math; <\/p>\n For some reason the above did not work in IE 8 (which I really care about). Although it apparently works on some web sites. So i decided to slice up the above image in 100 images.<\/p>\n 3.2 Using individual images<\/strong><\/p>\n This is not the optimum solution as for every change there is an Ajax get call to retrieve a desired image. We did this only once in the above example.<\/p>\n This procedure was also explained in a previous post<\/a>.<\/p>\n <!doctype html>\r\n <html>\r\n <head> \r\n <link rel=\"stylesheet\" href=\"lib\/bootstrap\/css\/bootstrap.min.css\">\r\n <script src=\"lib\/bootstrap\/js\/bootstrap.min.js\"><\/script>\r\n <\/head>\r\n <body>\r\n\r\n <div id=\"progress_bar\" style=\"width: 500px; margin: 10px auto 0 auto\">\r\n <?php\r\n for ($i=0; $i<101; $i++) { \r\n echo ' <div class=\"progress\" style<\/span>=\"margin: 2px<\/a>\"<\/span>>\r\n <div class=\"bar\" style=\"width: '.$i.'%\"><\/div>\r\n <\/div>';\r\n } \r\n ?>\r\n <\/div>\r\n <\/body>\r\n <\/html><\/pre>\n![](\"https:\/\/pim.famnit.upr.si\/wp\/wp-content\/uploads\/2021\/11\/progressbar_small_tn.png\")
<\/a><\/p>\n <div style=\"float: left;\">Progress: <\/div>\r\n <div style=\"width: 500px; height: 22px; float: left;\r\n background-image:url('progressbar_small.png'); \r\n background-position:0px -{{Math.round(22*(percentage))}}px;\">\r\n <\/div><\/pre>\n