Dev Nerd
#Day66 & #Day67 of #100DaysChallenge Who is still coding through the night at 3 AM in Ethiopia? let's see you in the comment section🔥🙋♂️ Sorry for being off you know how it goes with the electricity in Ethiopia I'm back and with the cool projects I've…
Ohh guys I've noticed the images and icons on those website don't appear fast so we need to implement a simple loading page let's do it
⚡3
Dev Nerd
Ohh guys I've noticed the images and icons on those website don't appear fast so we need to implement a simple loading page let's do it
Yeah, I've just finished the loading page for those projects
Check them out again⚡️
Live Links
Day 66
Day 67
Repo Links
Day 66
Day 67
#projects@DevNerd0
Check them out again⚡️
Live Links
Day 66
Day 67
Repo Links
Day 66
Day 67
#projects@DevNerd0
🔥4
Dev Nerd
Yeah, I've just finished the loading page for those projects Check them out again⚡️ Live Links Day 66 Day 67 Repo Links Day 66 Day 67 #projects@DevNerd0
Here are the steps I followed to create the loading effect:
Body Class (overflow-hidden): This initially prevents scrolling while the loading animation is visible.
loading-wrapper it's like a container for the loader that takes up the entire viewport and centers the loader
loader div: it will show the loading animation
Loader class: Defines the size and animation for the loader element using radial gradients and keyframes.
Keyframes (l3): Controls the animation sequence by creating a spinning effect.
aspect-ratio: 2: ensures the loader maintains a consistent shape with a width that is twice its height.
background var: Positions the gradient circles evenly across the loader's width for a balanced view
background-size: Sizes each gradient circle to take up one-third of the loader's width and half its height
I used the window.onload: the event is triggered when the whole page, including all dependent resources like images, is loaded.
overflow-hidden: removes the overflow-hidden class from the body, which re-enables scrolling after the page is fully loaded
let's keep pushing forward ⚡️
#codes #notes@DevNerd0
<body class="overflow-hidden">
<div class="z-10 h-screen w-full flex justify-center items-center bg-[#F7E8DF] fixed top-0 loading-wrapper">
<div class="loader"></div>
</div>
<!-- main content here -->
</body>
Body Class (overflow-hidden): This initially prevents scrolling while the loading animation is visible.
loading-wrapper it's like a container for the loader that takes up the entire viewport and centers the loader
loader div: it will show the loading animation
@layer utilities {
.loader {
width: 60px;
aspect-ratio: 2;
--_g: no-repeat radial-gradient(circle closest-side, #e55e11 90%, #ffffff00);
background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
background-size: calc(100% / 3) 50%;
animation: l3 1s infinite linear;
}
@keyframes l3 {
20% {
background-position: 0% 0%, 50% 50%, 100% 50%;
}
40% {
background-position: 0% 100%, 50% 0%, 100% 50%;
}
60% {
background-position: 0% 50%, 50% 100%, 100% 0%;
}
80% {
background-position: 0% 50%, 50% 50%, 100% 100%;
}
}
}Loader class: Defines the size and animation for the loader element using radial gradients and keyframes.
Keyframes (l3): Controls the animation sequence by creating a spinning effect.
aspect-ratio: 2: ensures the loader maintains a consistent shape with a width that is twice its height.
background var: Positions the gradient circles evenly across the loader's width for a balanced view
background-size: Sizes each gradient circle to take up one-third of the loader's width and half its height
window.onload = () => {
document.querySelector(".loading-wrapper").classList.add("hidden");
document.body.classList.remove("overflow-hidden");
};I used the window.onload: the event is triggered when the whole page, including all dependent resources like images, is loaded.
overflow-hidden: removes the overflow-hidden class from the body, which re-enables scrolling after the page is fully loaded
let's keep pushing forward ⚡️
#codes #notes@DevNerd0
🔥5👍1
Forwarded from Chapi Dev Talks
This media is not supported in your browser
VIEW IN TELEGRAM
Am not frontend Dev but definitely would love to try this code godamn 🔥
Chapi Dev Talks
Am not frontend Dev but definitely would love to try this code godamn 🔥
Should i do this kind of animation before him
🔥6
Here is my #Day68 of #100daysofcode project a nice landing page
It's built in tailwind and JavaScript
⚡️Features:
✅ Smooth animations
✅ User-friendly interface
✅ Testimonials grid
✅ Nice grid background
✅ Swipe to left and right on the header section
Check it out
Live Link: Live Link
Repo Link: Repo Link
#100DaysChallenge #coding #projects@DevNerd0
It's built in tailwind and JavaScript
⚡️Features:
✅ Smooth animations
✅ User-friendly interface
✅ Testimonials grid
✅ Nice grid background
✅ Swipe to left and right on the header section
Check it out
Live Link: Live Link
Repo Link: Repo Link
#100DaysChallenge #coding #projects@DevNerd0
⚡6🔥2