QProgressbar chunk

medihech

Hi,

I changed the style of my progressbar's chunk. I read the qt documentation and it says I have to customize all the properties of the chunk once it is changed, but I don´t know how to keep the default effect as it is moving like the picture below:

The code is:

ui->progressBar->setStyleSheet("QProgressBar::chunk
{""background-color: #CD96CD;"
"margin: 0px;}");

Thanks.

SimonSchroeder

My guess is that on Windows and macOS Qt will by default use the underlying progress bar from the OS. All the effects will then be built-in. If you change just one simple thing Qt will have to draw the progress bar itself. It might be possible that you will not be able to reproduce the same effect. (For example, I don't know if you can reproduce the subtle glow effect showing that the application is not frozen.)

medihech

@SimonSchroeder

I have tried but I was not sure if there is a parameter or something that I need to setup. Anyway, thanks anyway.

Also, I would like to ask a similar question. I have modified the style of the progress bar as you can see below. I put the text above the progressbar, however it shrunk the progressbar.

 ui->progressBar_3->setStyleSheet("QProgressBar {"
                                  "background-color: #74c8ff;"
                                  "color: #0a9dff;"
                                  "border-style: outset;"
                                  "border-width: 2px;"
                                  "border-color: #74c8ff;"
                                  "border-radius: 7px;"

                                  **"text-align: top;"
                                  "margin-top: 1em**;"
                                  "}"

                                  "QProgressBar::chunk {"
                                  "background-color: #CD96CD;"
                                  "margin: 0px;"
                                  "width: 10px;"
                                  "border-bottom-right-radius: 10px;"
                                  "border-bottom-left-radius: 10px;"
                                  "}");

Thanks in advance.

Gelzone

I think you can set the same radius for both QProgressBar and QProgressBar::chunk. e.g.

QProgressBar {"
"border-radius: 7px;"
"}
QProgressBar::chunk {"
"border-bottom-right-radius: 7px;"
"border-bottom-left-radius: 7px;"
"}

Ingcautious

@bitlife I think to keep the moving effect, you should use this updated stylesheet for the chunk:

ui->progressBar->setStyleSheet(
    "QProgressBar {"
    "    border: 1px solid gray;"
    "    border-radius: 5px;"
    "    text-align: center;"
    "    background: #EEE;"
    "}"
    "QProgressBar::chunk {"
    "    background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, "
    "        stop:0 #CD96CD, stop:1 #EEA9B8);"
    "    width: 20px;"
    "    margin: 0px;"
    "}"
);

This restores the animated effect by simulating it with a gradient. For native animations, avoid customizing the chunk style.