Open In App

PyQt5 – Dotted border to bar of Progress Bar

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

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
{
border : 3px red;
border-style : dotted;
}

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 dotted border to the bar and color
        bar.setStyleSheet("QProgressBar "
                          "{"
                          "border : 1px solid black;"
                          "}"
                          "QProgressBar::chunk"
                          "{"
                          "background-color : yellow;"
                          "border :3px red;"
                          "border-style : dotted"
                          "}"
                          )
  
  
App = QApplication(sys.argv)
  
# create the instance of our Window
window = Window()
  
# start the app
sys.exit(App.exec())


Output :



Similar Reads

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 - 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 - 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 – Dotted border of Push Button
In this article we will see how to create dotted border to an Push Button. Below is how normal button vs dotted border looks like. In order to do this we have to change the border style from solid to dotted this can be done using style sheet. Syntax : button.setStyleSheet("border-style : dotted;") Argument : It takes string as argument. Action perf
1 min read
PyQt5 - Dotted border of Radio Button
In this article we will see how to create dotted border to the radio button. By default there is no border associated with the radio button although we can create border to it. Also we can edit the style sheet to make dotted border. Below is the representation of normal bordered radio button vs dotted bordered radio button. In order to do this we h
2 min read
PyQt5 - Dotted border indicator in Radio button
In this article we will see how to make dotted border to the indicator of radio button. By default radio button indicator is circular and have solid black border. In order to add dotted border to the indicator of radio button we have to change the style sheet code of indicator associated with the radio button, below is the style sheet code. QRadioB
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 - 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 - 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
Article Tags :
Practice Tags :