Loading Spinners

Introduction

Loading Spinners are visual indicators displayed while a webpage is processing data or waiting for a server response. They inform users that content is being loaded and prevent interactions with incomplete or unavailable elements.

Modern web applications frequently use loading spinners during AJAX requests, API calls, payment processing, file uploads, and dynamic page updates. Attempting to interact with web elements before a loading spinner disappears is one of the most common causes of Selenium test failures.

In Selenium, Loading Spinners are usually handled using Explicit Wait together with invisibility_of_element_located() to wait until the spinner disappears before continuing execution.

In this tutorial, you’ll learn how to handle Loading Spinners using Selenium with Python, along with practical examples, real-world scenarios, common mistakes, and best practices.


What are Loading Spinners?

Loading Spinners are dynamic UI elements that indicate that an application is currently processing or loading information.

Common examples include:

  • Login processing indicators

  • Payment processing animations

  • Product loading indicators

  • Search result loaders

  • Dashboard loading animations

  • File upload progress indicators

Loading Spinners typically appear when:

  • AJAX requests are in progress.

  • API responses are being processed.

  • Dynamic content is being loaded.

  • User actions trigger server-side processing.

Until the spinner disappears, some webpage elements may not yet be available for interaction.


Why Automate Loading Spinners?

Automating Loading Spinners helps you:

  • Improve synchronization.

  • Reduce flaky test cases.

  • Handle dynamic content reliably.

  • Improve automation stability.

  • Validate application workflows.


Common Methods Used

MethodPurpose
WebDriverWait()Waits for dynamic elements and conditions
invisibility_of_element_located()Waits until the loading spinner disappears
find_element()Locates webpage elements
click()Performs user interactions
is_displayed()Verifies element visibility

Example

The following example clicks the Start button, waits for the loading spinner to disappear, and verifies that the dynamically loaded message is displayed successfully.

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC


# Topic: 27. Dynamic Web Elements - Loading Spinners
# Practice site: https://the-internet.herokuapp.com/dynamic_loading/2
# Run: pytest -s 27_examples/test_02_loading_spinners.py
#
# Wait for loading spinners to disappear before interacting with content that
# loads behind them.


def test_loading_spinners():
    driver = webdriver.Chrome()

    try:
        driver.get(
            "https://the-internet.herokuapp.com/dynamic_loading/2"
        )

        driver.find_element(
            By.CSS_SELECTOR,
            "#start button"
        ).click()

        WebDriverWait(driver, 10).until(
            EC.invisibility_of_element_located(
                (
                    By.ID,
                    "loading"
                )
            )
        )

        heading = driver.find_element(
            By.CSS_SELECTOR,
            "#finish h4"
        )

        assert "Hello World!" in heading.text

    finally:
        driver.quit()

Output

Hello World!

The loading spinner disappears successfully, and Selenium verifies that the dynamically loaded message is displayed on the webpage.


Understanding the Code

Import the Required Classes

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

Imports:

  • webdriver for launching and controlling the browser.

  • By for locating web elements.

  • WebDriverWait for synchronization.

  • Expected Conditions for waiting until the loading spinner disappears.

Create the WebDriver

driver = webdriver.Chrome()

Launches a new Chrome browser session.

Open the Practice Website

driver.get(
    "https://the-internet.herokuapp.com/dynamic_loading/2"
)

Opens the webpage containing dynamically loaded content and a loading spinner.

Click the Start Button

driver.find_element(
    By.CSS_SELECTOR,
    "#start button"
).click()

Clicking the Start button triggers the loading process.

During this time:

  • The loading spinner becomes visible.

  • The webpage processes the request.

  • The final content is generated dynamically.

Wait for the Loading Spinner to Disappear

WebDriverWait(
    driver,
    10
).until(
    EC.invisibility_of_element_located(
        (
            By.ID,
            "loading"
        )
    )
)

The WebDriverWait() method waits for a maximum of ten seconds until the loading spinner becomes invisible.

The following Expected Condition is used:

invisibility_of_element_located()

This condition repeatedly checks whether the loading spinner is no longer visible on the webpage.

As soon as the spinner disappears, Selenium immediately continues execution without waiting for the full timeout period.

Locate the Dynamically Loaded Content

heading = driver.find_element(
    By.CSS_SELECTOR,
    "#finish h4"
)

Once the loading spinner disappears, Selenium locates the dynamically generated message displayed on the webpage.

Verify the Loaded Content

assert "Hello World!" in heading.text

