A guide on how to stop the loading animation and transition to a different slide using HTML and CSS

Check out this CSS code snippet

@import url(https://fonts.googleapis.com/css?family=Quattrocento+Sans);


@import url(https://fonts.googleapis.com/css?family=Quattrocento+Sans);
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 9999;
}
.loading-img-img {
    top: 15%;
    position: relative;
}   
.loading-img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  width: 100%;
  height: 100px;
  line-height: 100px;
}
.loading-img span {
  display: inline-block;
  margin: 0 5px;
  font-family: "Quattrocento Sans", sans-serif;
  font-size: 30px;
}
.loading-img span:nth-child(1) {
  filter: blur(0px);
  -webkit-animation: blur-img 1.5s 0s infinite linear alternate;
          animation: blur-img 1.5s 0s infinite linear alternate;
}
.loading-img span:nth-child(2) {
  filter: blur(0px);
  -webkit-animation: blur-img 1.5s 0.2s infinite linear alternate;
          animation: blur-img 1.5s 0.2s infinite linear alternate;
}
.loading-img span:nth-child(3) {
  filter: blur(0px);
  -webkit-animation: blur-img 1.5s 0.4s infinite linear alternate;
          animation: blur-img 1.5s 0.4s infinite linear alternate;
}
.loading-img span:nth-child(4) {
  filter: blur(0px);
  -webkit-animation: blur-img 1.5s 0.6s infinite linear alternate;
          animation: blur-img 1.5s 0.6s infinite linear alternate;
}
.loading-img span:nth-child(5) {
  filter: blur(0px);
  -webkit-animation: blur-img 1.5s 0.8s infinite linear alternate;
          animation: blur-img 1.5s 0.8s infinite linear alternate;
}
.loading-img span:nth-child(6) {
  filter: blur(0px);
  -webkit-animation: blur-img 1.5s 1s infinite linear alternate;
          animation: blur-img 1.5s 1s infinite linear alternate;
}
.loading-img span:nth-child(7) {
  filter: blur(0px);
  -webkit-animation: blur-img 1.5s 1.2s infinite linear alternate;
          animation: blur-img 1.5s 1.2s infinite linear alternate;
}
.loading-img span:nth-child(8) {
    filter: blur(0px);
    -webkit-animation: blur-img 1.5s 1.4s infinite linear alternate;
            animation: blur-img 1.5s 1.4s infinite linear alternate;
  }
  .loading-img span:nth-child(9) {
    filter: blur(0px);
    -webkit-animation: blur-img 1.5s 1.6s infinite linear alternate;
            animation: blur-img 1.5s 1.6s infinite linear alternate;
  }
  .loading-img span:nth-child(10) {
    filter: blur(0px);
    -webkit-animation: blur-img 1.5s 1.8s infinite linear alternate;
            animation: blur-img 1.5s 1.8s infinite linear alternate;
  }
@-webkit-keyframes blur-img {
  0% {
    filter: blur(0px);
  }
  100% {
    filter: blur(4px);
  }
}

@keyframes blur-img {
  0% {
    filter: blur(0px);
  }
  100% {
    filter: blur(4px);
  }
}
<div class="loading">
        <div class="loading-img">
          <span class="loading-img-img">
              <img src="images/logo.png" height="50px" width="50px">
          </span>
          <span class="loading-text-words">G</span>
          <span class="loading-text-words">R</span>
          <span class="loading-text-words">A</span>
          <span class="loading-text-words">V</span>
          <span class="loading-text-words">G</span>
          <span class="loading-text-words">I</span>
          <span class="loading-text-words">F</span>
          <span class="loading-text-words">T</span>
        </div>
      </div>

htmlcss

Answer №1

An illustration of this concept is when the loading screen disappears after completing its task, like so:

window.onload = function() {
  setTimeout(function() {
    document.querySelector(".loading").style.display = 'none';
  }, 6000);
};
@import url(https://fonts.googleapis.com/css?family=Quattrocento+Sans);
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 9999;
}

.loading-img-img {
  top: 15%;
  position: relative;
}
// CSS code calculations continue here...
<div class="loading">
  <div class="loading-img">
    <span class="loading-img-img">
              <img src="images/logo.png" height="50px" width="50px">
          </span>
    <span class="loading-text-words">G</span>
    <span class="loading-text-words">R</span>
    <span class="loading-text-words">A</span>
    <span class="loading-text-words">V</span>
    <span class="loading-text-words">G</span>
    <span class="loading-text-words">I</span>
    <span class="loading-text-words">F</span>
    <span class="loading-text-words">T</span>
  </div>
</div>
<div>Once page finishes loading entirely, content will be revealed.</div>

The setTimeout delay allows the loader to display even if the website content has already loaded on the client's side.

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

What could be causing the issue when a form returned by a jQuery AJAX request to PHP is not functioning properly within a DIV element?

My goal is to create an interactive web page and explore newer web technologies that have emerged in the past decade. This includes PhP, jQuery, and AJAX. I have simplified the code to focus on a specific issue. The objective is to have jQuery call a PhP ...

phpjqueryhtmlajax

The submission of the form is prevented upon updating the inner HTML

I am in the process of creating a website that will incorporate search, add, update, and delete functionalities all on a single webpage without any modals. The main focus of this webpage is facility maintenance. Adding facilities works smoothly; however, i ...

