For a page I was working on this week I needed a static progress indicator to give a visual representation of the status of a list of projects. I looked at the following progress indicators:

• http://plugins.jquery.com/project/progession
• http://mattberseth.com/blog/2008/07/jqueryui_progressbar_widget.html
• http://mattberseth.com/blog/2008/06/aspnet_ajax_progressbar_contro.html

before I settled on using the indicator I found at http://t.wits.sg/2008/06/20/jquery-progress-bar-11/. I really liked Matt's indicators, but they were a little overkill for what I was trying to do.

Demo | Download

End Product:

jQuery:

    <script type="text/javascript">
        $(document).ready(function() {
            $(".progressBar").progressBar();
        });        
    </script>

HTML Markup:

        <asp:ListView ID="lvWorkItems" runat="server" DataSourceID="ldsWorkItems">
            <LayoutTemplate>
                <table class="yui-grid" cellspacing="0" cellpadding="0">
                    <tr class="hdr">
                        <th>ID</th>
                        <th>Name</th>
                        <th>Percent Complete</th>
                    </tr>
                    <tr id="itemPlaceholder" runat="server" />
                </table>
            </LayoutTemplate>
            <ItemTemplate>
                <tr class='<%# Container.DataItemIndex % 2 == 0 ? "row" : "altrow" %>'>
                    <td><%# Eval("ID")%></td>
                    <td><%# Eval("Name")%></td>
                    <td>
                        <span class="progressBar"><%# Eval("PercentComplete") + "%" %></span>                                                                                    
                    </td>
                </tr>
            </ItemTemplate>
        </asp:ListView>  

I hope this post helps you or at least points you to some other options if this doesn't work for you.

    [dzone]