Creating a full-screen loading animation that appears when a button is clicked is a great way to enhance user experience. This animation can flow seamlessly from right to left before disappearing, providing a visually engaging transition for users as they

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.

Answer №1

Performing a spinner animation is relatively simple, but for a more seamless experience, it's best to synchronize it with a loading process. To illustrate this concept without assumptions, let's delve into a native Javascript Ajax call...

var xmlhttp = new XMLHttpRequest();

document.getElementById("myLoader").style.display = "block";
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == XMLHttpRequest.DONE) {   
    if (xmlhttp.status == 200) {
      document.getElementById("myLoader").style.display = "none";
    }
  }
};

xmlhttp.open("GET", "https://www.httpbin.org/get", true);
xmlhttp.send();

You can enhance your myLoader div further by incorporating an animated element. For added sophistication, consider utilizing Javascript to animate the content after its load.

To bolster our approach, let's incorporate code from https://www.w3schools.com/howto/howto_css_flip_card.asp. This set of code demonstrates a card flip effect triggered by hover, which can be customized according to your preferences.

The crux lies in the CSS portion under flip-card-inner, governing the duration of the animation process for Javascript to interpret. By adjusting the transition value, you can tailor the length of the animation.

JsFiddle: https://jsfiddle.net/L1fk0nhm/

<style>
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; 
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}
</style>
<div class="flip-card">
  <div id="myLoader" class="flip-card-inner">
    <div class="flip-card-front">
       I'm hiding stuff that's loading!
    </div>
    <div id="loadedStuff" class="flip-card-back">

    </div>
  </div>
</div>

We can also trigger the flip effect upon completion of loading using additional Javascript commands within the loaded element.

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == XMLHttpRequest.DONE) {   
    if (xmlhttp.status == 200) {
      document.getElementById("loadedStuff").innerHTML = xmlhttp.responseText;
      animateCardRotation(document.getElementById("myLoader"), 0, 180);
    }
  }
};

xmlhttp.open("GET", "https://www.httpbin.org/get", true);
xmlhttp.send();

function animateCardRotation(Element, startDegree, endDegree) {
  if(startDegree < endDegree ) {
    startDegree += 10;
    Element.style.transform = `rotateY(${startDegree}deg)`;
    requestAnimationFrame( () => this.animateCardRotation(Element, startDegree, endDegree) );
  }
}

Incorporating requestAnimationFrame here significantly enhances CSS animations, allowing for versatile transformations. Particularly useful for chunk-loaded content, this technique can facilitate precise visualization of a "loading bar".

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leverage dynamically loaded HTML classes using jQuery

My page has dynamically loaded divs with the class name product. The issue I am facing is that Jquery does not seem to recognize this class when using the code below. Clicking on the product divs doesn't trigger any action, while clicking on nav-eleme ...

What is the best way to change an existing boolean value in Prisma using MongoDB?

