Menu
Bounties /Pin to ProfileBookmark
@79SSMar 14.2023 — #You can use a loading spinner from boostrap here:
https://getbootstrap.com/docs/5.3/components/spinners/
@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!
@luffyMar 17.2023 — #
CSS
JS
Create a loading screen like this
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.
Sign in
to post a answer3 Replies ↴
1
@79SSMar 14.2023 — #You can use a loading spinner from boostrap here:https://getbootstrap.com/docs/5.3/components/spinners/
1
@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!
0
@luffyMar 17.2023 — #
`This video has been archived
The video is not available to watch at this time.
Go to home page
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 