Implementing a loading spinning wheel in javascript

3 min read 07-10-2024

Implementing a loading spinning wheel in javascript

Adding a Loading Spinner to Your JavaScript App: A Simple Guide

Ever felt frustrated waiting for a website to load, with nothing but a blank screen staring back at you? That's where loading spinners come in! They provide visual feedback, letting users know that something is happening behind the scenes and that they shouldn't click away in frustration.

In this article, we'll walk through implementing a simple loading spinner in your JavaScript project.

The Problem: Blank Screens and User Frustration

Imagine you're working on a web application that fetches data from an API. While the data is being fetched, the user sees nothing but an empty screen. This can be frustrating, leading to user abandonment and a negative experience.

Solution: A loading spinner provides visual indication that the app is working, keeping the user engaged and informed.

Building the Spinner: HTML and CSS

First, we'll create the HTML structure for our spinner:

<div class="loading">
  <div class="spinner"></div>
</div>

This sets up a container (<div class="loading">) to hold the spinner itself (<div class="spinner">). We'll style these elements using CSS:

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.spinner {
  width: 60px;
  height: 60px;
  border: 4px solid #f3f3f3;
  border-radius: 50%;
  border-top-color: #3498db;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

This CSS defines the spinner's appearance. It uses a spin animation to create the rotating effect.

Key points:

The .loading class positions the spinner over the entire viewport and overlays a semi-transparent background.
The .spinner class sets the spinner's dimensions, border style, and animation.

JavaScript: Controlling Visibility

We'll add JavaScript to control when the loading spinner is displayed and hidden:

const loadingSpinner = document.querySelector(".loading");

// Function to show the spinner
function showSpinner() {
  loadingSpinner.style.display = "flex";
}

// Function to hide the spinner
function hideSpinner() {
  loadingSpinner.style.display = "none";
}

// Example usage:
showSpinner(); // Display the spinner before a data fetch
fetch('https://api.example.com/data') 
  .then(response => response.json())
  .then(data => {
    // Process data and update the UI
    hideSpinner(); // Hide the spinner after the data is fetched
  })
  .catch(error => {
    console.error('Error fetching data:', error);
    hideSpinner(); 
  });

Here, we select the loading spinner element using querySelector and define functions to show and hide it. These functions control the display property of the .loading element.

Explanation:

showSpinner(): Sets the display property of the .loading container to flex, making the spinner visible.
hideSpinner(): Sets the display property of the .loading container to none, hiding the spinner.
Example Usage: We demonstrate how to call these functions before and after a data fetch using fetch API.

Customizable Spinner: Taking Control

Remember, this is just a basic example. You can easily customize the spinner's appearance and behavior further:

Different Colors: Change the border-top-color and border-color properties to use your own color scheme.
Animation Speed: Modify the animation duration in the @keyframes spin block.
Shape: Experiment with different shapes by modifying the border-radius property.
Loading State: Consider adding an additional loading state to your spinner. This could be a simple animation of a text message or a progress bar.

Wrapping Up

By integrating this simple JavaScript solution, you can provide a much smoother user experience. The loading spinner signals progress to users, minimizing frustration and improving overall satisfaction. Remember to customize the spinner's appearance and behavior to match your website's design and functionality.

Resources: