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
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
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.")
I want this loader on the center
This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.
These cookies are necessary for the website to function and cannot be switched off. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms.
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us understand how visitors move around the site and which pages are most frequently visited.
These cookies are used to record your choices and settings, maintain your preferences over time and recognize you when you return to our website. These cookies help us to personalize our content for you and remember your preferences.
These cookies may be deployed to our site by our advertising partners to build a profile of your interest and provide you with content that is relevant to you, including showing you relevant ads on other websites.