Let's Make a Fancy, but Uncomplicated Page Loader

Modern websites, especially progressive web apps and reactive sites, frequently employ loading states to enhance the perceived performance. This creates the illusion of faster loading times. While complex loaders abound, a surprisingly effective solution requires minimal CSS and JavaScript.

This tutorial demonstrates a simple yet elegant approach.

SVG and CSS: A Minimalist Spinner

Assuming you have a project set up, let's begin with the spinner (also known as a pre-loader). SVGs are ideal for spinners due to their scalability and ease of implementation, similar to image tags. While you can create one from scratch, we'll use a pre-made SVG from loading.io for convenience.

Integrate the SVG into your HTML:

<div class="preloader">
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Let's Make a Fancy, but Uncomplicated Page Loader ">
</div>

The .preloader div acts as a container, aiding in positioning and controlling the visibility of the page content.

Now, let's style it:

.preloader {
  align-items: center;
  background: #171616; /* Dark gray background */
  display: flex;
  height: 100vh;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  transition: opacity 0.3s linear;
  width: 100%;
  z-index: 9999;
}

Key aspects of this CSS:

• Flexbox ensures central screen placement.
• The dark gray background completely obscures underlying content. Adjust as needed for different page backgrounds.
• position: fixed prevents scrolling interference, and z-index: 9999 ensures it remains on top.

This setup displays the spinner centrally on the screen.

JavaScript for Smooth Fade-Out

To create a fade-out effect, we'll use a small JavaScript function. First, select the .preloader element:

const preloader = document.querySelector('.preloader');

Instead of directly setting opacity to zero, we'll use a fade-out function for a smoother transition:

const fadeEffect = setInterval(() => {
  if (!preloader.style.opacity) {
    preloader.style.opacity = 1;
  }
  if (preloader.style.opacity > 0) {
    preloader.style.opacity -= 0.1;
  } else {
    clearInterval(fadeEffect);
  }
}, 100);

This function gradually reduces opacity every 100 milliseconds until it reaches zero, then stops. Consider using jQuery's built-in fadeOut function if already incorporated in your project.

Finally, call the function when the window loads:

window.addEventListener('load', fadeEffect);

Using window.load ensures all page elements, including CSS and SVG, are loaded before the fade-out begins.

Add some content to your HTML and test the result. This simple method creates a polished loading effect using only an image, CSS, and a small JavaScript function.

The above is the detailed content of Let's Make a Fancy, but Uncomplicated Page Loader. For more information, please follow other related articles on the PHP Chinese website!