Circular progress bar / gauge in anvil


Just want to share instruction of how to display circular progress bars in anvil.
Please look at the like app here

Working examples are found here Examples - Circle Progress

All credits goes to Tigrr

Step by step guide:
1, Go to and copy all the source code.
2, Inside anvil, Add a new asset => select Javascript file as file type => name the file progressbar.js
3, paste the copied source code inside progressbar.js
4, Click on Native Libraries and add the following code:

<script src="_/theme/progressbar.js"></script>

5, Add a new Form => select Custom HTML
6, On the right side, at the Properties tab, find the EDIT button to edit the HTML code and paste the following code:

<div class="pb"></div>

    const _pb = new CircleProgress('.pb', {
    	max: 100,
    	value: 60,

7, Open up the main (startup form) and drag and drop the newly created form (custom HTML) into the page.

Link to anvil projekt

After some errors with multiple html forms inside a form i reworked the code a bit. The project below does not use a custom html form.
Now we add the widget with python code inside the form_show method.

from ._anvil_designer import ProcessbarFormTemplate
from anvil import *
import anvil.js
from anvil.js.window import CircleProgress
import time
import random

class ProcessbarForm(ProcessbarFormTemplate):
    def __init__(self, **properties):
        # Set Form properties and Data Bindings.

        # Any code you write here will run before the form opens.

    def form_show(self, **event_args):
        self.obj = anvil.js.get_dom_node(self.spacer_1) #for some reason it only works with spacer and column_panel
        time.sleep(1) #dont know why the sleep is necessary
        self._pb = CircleProgress(self.obj, {"max": 100,"value": 60})

    def timer_1_tick(self, **event_args):
        self._pb['value'] = random.randint(1,100)


Awesome! Thanks for sharing!