Circular progress bar using Tkinter?

Question:

I want to add a Circular progress bar to my Python GUI using Tkinter, but I didn’t find any documentation for Circular progress bars with Tkinter.

How can I create a Circular progress bar in Tkinter or is this not possible?

Asked By: Atalanttore

||

Answers:

Tkinter does not have any support for circular progress bars. You will have to draw your own using a series of images, or a drawing on a canvas.

Answered By: Bryan Oakley

There’s none built-in, but you can create one of your own. Here’s an example of one way of doing it that manually draws and updates the graphics on a Canvas:

try:
    import Tkinter as tk
    import tkFont
    import ttk
except ImportError:  # Python 3
    import tkinter as tk
    import tkinter.font as tkFont
    import tkinter.ttk as ttk


class CircularProgressbar(object):
    def __init__(self, canvas, x0, y0, x1, y1, width=2, start_ang=0, full_extent=360.):
        self.custom_font = tkFont.Font(family="Helvetica", size=12, weight='bold')
        self.canvas = canvas
        self.x0, self.y0, self.x1, self.y1 = x0+width, y0+width, x1-width, y1-width
        self.tx, self.ty = (x1-x0) / 2, (y1-y0) / 2
        self.width = width
        self.start_ang, self.full_extent = start_ang, full_extent
        # draw static bar outline
        w2 = width / 2
        self.oval_id1 = self.canvas.create_oval(self.x0-w2, self.y0-w2,
                                                self.x1+w2, self.y1+w2)
        self.oval_id2 = self.canvas.create_oval(self.x0+w2, self.y0+w2,
                                                self.x1-w2, self.y1-w2)
        self.running = False

    def start(self, interval=100):
        self.interval = interval  # Msec delay between updates.
        self.increment = self.full_extent / interval
        self.extent = 0
        self.arc_id = self.canvas.create_arc(self.x0, self.y0, self.x1, self.y1,
                                             start=self.start_ang, extent=self.extent,
                                             width=self.width, style='arc')
        percent = '0%'
        self.label_id = self.canvas.create_text(self.tx, self.ty, text=percent,
                                                font=self.custom_font)
        self.running = True
        self.canvas.after(interval, self.step, self.increment)

    def step(self, delta):
        """Increment extent and update arc and label displaying how much completed."""
        if self.running:
            self.extent = (self.extent + delta) % 360
            self.canvas.itemconfigure(self.arc_id, extent=self.extent)
            # Update percentage value displayed.
            percent = '{:.0f}%'.format(
                                    round(float(self.extent) / self.full_extent * 100))
            self.canvas.itemconfigure(self.label_id, text=percent)
        self.canvas.after(self.interval, self.step, delta)


    def toggle_pause(self):
        self.running = not self.running


class Application(tk.Frame):
    def __init__(self, master=None):
        tk.Frame.__init__(self, master)
        self.grid()
        self.createWidgets()

    def createWidgets(self):
        self.canvas = tk.Canvas(self, width=200, height=200, bg='white')
        self.canvas.grid(row=0, column=0, columnspan=2)

        self.progressbar = CircularProgressbar(self.canvas, 0, 0, 200, 200, 20)

        self.pauseButton = tk.Button(self, text='Pause', command=self.pause)
        self.pauseButton.grid(row=1, column=0)
        self.quitButton = tk.Button(self, text='Quit', command=self.quit)
        self.quitButton.grid(row=1, column=1)

    def start(self):
        self.progressbar.start()
        self.mainloop()

    def pause(self):
        self.progressbar.toggle_pause()

if __name__ == '__main__':
    app = Application()
    app.master.title('Sample application')
    app.start()

Here’s some screenshots of it running:

screenshots of it running

Answered By: martineau

I dont have enough rep to add a comment but the code that martineau put up as is, does not currently work and you need to change

    if self.running:
        self.cur_extent = (self.cur_extent + delta) % 360
        self.canvas.itemconfigure(self.arc_id, extent=self.cur_extent)

to

    if self.running:
        self.extent = (self.extent + delta) % 360
        self.cur_extent = (self.extent + delta) % 360
        self.canvas.itemconfigure(self.arc_id, extent=self.cur_extent)
Answered By: Atzin

Also @martineau’s code needs to be altered where

self.tx, self.ty = (x1-x0) / 2, (y1-y0) / 2

needs to be changed to

self.tx, self.ty = (x1+x0) / 2, (y1+y0) / 2

so that the label id is actually in the middle

Answered By: Peyton McKee
Categories: questions Tags: , ,
Answers are sorted by their score. The answer accepted by the question owner as the best is marked with
at the top-right corner.