Qt’s powerful stylesheet system can make your boring progress bars look really cool.
Screenshot:
Here’s the code:
QProgressBar {
border: 1px solid black;
text-align: top;
padding: 1px;
border-bottom-right-radius: 7px;
border-bottom-left-radius: 7px;
background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,
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 #78d,
stop: 0.4999 #46a,
stop: 0.5 #45a,
stop: 1 #238 );
border-bottom-right-radius: 7px;
border-bottom-left-radius: 7px;
border: 1px solid black;
}
And here’s the .ui file you can open in Designer (right-click that link and choose “Save as…”).
Happy hacking!
November 12th, 2009 at 9:09 pm
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%