Dynamics CRM 4.0 - Progress Bar

Gayan Perera, 15 November 2010

I was browsing the dynamics forums the other day and saw a post asking about the progress bar in CRM, we created one awhile back; here it is for anyone else that's looking for something similar.

Click here to download a working sample.

What you'll need

• jQuery 1.3.2 
• step.gif
• statusbar.gif - You can get this from the /_imgs/ folder in CRM


function crmProgressBar(id) {
this.bar = $("#" + id);

'height': '23px',
'width': '357px',
'background': 'transparent url(img/statusbar.gif) no-repeat'

'height': '19px',
'width': '1px',
'background': 'transparent url(img/step.gif) repeat-x',
'position': 'relative',
'top': '2px',
'left': '3px'

this.step = function(percentage) {
var width = parseInt((percentage / 100) * 351);
if (width > 351) { width = 351; }

this.bar.find("div").css({ 'width': width + 'px' });


1. Create a new html file
2. Create a new javascript file and copy the above code into it
3. Include a reference to the jQuery javascript library
4. Include a reference to the javascript in your html file
5. Add a "div" tag to the html file and give it an "id"
6. Add another "div" tag inside the "div" you created in step 4. and put a blank space
7. To initialize the progress bar; create a new variable to hold the progress bar, then create a new instance of the progress bar by specifying the "id" of the div you created in step 4.
eg: var progressBar1 = new crmProgressBar("id-of-div");
8. To step/increment the progress bar use the step() instance method
eg: progressBar1.step(10); // will increment to 10%;

<div id="p1">

<script type="text/javascript">
var i = 5;
var cpb = null;

document).ready(function() {
        cpb =
new crmProgressBar("p1");

function increment() {
if (i <= 100) {
            i += 5;
            setTimeout(increment, 1000);
</script></FONT< CODE>