javascriptphphtml

What is the best way to remove margin on the first child element in a right-to-left (

Seeking advice on how to remove the margin from the first child of four progress bars arranged vertically in a right-to-left (rtl) form. I attempted using the "first-child" property without success. Any suggestions? .progress-bar-vertical:first-child { ...

cssscss-lint

The variable $ has not been defined in Jquery framework

<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="deployJava.js"></script> <script type="text/javascr ...

javascriptjqueryhtmljquery-uiweb

Unusual discovery within JQuery and IFrames

Let's set the stage. function scrollLog(line) { // Let's assume it's for Firefox // alert("weird"); frames['log'].find(line); }; There's a function that I trigger when the document is ready. The current code doesn&a ...

jqueryhtmliframe

Assign a background image to a master page utilized in subdirectories

In my website's root directory, I have a master page. Inside this root directory, there is a folder named Images which contains the background image for my master page. When I apply this master page to web pages located in the root directory, everythi ...

c#asp.netcssmaster-pages

Performing code execution in MVC 5 View every 1 second

I am currently working on a MVC 5 web application and I have a question regarding performing real-time calculations in the view. Below is an example of my view code: var timeRemaining = Model.account.subscriptionEndDate - DateTime.UtcNow; Is there a way ...

htmldatetimerazorasp.net-mvc-5asp.net-mvc-views

Utilizing CSS flex-end to position images

I am facing an issue with aligning the last item in my container named section-a. The height of the container is set to 100vh and it contains 3 items. I have tried using the property align-self:flex-end, but there are no visible changes. Can anyone help me ...

htmlcssflexbox

Issues with @material-ui/core and react-bootstrap imports are causing disruptions to the NextJS build process

After researching, I've come to realize that this issue is common among developers. Unfortunately, none of the solutions I found have worked for me. During npm run dev mode, everything in the project functions as expected, with all imports working se ...

javascriptcssmaterial-uinext.jsreact-bootstrap

What is the best method for transforming a stream into a file with AngularJS?

Currently, I have a server returning a file stream (StreamingOutput). My goal is to convert this file stream into an actual file using AngularJS, javascript, JQuery, or any other relevant libraries. I am looking to display the file in a <div> or ano ...

javascriptjqueryhtmlangularjsangularjs-directive

Accordion-inspired multi-layer list navigation

I have been searching everywhere but haven't found a solution to this issue. My list menu has the following markup: <div id="menu"> <ul> <li>Category #1 <ul> <li>Item #1</li> <li>I ...

jqueryhtmlcssmenuhtml-lists

When the hover effect is triggered, the background animation smoothly resets back to its initial position once the

I have a picture with a clear background that I want to add a CSS3 background animation to when the mouse hovers over it. Here is the CSS code I am currently using: @keyframes in { from {background-color: #fff;} to {background-color: #900;} } @-webkit-k ...

htmlcssbackground-colorcss-animations

100% div height scrollable navigation bar

I am working with bootstrap and have a span2 on the left side of my page acting as a navigation menu. The nav contains a list of items and I want it to be scrollable while taking up the remaining height of the page. Instead of absolutely positioning the n ...

htmlcssscroll

Issues with Image Placement in Internet Explorer

My cat image on my website appears significantly lower than all the other images when viewed on Internet Explorer (v11). While it looks perfect in Chrome, I cannot figure out why this discrepancy exists. For the development of this website, I utilized pred ...

htmlcssimagetwitter-bootstrap

Design an aesthetically pleasing chat interface using CSS styling

Currently, I am working on organizing HTML elements to create a user-friendly interface. Utilizing MVC and ASP.NET for this chat client, I have encountered an issue with correctly arranging the items. The default MVC project in Visual Studio provides a str ...

htmlcss

Adjust the checkmark color of MUI Checkbox

When using Material UI's MUI library for React, I encountered an issue with the checkbox checkmark color. By default, the checkmark takes on the background color of the container element, which is great for light backgrounds but not ideal for dark one ...

cssreactjscheckboxmaterial-ui

Steps to shorten HTML content while maintaining consistent column width

Is there a way to ensure that the fixed column width is maintained even with long strings? I am trying to display a report in a jsp by having headers in one table and content in another table, both with columns set to the same width. However, some of the ...

htmlcss

Extracting Text from a Span Element Using XPath in Selenium

Here is the HTML code snippet: <div class="a-row a-spacing-small a-size-small"> <div class="a-row"> <a class="a-link-normal a-declarative g-visible-js reviewStarsPopoverLink" href="#" data-action="a-popover" data-a-popover="{"closeButton":" ...

javacssseleniumxpath

Message within the boundary of the input field

Click here to view the image It would be great to have the text "text name" displayed on the border of the input box. Here is the HTML code - <input type="text" id="text creator" class="form-control" placeholder="text creator" na ...

htmlcssangularborder

Ensure the position of a DIV is synchronized with the three-dimensional world while hovering over a ThreeJS Object

Is it possible to position a DIV in 2D space on top of a 3D Object in ThreeJs in a way that it moves along with the object when the world rotates? Keep in mind that the 3D Object is loaded from a model, containing nested groups and a mesh. https://i.ssta ...

javascripthtml3dthree.js