Customize Loading Icon#

This guide addresses how to customize the loading icon.

All components also have a loading parameter which indicates that they are currently processing some event. Setting the parameter will display the global loading_spinner on top of the component.

First, let’s configure the style and color of loading spinner:

  • pn.config.loading_spinner: The style of the global loading indicator, e.g. ‘arc’, ‘arcs’, ‘bar’, ‘dots’, ‘petal’.

  • pn.config.loading_color: The color of the global loading indicator as a hex color or color name, e.g. ‘#6a6a6a’, ‘black’.

import panel as pn

pn.config.loading_spinner = 'petal'
pn.config.loading_color = 'black'

If we are working in a notebook, we can now activate the panel extension after having set the config parameters. Alternatively, we could have set the config with pn.extension(loading_spinner='petal', loading_color='black')


pn.extension() # for notebook





Next, let’s display a simple component and set loading=True:


pn.pane.HTML(styles={'background': '#00aa41'}, width=100, height=100, loading=True)










Attention


Setting the loading icon may not appear to function properly on this page due to incompatibility with the tooling specific to the documentation.