Streamlit default loader

🎈 Using Streamlit
1

Hi

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

2

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 = """
<style>
  .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); }
  }
</style>
"""

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

# Function to simulate app loading
def simulate_loading(seconds):
    st.write("Loading...")
    time.sleep(seconds)

# Simulate app loading for 5 seconds
simulate_loading(5)

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

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

image

I want this loader on the center