Open In App

PyQt5 – Image bar as Progress Bar

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

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
{
 background-image : url(image.png);
}

This style sheet is used by setStyleSheet method, 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 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
        bar.setValue(70)
  
        # setting alignment to center
        bar.setAlignment(Qt.AlignCenter)
  
        # adding background image to bar
        bar.setStyleSheet(
                          "QProgressBar::chunk "
                          "{"
                          "background-image: url(image.png);"
                          "}"
                          )
  
App = QApplication(sys.argv)
  
# create the instance of our Window
window = Window()
  
# start the app
sys.exit(App.exec())


Output :



Similar Reads

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 - 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 – Background image in Progress Bar
In this article we will see how to set a background image to progress bar. By default there is no background image set to the progress bar, below is how normal progress bar vs progress bar with background image looks like. In order to do so we have to use The CSS style sheet, below is the code for style sheet. QProgressBar { background-image : url(
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
PyQt5 | How to set percentage indicator in middle of Progress Bar ?
In this article we will see how to set the percentage indicator inside the progress bar. When we create a progress bar the percentage indicator is by default is at right hand side of the progress bar i.e outside the progress bar. Below is how normal percentage indicator looks like vs how it look inside it. In order to do this we will do the followi
2 min read
Article Tags :
Practice Tags :