Exploring prisma with mongoDb for the first time and faced a challenge. I need to update a boolean value in a collection but struggling to find the right query to switch it between true and false... :( const updateUser = await prisma.user.update({ where: ...

Select a hyperlink to access the corresponding tab

I've been playing around with bootstrap and AngularJS. I placed nav-tabs inside a modal-window and have it open when clicking on a link. However, I want the appropriate tab to open directly upon click. For example, if I click on "travel", I want the t ...

What is the best method to loop through this object with JavaScript?

Suppose I have the following data: let testData = { 'numGroup1': [[(1, 2, 3, 4, 5), (5, 6, 7, 8, 9)]], 'numGroup2': [[(10, 11, 12, 13, 14), (15, 16, 17, 18, 19)]] }; What is the best approach to iterate through this data using Jav ...

Retrieve information from MongoDB and showcase it on the user interface

I am a beginner in NodeJS and server-side technologies, currently working on building a simple app that involves data insertion into a MongoDB database. I am using express-handlebars for this project. While I have successfully saved the data into the data ...

Do you think there is a more efficient way to solve this issue?

const [active, setActive] = React.useState(["active", "", "", "", ""]);``your unique text`` const hrefs = React.useMemo( () => ["/", "/about", "/skills", "/projects", "/contact"], [] ); React.useEffect(() => { setInterval(() => { ...

Discover the process of incorporating two distinct component structures within a single React application

In my React app, I am trying to implement a different navbar for routes that start with "admin". For example: Normal Page: <NormalNavbar/> <NormalHeader/> <NormalBody/> <NormalFooter/> But if it's an admin route, then I want: ...

Using flexible color for Material-UI Icon

In my JSON file, I have defined the properties for icons that I want to display such as font awesome classes and color as HUE: "users": {"icon":"fas fa-users", "iconcolor":"green"} However, whe ...

Learn how to customize the global style within a child component in Angular and restrict the changes to only affect that specific component

I have applied some custom css styling in my global style.css file (src/style.css) for my Angular project. However, I encountered a problem when trying to override this styling in a specific component without affecting the rest of the project. Currently, I ...

What is the reason for Safari 13 not displaying the outline during focus when a transition is applied?

In the current scenario, focusing on the button in Safari 13.0.5 does not display the outline until a repaint is forced (such as changing screen size). This issue does not occur in other browsers. Are there any workarounds or hacks to ensure the outline ...

Building a React Typescript service with axios functionality

When creating a service and calling it from the required functional component, there are two different approaches you can take. 1. export const userProfileService = { ResetPassword: async (userId: string) => { var response = await http.get ...

I'm debating on where to dispatch my redux

Currently, I am delving into the world of React and Redux, and a question has been nagging at me. Should I dispatch and share my Redux store in individual components that need it, or would it be better to centralize it in one main component and pass down t ...

Enhance your Angular2 Directive

Looking to customize the angular2-clipboard npm package by extending its functionalities. Specifically, I aim to access and modify its ngOnInit() function to cater to a specific copying use case. Being new to angular2, I am uncertain about the process of ...

Having trouble with the `click()` function not working on a button while using Selenium in

Currently, I am running a selenium test on a remote server in headless mode using the chrome driver. However, when trying to click on a button with the following step, the button does not get clicked. Below is the test step attempting to click the element ...

Is there a way to determine the dimensions of an HTML element? (taking into account added elements)

It seems that the current situation is not feasible at this time. I am working on an animation that requires an element to move from an absolute position to an inline one. The challenge is that I cannot predict how the container or the element itself will ...

How can we leverage jQuery deferred within Backbone Marionette composite views, where each items view contains a form, to execute a task after each form submission is successful?

I am utilizing a Backbone Marionette composite view in which each child item view contains its own form. var DependentsFormFields = Backbone.Marionette.CompositeView.extend({ template: 'dependents_form_fields_wrapper', itemViewContainer: ...

Unlocking the capabilities of Chrome extensions using Angular 2 and TypeScript

Currently attempting to develop a chrome extension using angular2 and typescript, I have hit a roadblock in trying to access the chrome API (in this case, chrome.bookmarks). I have successfully gained access to the chrome object by following guidance from ...

I am looking to automatically hide either the Login or SignUp link once a user has clicked on one of them using ReactJS

My APP.JS code needs to have the Login and SignUp links removed once a component is opened. return ( <div className="App"> <Router> { condition ? null : ( <div> ...

Is it feasible to maintain a persistent login session in Firebase without utilizing the firebase-admin package through the use of session cookies?

Currently, I am integrating Firebase into my next.js application for user login functionality. The issue I am facing is that users are getting logged out every time they switch paths within the site. Even though their session cookie has not expired, if the ...

JavaScript allows for selecting individual IDs by their corresponding numbers

Looking to retrieve numerical IDs <div class="user-view"> <div class="show_user_div"> <div class="disp"> <a href="/profile/name1/">name1</a><br /> <span id="show_a_3"> <a id="ref_show(3)">Show Details</ ...