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
my #Day69 of #100DaysOfCode project
It's a simple landing page for guitar store build with tailwind and js
Features:
✅ Swipe to left and right on the products section
✅ Integrated video at the bottom of the header section with play and pause functionality
✅ User-friendly interface
✅ Smooth animations
✅ Newsletter subnoscription
✅ Testimonials grid
Check it out👍
Live Link
Repo Link
#100DaysChallenge #coding #projects@DevNerd0
It's a simple landing page for guitar store build with tailwind and js
Features:
✅ Swipe to left and right on the products section
✅ Integrated video at the bottom of the header section with play and pause functionality
✅ User-friendly interface
✅ Smooth animations
✅ Newsletter subnoscription
✅ Testimonials grid
Check it out👍
Live Link
Repo Link
#100DaysChallenge #coding #projects@DevNerd0
🔥9
And guess what? someone followed me on GitHub🥳
guys to have a software engineer lezawm Dagmawi_Babi follow me and gave me a star .. it's really crazy, guys I’m feeling super excited to keep pushing⚡️😁 yemir ..
guys to have a software engineer lezawm Dagmawi_Babi follow me and gave me a star .. it's really crazy, guys I’m feeling super excited to keep pushing⚡️😁 yemir ..
🔥7⚡2🏆2👍1