Progress#

Download this notebook from GitHub (right-click to download).

import panel as pn
from panel_material_ui import Progress

pn.extension()

The Progress widget displays the progress towards some target based on the current value and the max value. If no value is set or a value of -1 is set the Progress widget is in indeterminate mode and will animate if active is set to True.


Discover more on using widgets to add interactivity to your applications in the how-to guides on interactivity. Alternatively, learn how to set up callbacks and (JS-)links between parameters or how to use them as part of declarative UIs with Param.




Parameters:#


For details on other options for customizing the component see the customization guides.




Core#


    

  • active (boolean): Whether to animate the bar when in indeterminate mode
    • 

  • max (int): The maximum progress value
    • 

  • value (float): The current value towards the progress, set to -1 for an indeterminate state
    • 

  • value_buffer (int): The current buffer value towards the progress (only available when using the buffer variant)
    • 







Display#


    

  • color (str): The color of the bar, one of ‘primary’, ‘secondary’, ‘success’, ‘info’, ‘warning’, ‘danger’, ‘light’, ‘dark’
    • 

  • variant (Literal["determinate", "indeterminate", "buffer", "query"]): The style variant.
    • 







Styling#


    

  • sx (dict): Component level styling API.
    • 

  • theme_config (dict): Theming API.
    • 





The Progress widget can be instantiated with and without a value. If given a value the progress bar will fill according to the progress to the max value which is 100 by default:


progress = Progress(name='Progress', value=20, width=200)
progress







            
            
The progress value can be updated from Python:


progress.value = 80





The Progress can also be instantiated without a value:


indeterminate = Progress(name='Indeterminate Progress', active=True, width=200)
indeterminate







            
            






Styles#


The Progress widget also supports a range of bar colors:


colors = pn.GridBox(ncols=2)

for i, color in enumerate(Progress.param.color.objects):
    colors.extend([color, Progress(width=300, value=10+i*10, color=color)])

colors







            
            
and variants


variants = pn.GridBox(ncols=2)

for i, variant in enumerate(Progress.param.variant.objects):
    variants.extend([variant, Progress(width=300, value=60 if variant in ('buffer', 'determinate') else -1, value_buffer=80,  variant=variant)])

variants







            
            




Controls#


The Progress widget exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:


pn.Row(progress.controls(jslink=True), progress, indeterminate.controls(jslink=True), indeterminate)







            
            


Download this notebook from GitHub (right-click to download).