Skip to main content
Sign In |
  Help (new window)

Progress Bar

Go Search
Presentation
Progress Bar
Lists
Wiki
Tabs
  

View All Site Content

SSPUG Presentation 8/20/2009 > Progress Bar

 ‭(Hidden)‬ EasyTabs

 Overview

Benefits for Progress Bars

  • Easy to view overall progress
  • Less analysis of what the items status is
  • Pretty and colorful and can match site theme

          vs

Two Types of progress bars available

  • Simple Progress Bar by Christophe
    • Progress is shown by color
    • Can identify which field to show in progress bar
    • Can have a bar, text or a bullet
  • Advance Progress Bar by Peter
    • Integrate status, % complete, and risk all in one view
    • Only in a bar

 How To

 Tasks - Simple Progress Bar
Not Started<SPAN style='width:100%;background-color:Beige;'> Not Started</SPAN><SPAN style='width:100%;font-weight:bold;color:Beige;'> Not Started</SPAN><SPAN><SPAN style='font-size:24px;font-weight:bold;color:Beige;'>•</SPAN> </SPAN>
In Progress<SPAN style='width:100%;background-color:Limegreen;'> In Progress</SPAN><SPAN style='width:100%;font-weight:bold;color:Limegreen;'> In Progress</SPAN><SPAN><SPAN style='font-size:24px;font-weight:bold;color:Limegreen;'>•</SPAN> </SPAN>
Deferred<SPAN style='width:100%;background-color:Gold;'> Deferred</SPAN><SPAN style='width:100%;font-weight:bold;color:Gold;'> Deferred</SPAN><SPAN><SPAN style='font-size:24px;font-weight:bold;color:Gold;'>•</SPAN> </SPAN>
Waiting for Some else<SPAN style='width:100%;background-color:Silver;'> Waiting on someone else</SPAN><SPAN style='width:100%;font-weight:bold;color:Silver;'> Waiting on someone else</SPAN><SPAN><SPAN style='font-size:24px;font-weight:bold;color:Silver;'>•</SPAN> </SPAN>

 Task - Advance Progress Bar
0.Not Started
1-Green0.Not Started<DIV style='position:relative; background-color:Beige; border: 1px solid silver;'><DIV style='font-size:0px; border-top: 14px solid Gainsboro; width:100%;'></DIV><DIV style='position:absolute; top:0px;'></DIV></DIV>
1.Started
10%
1-Green1.Started<DIV style='position:relative; background-color:Beige; border: 1px solid silver;'><DIV style='font-size:0px; border-top: 14px solid ADFF2F; width:10%;'></DIV><DIV style='position:absolute; top:0px;'>10%</DIV></DIV>
1.Started
40%
2-Yellow1.Started<DIV style='position:relative; background-color:Beige; border: 1px solid silver;'><DIV style='font-size:0px; border-top: 14px solid yellow; width:40%;'></DIV><DIV style='position:absolute; top:0px;'>40%</DIV></DIV>
1.Started
75%
3-Red1.Started<DIV style='position:relative; background-color:Beige; border: 1px solid silver;'><DIV style='font-size:0px; border-top: 14px solid red; width:75%;'></DIV><DIV style='position:absolute; top:0px;'>75%</DIV></DIV>
2.On-Hold
50%
1-Green2.On-Hold<DIV style='position:relative; background-color:Beige; border: 1px solid silver;'><DIV style='font-size:0px; border-top: 14px solid Thistle; width:50%;'></DIV><DIV style='position:absolute; top:0px;'>50%</DIV></DIV>
3.Completed
78%
1-Green3.Completed<DIV style='position:relative; background-color:Beige; border: 1px solid silver;'><DIV style='font-size:0px; border-top: 14px solid skyblue; width:100%;'></DIV><DIV style='position:absolute; top:0px;'>100%</DIV></DIV>
4.Closed
50%
1-Green4.Closed<DIV style='position:relative; background-color:Beige; border: 1px solid silver;'><DIV style='font-size:0px; border-top: 14px solid Black; width:100%;'></DIV><DIV style='position:absolute; top:0px;'></DIV></DIV>
  		 

 ‭(Hidden)‬ HTML calculated column ‭[1]‬

 ‭(Hidden)‬ HTML calculated column ‭[2]‬