Circular progress bar / gauge in anvil

Howdy,

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

Working examples are found here Examples - Circle Progress

All credits goes to Tigrr

Step by step guide:
1, Go to https://github.com/tigrr/circle-progress/raw/master/dist/circle-progress.min.js 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>

<script>
    const _pb = new CircleProgress('.pb', {
    	max: 100,
    	value: 60,
    });
</script>

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

Link to anvil projekt
https://anvil.works/build#clone:ZIWCPAOEIEFAOADK=X2GLHKN7K7EFWJA2WO3G7LN5

UPDATE
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.
        self.init_components(**properties)

        # 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)

https://anvil.works/build#clone:SHT6TS5U43FI6XDJ=UURHKH7KSXPHNTVXJ5CUSTSA

4 Likes

Awesome! Thanks for sharing!