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();
This web page was generated from a Jupyter notebook and not all interactivity will work on this website. Right click to download and run locally for full Python-backed interactivity.

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