Circular Progress: Changing the colour after it is created

[dev-artisan]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

from nicegui import ui

progress = ui.circular_progress(value=0.25, color="pink-7")

def change_color(element, color):
    element.classes(f"{color}")

ui.button("Change Color", on_click=lambda: change_color(progress, "green-13"))

ui.run()

Description

Hi, thanks for this magnificent project.

I'm sure the answer maybe obvious, but I can't find an easy way to change the color of the circular_progress element after it was created.

I've resorted to doing something like the below:

from nicegui import html, ui

progress = html.div()


def change_color(element, color):
    element.clear()
    with element:
        ui.circular_progress(value=0.25, color=color)


change_color(progress, "pink-7")

ui.button("Change Color", on_click=lambda: change_color(progress, "green-13"))

ui.run()

A little guidance would be appreciated, thanks.

NiceGUI Version

2.21.0

Python Version

3.12.3

Browser

Other

Operating System

Windows

Additional Context

I'm using WSL, and the browser is Brave

[falkoschindler]

Hi @dev-artisan,

In this case the color is set as a prop:

element.props(f'color={color}')

[dev-artisan]

Awesome thanks, didn't really know how to format props before this, thanks again!