Loading Indicator

A loading indicator is displayed when your app is retrieving data. This stops users from being able to interact with your app while the server returns data.

Starting and stopping the indicator manually

To start or stop the indicator manually, start by creating an instance of the loading indicator using loading_indicator(), and then call start() or stop() as needed:

from time import sleep

# Create an instance of the loading spinner and store it in a variable
self.loading_indicator = anvil.server.loading_indicator()

# Start and stop the indicator however you wish
self.loading_indicator.start()
sleep(5)
self.loading_indicator.stop()

Here’s a clone link to an example app that demonstrates the behaviour:

Loading indicators for individual components

In some cases, you might want to use a loading indicator to temporarily block user interaction with a specific component or container.

You can do this using a with statement which calls anvil.server.loading_indicator. anvil.server.loading_indicator() can take a component as an argument, so you can use it within a block like the one below to display an indicator over that component:

"""An example function which overlays a indicator on top of the
card_1 component and stops users being able to interact with it"""
def overlay_indicator_on_card_1(self, **event_args):
    # This block takes the component we want to overlay a indicator onto
    # and keeps the indicator there until the inner code is executed
    with anvil.server.loading_indicator(self.card_1):
        anvil.server.call('my_server_function')

Here’s a clone link to an example app that demonstrates using indicators for individual components:

Minimum height

When creating an instance of the loading indicator, you can define its minimum height with the min_height argument:

def start_large_indicator_button_click(self, **event_args):
    """This method is called when the button is clicked"""
    with anvil.server.loading_indicator(self.outlined_card, min_height="50vh"):
        anvil.server.call('foo')

Here’s a clone link to an example app that demonstrates the behaviour:

Customising and styling the loading indicator

For information on changing and/or styling the default loading indicator, see the UI styling documentation.

Do you still have questions?

Our Community Forum is full of helpful information and Anvil experts.