/   Sign up×
Bounties /Pin to ProfileBookmark

Create a loading screen like this

+ 2,500
Copy linkTweet thisAlerts:
Mar 14.2023

Can someone please create me a loading screen like this with CSS I can use for the rest of the site? Thanks! (The site’s name will be Polaris btw)

Try and keep it vanilla HTML, CSS, and JS,  and I only want it to show when the page is loading. Thanks.

to post a answer
CSSFront-endFull-stack DeveloperHTMLJavaScriptWeb Hosting

3 Answer(s)

Copy linkTweet thisAlerts:
@79SSMar 14.2023 — You can use a loading spinner from boostrap here:
https://getbootstrap.com/docs/5.3/components/spinners/
Copy linkTweet thisAlerts:
@natalieMar 14.2023(updated) — Here you go https://codepen.io/NRo/pen/abaYrvP

This uses vanilla html, css, and js. The "loading state" is triggered by clicking the button. You can edit the colors in the CSS to what colors you want

Note: I would not suggest creating a modern website this way. It is much easier and more scalable to put up a new create-react-app and import MUI's CircularProgress component instead. Let me know if you would like tips on how to do any of that!
Copy linkTweet thisAlerts:
@luffyMar 17.2023 — 


`This video has been archived
The video is not available to watch at this time.
Go to home page
You can change the image as per your need.


CSS#loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #181818;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

#loading-screen img {
width: 100px;
height: auto;
margin-bottom: 20px;
}

.loader {
border: 5px solid rgba(255, 255, 255, 0.3);
border-top: 5px solid #fff;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
}

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

#loading-screen h5 {
color: #fff;
font-size: 20px;
margin-top: 20px;
}

#loading-screen p {
color: #fff;
font-size: 16px;
margin-top: 10px;
}

#loading-screen button {
background-color: #fff;
border: none;
color: #000;
font-size: 16px;
font-weight: bold;
padding: 10px 20px;
margin-top: 20px;
cursor: pointer;
transition: all 0.3s ease-in-out;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 25px;
}

#loading-screen button:hover {
background-color: #000;
color: #fff;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
transform: translateY(-3px);
}


JS
function goToHomePage() {
window.location.href = "home.html";
}
@luffyHTML
Polaris Logo
This video has been archived.
The video is not available to watch at this time. Go to home page
Mar 17.2023
×

Success!

Help @1 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.27,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: sell your code,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @navneet1991,
amount: 1000 SATS,
source: article

tipper: @ringsideikon07,
amount: 100 SATS,
source: article

tipper: @todd,
amount: 1000 SATS,
source: article
)...