Loading Indicator#
Download this notebook from GitHub (right-click to download).
import time
import panel as pn
import holoviews as hv
import numpy as np
import holoviews.plotting.bokeh
pn.extension(loading_spinner='dots', loading_color='#00aa41', sizing_mode="stretch_width")
hv.extension('bokeh')
Every pane, widget and layout provides the loading parameter. When set to True a spinner will overlay the panel and indicate that the panel is currently loading. When you set loading to false the spinner is removed.
Using the pn.extension or by setting the equivalent parameters on pn.config we can select between different visual styles and colors for the loading indicator.
pn.extension(loading_spinner='dots', loading_color='#00aa41')
We can enable the loading indicator for reactive functions annotated with depends or bind globally using:
pn.param.ParamMethod.loading_indicator = True
Alternatively we can enable it for a specific function by passing the loading_indicator=True argument into pn.panel which returns a ParamMethod/ParamFunction object with the parameter set:
button = pn.widgets.Button(name="UPDATE", button_type="primary")
def random_plot(event):
if event: time.sleep(2)
return hv.Points(np.random.rand(100, 2)).opts(
width=400, height=400, size=8, color="green")
component = pn.Column(button, pn.panel(pn.bind(random_plot, button), loading_indicator=True))
component
App#
Lets wrap it into nice template that can be served via panel serve download_upload_csv.ipynb
description = """
Every pane, widget and layout provides the **`loading` parameter**. When set to `True` a spinner will overlay the panel and indicate that the panel is currently loading. When you set `loading` to false the spinner is removed.
Using the `pn.extension` or by setting the equivalent parameters on `pn.config` we can select between different visual styles and colors for the loading indicator.
```python
pn.extension(loading_spinner='dots', loading_color='#00aa41')
```
We can enable the loading indicator for reactive functions annotated with `depends` or `bind` globally using:
```python
pn.param.ParamMethod.loading_indicator = True
```
"""
pn.template.FastListTemplate(
site="Panel", title="Loading Indicator",
main=[ description, component]).servable();
Download this notebook from GitHub (right-click to download).