当前位置: 代码迷 >> 综合 >> QProgressBar stylesheet
  详细解决方案

QProgressBar stylesheet

热度:51   发布时间:2023-12-08 10:25:52.0

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!

11 Responses to “Cool QProgressBar Stylesheet”

  1. tom Says: 

    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%