Despite anticipating more negative responses than positive ones, I believe that even one correct answer outweighs it all!
So, I'm trying to figure out how to create a loading animation that covers the entire screen whenever a button on the navigation bar is clicked. The animation should span 100vh in height and 100vw in width, sliding from right to left before disappearing. (Need guidance with CSS, JS, and maybe HTML too)
If you visit using a laptop, you'll see a fantastic loading animation when navigating through the options on the left side of the website. I know replicating the exact effect requires expertise in web development. Even after checking the GitHub repo for inspiration, I found no index.html file, just .jsx files (ReactJS).
My knowledge of HTML, CSS, JS is basic, and I've never worked with frameworks (only been learning web dev for two months). However, this project is part of a college assignment, where I'm creating an eLearning platform similar to what's taught here with webflow and backend tools like MemberStack, Airtable, Zapier: https://www.youtube.com/watch?v=1-_rGcBQLzE&list=PL23ZvcdS3XPINPbP6y06tcLY_rZLi8euf
I have the freedom to use any frameworks but not website building tools. While backend connectivity is a bonus, it's not mandatory. Currently, I'm only working on the website's homepage, and its code looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
/* Add your styles here */
</style>
</head>
<body>
<div class="outer-wrapper">
<div class="wrapper">
<div class="slide one" id="one">
<div>
<br />
<br />
<h1>Welcome to the website</h1>
</div>
</div>
<div class="slide two" id="two">
<div>
<br />
<br />
<h1>Welcome to the eLearning website</h1>
</div>
</div>
<div class="slide three" id="three"></div>
<div class="slide four" id="four"></div>
<div class="slide five" id="five"></div>
</div>
</div>
<div class="wrap-class">
<div class="navbar">
<button>
<a href="#one" onclick="clicked()">Home</a>
</button>
<div class="margin1vh"></div>
<button>
<a href="#two">About</a>
</button>
<div class="margin1vh"></div>
<button>
<a href="#three">Website</a>
</button>
<div class="margin1vh"></div>
<button>
<a href="#four">Support</a>
</button>
<div class="margin1vh"></div>
<button>
<a href="#five" style="scroll-behavior: smooth !important">Contact</a>
</button>
</div>
</div>
<script>
function clicked() {
// Animation on click logic
}
</script>
</body>
</html>
I'm simply looking for a loading animation across the entire screen, sans loading bar. It might involve changing the background color to black and adjusting some dimensions in the existing CSS and JS code provided.
If you want to explore the full code or my progress, feel free to check the GitHub repository at https://github.com/shubham-garg1/web-project. You can also view the current version online at . Any assistance would be greatly appreciated, thank you.