Circular Progress

Hi there!

Here is a new component I started yesterday. Sometimes we need to show progress in a more styled way and that got me thinking about this circular-shaped progress widget.

To Install :arrow_down:

pip install st-circular-progress

Creating an instance

Each circular slider must be initialized by calling the CircularProgress class, which requires the following attributes:

  • Label
  • Value
  • Key
  • size [optional] defaults to “medium”
  • track_color [optional] defaults to “lightgray”
  • color [optional] defaults to “blue”

Example

import streamlit as st
from st_circular_progress import CircularProgress

my_circular_progress = CircularProgress(
    label="Sample Bar",
    value=55,
    key="my_circular_progress").st_circular_progress()

or

my_circular_progress = CircularProgress(
    label="Sample Bar",
    value=55,
    key="my_circular_progress")

my_circular_progress.st_circular_progress()

Updating Values

This widget uses session states and there are two ways of refreshing its state:

  • Use a callback function on your widget causing the change (not the circular progress)
  • Use Re-Run to reload

An update_value() function has been provided to facilitate updating the value of a pre-defined CircularProgress

Example


my_circular_progress.update_values(progress=100)


Links :link::

Sample

Screen-Recording-2023-07-21-at-1

7 Likes

Hey @CarlosSerrano,

This is pretty cool!:fire:

Thanks for sharing!

Thanks @tonykip

1 Like

Really nice, Carlos!

Sharing internally! :fire:

Thanks @Charly_Wargnier !

OMG, just when I need this for my app :star_struck: :fire:

1 Like

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.