Loading Spinner

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

---

import time
import panel as pn
import holoviews as hv
import numpy as np

pn.extension(loading_spinner='dots', loading_color='#00aa41', sizing_mode="stretch_width")

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.

Using the pn.param.set_values context manager we can set the loading parameter to True while we perform some computation (here simulated using time.sleep:

button = pn.widgets.Button(name="Update", margin=(0, 32, 0, 57), button_type="primary")

def random_plot():
    return hv.Points(np.random.rand(100, 2)).opts(
        width=400, height=400, size=8, color="#838383")

hv_pane = pn.pane.HoloViews(random_plot())

def update(event):
    with pn.param.set_values(hv_pane, loading=True):
        time.sleep(1.5)
        hv_pane.object = random_plot()
    
button.on_click(update)

component = pn.Column(button, hv_pane)
component

App

Lets wrap it into nice template that can be served via panel serve loading_spinner.ipynb

pn.template.FastListTemplate(
    site="Panel", 
    title="Loading Spinner", 
    main=[
        """**Every pane, widget and layout provides the `loading` parameter**.\n\nWhen 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.\n\nUsing 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.""",
        component
    ], main_max_width="768px",
).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).