Open In App

PyQt5 – Gradient color Bar of Progress Bar

Last Updated : 16 Jan, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

In this article we will see how we can create the gradient color to bar of progress bar. Gradient Color : In computer graphics, a color gradient specifies a range of position-dependent colors, usually used to fill a region. For example, many window managers allow the screen background to be specified as a gradient. The colors produced by a gradient vary continuously with position, producing smooth color transitions. Below is how normal bar of progress bar looks vs how gradient color bar of progress bar looks: Style sheet code :

QProgressBar::chunk 
{
background: QLinearGradient( x1: 0, y1: 0,
                             x2: 1, y2: 0, 
                            stop: 0 #000fff,
                            stop: 1 #ff000f );
}

This style sheet is used with the help of setStyleSheet method. 

Python3




# importing libraries
from PyQt5.QtWidgets import *
from PyQt5 import QtCore, QtGui
from PyQt5.QtGui import *
from PyQt5.QtCore import *
import sys
 
 
class Window(QMainWindow):
 
 
    def __init__(self):
        super().__init__()
 
        # setting title
        self.setWindowTitle("Python ")
 
        # setting geometry
        self.setGeometry(100, 100, 600, 400)
 
        # calling method
        self.UiComponents()
 
        # showing all the widgets
        self.show()
 
    # method for widgets
    def UiComponents(self):
 
        # creating progress bar
        bar = QProgressBar(self)
 
        # setting geometry to progress bar
        bar.setGeometry(200, 150, 200, 30)
 
        # set value to progress bar
        bar.setValue(100)
 
        # setting gradient color to bar
        bar.setStyleSheet("QProgressBar::chunk "
                          "{"
                          "background: QLinearGradient( x1: 0, y1: 0,
                                                        x2: 1, y2: 0,
                                                    stop: 0 # 00ffff,
                                                   stop: 1 # ff000f );"
                          "}")
 
# create pyqt5 app
App = QApplication(sys.argv)
 
# create the instance of our Window
window = Window()
 
# start the app
sys.exit(App.exec())


Output :



Similar Reads

PyQt5 - Gradient Color Progress Bar
In this article we will see how we can set gradient color to the progress bar. Below is how normal color progress bar looks like vs the gradient color progress bar looks like. In order to do this we have to change the CSS style sheet, below is the code for style sheet. QProgressBar::chunk { border : 1px solid black; background: QLinearGradient( x1:
2 min read
PyQt5 - Image bar as Progress Bar
In this article we will see how to add image to bar of progress bar. We can set the background image but in order to set image to a bar we have to modify the progress bar chunk CSS, below is how normal background image and background image to a bar looks like. In order to do this below is the CSS style sheet for chunk file QProgressBar::chunk { bac
2 min read
PyQt5 - Translucent Bar of Progress Bar
In this article we will see how to make the bar translucent i.e in between opaque and transparent. The progress bar have two components one is the background which is visible when bar is not at 100% other is the bar which tells the progress, when we make bar translucent the background will be visible. In order to do this we have to change the alpha
2 min read
PyQt5 - Adding border to Bar of Progress Bar
In this article we will see how to add border to the bar of progress bar. Progress bar has basically two parts one is background and other is the bar which changes its size according to the percentage. Below is the representation of normal progress bar vs border to bar of progress bar. In order to add border to bar we have to change the CSS style s
2 min read
PyQt5 - Dotted border to bar of Progress Bar
In this article we will see how to add dotted border to the bar of progress bar. Below is the representation of normal border to bar vs the dotted border to the bar of progress bar. In order to do this we have to change the border style in the CSS style sheet, below is the style sheet code. QProgressBar { border : 1px solid black; } QProgressBar {
2 min read
PyQt5 - Multi colored border to bar of Progress Bar
In this article we see how to create the multi colored border to the bar of the progress bar. Bar is the part of progress bar which indicates the completeness. Below is the representation of border bar of progress bar vs the multi colored bar of progress bar. In order to this we have change the color of each border of bar of progress bar in CSS sty
2 min read
PyQt5 - Skin to Bar of Progress Bar
In this article we will see how to set the skin to the bar of progress bar. Skin is basically a background image but it adjust it self to the size of bar of progress bar. Below is the representation of bar of progress bar with background image and bar of progress bar with skin. In order to do this we have to change the CSS style sheet code of bar o
2 min read
PyQt5 - Background Color of Progress Bar
When we create a progress bar, by default there is no background color set to it, although the bar color is of green. In this article we will see how to set the background color to the progress bar. Below is the representation of normal progress bar vs the progress bar which has background color. In order to do this we have to change the CSS style
2 min read
PyQt5 QProgressBar – How to create progress bar ?
In this article we will see how we can create the progress bar in PyQt5. In order to create progress bar object we will use QProgressBar. A progress bar is a graphical control element used to visualize the progression of an extended computer operation, such as a download, file transfer, or installation. Sometimes, the graphic is accompanied by a te
2 min read
PyQt5 | How to set value of Progress Bar ?
In this article we will see how to set the value of progress bar. Progress bar is basically a bar which is used to visualize the progression of an extended computer operation, such as a download, file transfer, or installation. In order to set value to progress bar we will use setValue method. Syntax : bar.setValue(value) Argument : It takes intege
1 min read
Article Tags :
Practice Tags :