Open In App

PyQt5 – Multi colored border to bar of Progress Bar

Last Updated : 22 Apr, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

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 style sheet, below is the code for border style sheet.

QProgressBar
{
border : 1px solid black;
}
QProgressBar::chunk
{
border :3px solid ;
border-top-color : red; 
border-left-color :pink;
border-right-color :green;
border-bottom-color : blue;
}

Below is the implementation.




# 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 background color to window
        # self.setStyleSheet("background-color : yellow")
  
        # 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, 100, 200, 30)
  
        # setting the value
        value = 70
        bar.setValue(value)
  
        # setting alignment to center
        bar.setAlignment(Qt.AlignCenter)
  
        # setting border to progress bar
        # and setting multi colored border to the bar and color
        bar.setStyleSheet("QProgressBar "
                          "{"
                          "border : 1px solid black;"
                          "}"
                          "QProgressBar::chunk"
                          "{"
                          "background-color : yellow;"
                          "border :3px solid;"
                          "border-top-color : red;" 
                          "border-left-color :pink;"
                          "border-right-color :green;"
                          "border-bottom-color : blue;"
                          "}"
                          )
  
  
App = QApplication(sys.argv)
  
# create the instance of our Window
window = Window()
  
# start the app
sys.exit(App.exec())


Output :



Similar Reads

PyQt5 - Multi colored border Progress Bar
In this article we will see how to create multi colored border to progress bar. Below is the representation of normal border progress bar vs multi colored border progress bar. In order to this we have change the color of each border in CSS style sheet, below is the code for border style sheet. QProgressBar { border :5px solid ; border-top-color : r
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 - Changing border of Progress Bar
In this article we will see how to change or set the border to a Progress Bar. By default, PyQt5 provides border to the progress bar but we can change it according to our convenience. Below is how default border progress bar vs styled border progress bar looks like. In order to do this we have to change the CSS style sheet of the progress bar with
2 min read
PyQt5 – Progress Bar with Dotted border
In this article we will see how we can create dotted border to a progress bar. By default the border of progress bar is continuous. Below is the representation of normal border progress bar vs the dotted border progress bar. In order to this we have to change the CSS style sheet, below is the style sheet code which can be used with setStyleSheet me
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 - 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 - Gradient color Bar of Progress Bar
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
2 min read
PyQt5 – Create multi-color border of StatusBar
When we create border of a status bar it is of same color i.e all the edges are of same color. In this tutorial we will see how to create multi-colored borders i.e all the edges are of different color. In order to do this we will use setStyleSheet() method. Syntax : self.statusBar().setStyleSheet("border :5px solid ;" "border-top-color : pink; " "b
2 min read
Article Tags :
Practice Tags :