11 comments to “Cool QProgressBar Stylesheet”

1. 

   says: November 12, 2009 at 9:09 pm -#1

   thanks dave,

   that is looking very cool.

   would you know if it is possible to make a gradient for the slider that starts at one color (for example blue for cool)
   and as you increase the slider it will show a gradient that slowly goes to red.

   if i try it just shows the blue to red gradient scaled to the little bit of the progress bar that is visible.

   no worries if you don’t or can’t answer, just thought i’d ask.

   cheers,
   tom

   my try for a horizontal slider:

   QProgressBar {
   border: 1px solid black;
   text-align: top;
   padding: 1px;
   border-top-left-radius: 7px;
   border-bottom-left-radius: 7px;
   background: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1,
   stop: 0 #fff,
   stop: 0.4999 #eee,
   stop: 0.5 #ddd,
   stop: 1 #eee );
   width: 15px;
   }
   QProgressBar::chunk {
   background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,
   stop: 0 #0000ff,
   stop: 1 #ff0000 );
   border-top-left-radius: 7px;
   border-bottom-left-radius: 7px;
   border: 1px solid black;
   }

   but as you can see it shows [blue–>Red| ] on a half full slider
   where i would expect to see[ blue–>purple ]
   and only see [blue———->red] when the value is 100%
2. 

   says: November 12, 2009 at 9:17 pm -#1

   Tom,

   I believe that is not possible. You could do it, but you’d have to do it in your C++ code and update your stylesheet after each progress update using setStyleSheet().

   Let me know what you find out!

   –Dave
3. 

   http://Joe%20D. says: November 30, 2009 at 3:42 pm -#1

   Hey Dave…I worked with you via correspondence at your previous gig and just wanted to wish you the best; I was just googling for any tricks to display greater than 100% in a QProgressBar (not looking very likely without subclassing) and noticed your blog came up near the top of the 2nd page of my results; congrats!
4. 

   http://BA says: December 18, 2009 at 5:09 pm -#1

   Just wondering if you know how to set the style of a progress bar when it’s disabled? I’ve tried QProgressBar::chunk:disabled but that doesn’t seem to work
5. 

   says: December 19, 2009 at 2:50 pm -#1

   BA, have you tried QProgressBar:disabled::chunk?
6. 

   http://BA says: December 21, 2009 at 3:08 pm -#1

   nevermind, found the issue. it was a small typo in my CSS.

   QProgressBar::chunk:disabled is correct
7. 

   says: July 8, 2010 at 8:04 pm -#1

   Hi Dave,

   i realised i never got back to you,

   yes the code wise changing of the colour-slider worked. just needed to calculate the right blend

   it’s in pyqt, but should be easy to read:

   note slider is horizontal with a min value of 0 and max = 20.

   int inValue = getValueFromHeater();
   self.heatProgressBar.setValue(inValue)

   # make the slider show blue to red from left to right
   if( inValue >= 0 ):
   percentage = inValue * 0xFF / 20

   #calculate the blend
   redTo = str(hex(percentage))
   redTo = redTo.replace(‘0x’, ”)
   if( len(redTo) <2 ):
   redTo = "0" + redTo
   blueTo = str(hex(0xFF-percentage))
   blueTo = blueTo.replace('0x', '')
   if( len(blueTo) <2 ):
   blueTo = "0" + blueTo
   if( inValue == 20):
   astyle = "QProgressBar {background-image: url(:/IVD/images/transparent.png); border: 2px solid white; border-radius: 8px; } QProgressBar::chunk:horizontal { border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border: 1px ; background: qlineargradient(x1: 0, y1: 0.5, x2: 1, y2: 0.5, stop: 0 #0000FF, stop: 1 #%s00%s ); }" % (redTo, blueTo)
   else:
   astyle = "QProgressBar {background-image: url(:/IVD/images/transparent.png); border: 2px solid white; border-radius: 8px; } QProgressBar::chunk:horizontal { border-top-left-radius: 4px; border-bottom-left-radius: 4px; border: 1px ; background: qlineargradient(x1: 0, y1: 0.5, x2: 1, y2: 0.5, stop: 0 #0000FF, stop: 1 #%s00%s ); }" % (redTo, blueTo)
   if( inValue == 1):
   astyle = "QProgressBar {background-image: url(:/IVD/images/transparent.png); border: 2px solid white; border-radius: 8px; } QProgressBar::chunk:horizontal { border-top-left-radius: 3px; border-bottom-left-radius: 3px; border: 1px ; background: qlineargradient(x1: 0, y1: 0.5, x2: 1, y2: 0.5, stop: 0 #0000FF, stop: 1 #%s00%s ); }" % (redTo, blueTo)
   self.heatProgressBar.setStyleSheet(QtGui.QApplication.translate("Form", astyle, None, QtGui.QApplication.UnicodeUTF8));

   thanks for you suggestion !
   cheers,
   tom
8. 

   http://Joerg says: April 11, 2011 at 4:33 am -#1

   Hi Dave,

   congrats to this site and topic.

   But, have you ever tried to set a value of less than 4?
   The chunk isn’t rendered correctly anymore.

   Any idea how to solve this problem?

   Cheers, Joerg.
9. 

   says: April 11, 2011 at 6:59 am -#1

   Joerg, it’s true. Because Qt refuses to render a rounded border for rectangles whose size is smaller than the border-radius.
10. 

    http://Bibhu says: June 15, 2011 at 10:39 pm -#1

    Hi Dave,
    Can you help me to create a style sheet so that the progress bar looks like a battery ?

    thanks.
11. 

    http://gedoes says: August 16, 2011 at 7:28 am -#1

    How can i make this in qt4.3?