Streamlit default loader


I want to use the default streamlit running loader on my main screen. Like i want it enlarged and in the centre while the page is loading. Is there any way to achieve this?

Thank You

You can write custom css to achieve this, here is an example snippet that should help you get started -

import streamlit as st
import time

# Custom CSS for the loading spinner
custom_css = """
  .custom-loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: 100px;
    height: 100px;
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    animation: spin 2s linear infinite;

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }

# Display the custom CSS
st.markdown(custom_css, unsafe_allow_html=True)

# Function to simulate app loading
def simulate_loading(seconds):

# Simulate app loading for 5 seconds

# Remove loading spinner after loading is complete
st.markdown("<div class='custom-loader'></div>", unsafe_allow_html=True)

# Rest of your Streamlit app
st.title("My Streamlit App")
st.write("Welcome to my app.")


I want this loader on the center