LoadingSpinner#

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

import panel as pn
from panel_material_ui import LoadingSpinner

pn.extension()

The LoadingSpinner acts both as a boolean indicator (if used using the indeterminate variant) and as a numeric indicator (using the determinate variant) providing a visual representation of the loading status. If the value is set to True the spinner will rotate while setting it to False will disable the rotating segment in indeterminate mode.


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#


    

  • value (boolean): Whether the indicator is spinning or not.
    • 

  • variant (Literal["determinate", "indeterminate"])
    • 







Display#


    

  • bgcolor (Literal['light', 'dark'] | None): The color of spinner background segment, either ‘light’, ‘dark’ or None.
    • 

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

  • label (str): A label to display alongside the spinner.
    • 

  • size (int): The size of the spinner in pixels.
    • 

  • thickness (float): The thickness of the loading spinner.
    • 

  • with_label (boolean): Whether to show a label inside the loading spinner (when using the ‘determinate’ variant).
    • 







Styling#


    

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

  • theme_config (dict): Theming API.
    • 







Aliases#


For compatibility with Panel certain parameters are allowed as aliases:


    

  • name: Alias for label
    • 





The LoadingSpinner can be instantiated in a spinning or idle state:


idle = LoadingSpinner(value=False, label='Idle...', color='primary')
loading = LoadingSpinner(value=True, size=20, label='Loading...', color='primary')

pn.Row(idle, loading)







            
            
The LoadingSpinner indicator also supports a range of spinner colors and backgrounds:


grid = pn.GridBox(*[' ']+LoadingSpinner.param.color.objects, nrows=4)

for bgcolor in LoadingSpinner.param.bgcolor.objects:
    grid.append(bgcolor or 'None')
    for color in LoadingSpinner.param.color.objects:
        spinner = LoadingSpinner(size=50, value=True, bgcolor=bgcolor, color=color)
        grid.append(spinner)

grid







            
            
When using the determinate variant you can use a LoadingSpinner like the Progress element:


values = range(0, 110, 10)

pn.GridBox(*(values), *(LoadingSpinner(value=value, variant='determinate') for value in values), nrows=2)







            
            
In determinate mode you can also enable a label:


LoadingSpinner(value=42, variant='determinate', bgcolor='light', size=60, with_label=True)







            
            


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