Uploaded image for project: 'Jenkins'
  1. Jenkins
  2. JENKINS-69113

[UX] Improve progress bar experience


    • Icon: Improvement Improvement
    • Resolution: Fixed
    • Icon: Minor Minor
    • core
    • 2.446


      Current progress bar do not fit new Jenkins UX.

      (probably code thats partiality responsible for it)

      Such situation creates two issues:

      • accessibility
      • unmatched design


      Most of current UI/UX changes should improve it.
      Current progress bar have one color used for filling without any frame what can serve as middle layer between background. I think it may not deliver the best experience for users with color blind problems, or with bad eye sight. I often have hard time to determine task progress and I need to zoom in my browser.

      Great counterexample is a current click effect in buttons (which I love btw).
      Those buttons add nice feedback for user, by adding this additional frame during clicking. Even if they can have color blind problems, there is nice animation which tells that something got changed.

      Also such improvement can reduce issues similar to this one:

      Old UI style

      There is less to talk about. Current style do not match other components.

      • No rounded edges
      • If we want to use some colors they should match already used ones (for example in status icons)
      • Thin border which serves no purpose
      • It's kind of strange situation when label font is much bigger then bar itself.


      Here is screenshot which may serve as a reference point. I think this will explain much better my idea.

      More here -> https://css-tricks.com/css3-progress-bars/

      Ps. Sorry for my English and lack of specific terminology UI/UX

            mawinter69 Markus Winter
            dumam Bartosz Nowak
            1 Vote for this issue
            3 Start watching this issue