The assertion verifies that the expected content was successfully loaded after the loading process completed.

Close the Browser

driver.quit()

Closes the browser and ends the WebDriver session.

This is a recommended practice to ensure that all browser instances are properly terminated after test execution.


Waiting for Loading Spinners

The most commonly used Expected Condition for handling loading spinners is:

EC.invisibility_of_element_located()

Example:

WebDriverWait(driver, 10).until(
    EC.invisibility_of_element_located(
        (
            By.ID,
            "loading"
        )
    )
)

This approach is significantly more reliable than using:

time.sleep()

because Selenium immediately proceeds when the spinner disappears.


Practical Example

Suppose an e-commerce website displays a loading spinner while retrieving products after a search request.

The automation script:

  • Searches for Laptop.

  • Waits for the loading spinner to disappear.

  • Verifies that the product list is displayed successfully.

This validates both the application’s business workflow and the dynamic behavior of the webpage.


Automation Testing Example

Consider an online banking application.

After clicking Login:

  • User credentials are validated.

  • Account information is retrieved.

  • A loading spinner appears.

  • The dashboard loads dynamically.

The automation script:

  • Waits for the loading spinner to disappear.

  • Verifies that the dashboard becomes visible.

  • Continues with the remaining test steps.

Loading Spinners are extremely common in enterprise applications that perform server-side processing.


Real-World Example

Loading Spinners are commonly used in:

  • Banking applications

  • E-commerce websites

  • CRM systems

  • Healthcare portals

  • Airline booking systems

  • Government websites

  • Enterprise web applications

They are particularly useful whenever applications must provide visual feedback during data processing operations.


Advantages of Automating Loading Spinners

  • Improves synchronization.

  • Reduces flaky test cases.

  • Supports dynamic web applications.

  • Improves automation reliability.

  • Validates complete business workflows.


Common Mistakes Beginners Make

Using time.sleep()

Many beginners write:

time.sleep(10)

This unnecessarily slows down automation scripts.

Instead, use:

WebDriverWait()

because Selenium immediately proceeds once the spinner disappears.

Ignoring Loading Indicators

Attempting to locate elements immediately after clicking a button may lead to:

  • NoSuchElementException

  • TimeoutException

  • ElementNotInteractableException

Always wait for loading indicators to disappear before interacting with dynamically loaded elements.

Using Incorrect Expected Conditions

Loading Spinners are most commonly handled using:

invisibility_of_element_located()

Using inappropriate wait conditions may result in unreliable synchronization.

Using Fragile Locators

Always prefer stable locators such as:

  • ID

  • Name

  • CSS Selector

Avoid brittle XPath expressions whenever possible.


Best Practices

  • Use Explicit Wait for Loading Spinners.

  • Prefer invisibility_of_element_located() whenever possible.

  • Avoid unnecessary use of time.sleep().

  • Use stable locators such as ID and CSS Selector.

  • Verify that the expected content is loaded after the spinner disappears.

  • Use reliable synchronization techniques throughout the automation framework.


Conclusion

Loading Spinners are among the most common dynamic elements encountered in modern web applications. Properly synchronizing Selenium with loading indicators significantly improves automation reliability and reduces flaky test cases. Using Explicit Wait together with invisibility_of_element_located() provides an efficient and maintainable approach for handling loading spinners across enterprise-level applications.


Frequently Asked Questions (FAQs)

Which Expected Condition is recommended for Loading Spinners?

The preferred condition is:

invisibility_of_element_located()

Why shouldn’t I use time.sleep()?

time.sleep() always waits for the specified duration, whereas Explicit Wait immediately proceeds once the loading spinner disappears.

Can Loading Spinners appear after AJAX requests?

Yes.

Loading Spinners are commonly displayed while AJAX requests, API calls, and server-side processing operations are in progress.

Are Loading Spinners commonly used in Selenium automation?

Yes.

They are widely used across modern web applications that load content dynamically.

Which synchronization mechanism is recommended?

The preferred synchronization mechanism is:

WebDriverWait()

together with appropriate Expected Conditions.


Key Takeaways

  • Loading Spinners indicate that an application is processing data or loading content.

  • Use WebDriverWait() together with invisibility_of_element_located() to handle them reliably.

  • Avoid using time.sleep() whenever possible.

  • Prefer stable locators such as ID and CSS Selector.

  • Verify that the expected content is available after the spinner disappears.

  • Proper synchronization significantly improves automation reliability and reduces flaky test cases.

  • Loading Spinners are widely used across modern enterprise web applications.