Designing a custom loading spinner with HTML, CSS, and JavaScript

In the world of web development, loading spinners have become an essential element that can improve user experience by providing a visual cue that lets users know that something is happening in the background. A loading spinner is a type of animated icon that displays while a website or application is processing data or completing an action.

In this tutorial, we will create a custom loading spinner using HTML, CSS, and JavaScript. We will use CSS animation to create the spinner and JavaScript to show and hide it when required.

HTML Setup

First, we will create the HTML structure for our spinner. We will use a div with a class name "spinner" to wrap our spinner's elements. Within this div, we will create four child divs with class names "spinner-item." These items will form the individual segments of our spinner.

<div class="spinner">
  <div class="spinner-item"></div>
  <div class="spinner-item"></div>
  <div class="spinner-item"></div>
  <div class="spinner-item"></div>
</div>

CSS Styling

Next, we will add CSS styles to create our spinner. We will use CSS animations to rotate each of the spinner-items around the center of the spinner.

.spinner {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
}

.spinner-item {
  position: absolute;
  border-radius: 50%;
  background-color: #7f58af;
  animation: spin 1s linear infinite;
}

.spinner-item:nth-child(1) {
  top: 0;
  left: 15px;
  width: 10px;
  height: 10px;
  animation-delay: -0.45s;
}

.spinner-item:nth-child(2) {
  top: 15px;
  left: 0;
  width: 10px;
  height: 10px;
  animation-delay: -0.3s;
}

.spinner-item:nth-child(3) {
  top: 15px;
  right: 0;
  width: 10px;
  height: 10px;
  animation-delay: -0.15s;
}

.spinner-item:nth-child(4) {
  bottom: 0;
  left: 15px;
  width: 10px;
  height: 10px;
  animation-delay: 0;
}

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

In the above code, we have defined the styles for the spinner and its items. We have set the spinner's position to be fixed, and its top and left properties are set to 50%, which centers the spinner horizontally and vertically. We have also set its display property to none, which hides the spinner initially.

For the spinner-item, we have positioned them absolutely within the spinner div and given them a border-radius to make them circular. We have also set the background-color to #7f58af, which is a nice shade of purple. Finally, we have used the @keyframes rule to define a spin animation that rotates the items around their center from 0 to 360 degrees.

We have also added some specific styles for each of the four spinner-items. We have set their position and size, and used the animation-delay property to stagger their animation, creating a nice spinning effect.

JavaScript Implementation

Now that we have our HTML and CSS, we need to add JavaScript to show and hide our spinner. We will create two functions in JavaScript: showSpinner() and hideSpinner(). These functions will show and hide the spinner by adding and removing the "active" class from the spinner div.

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

function showSpinner() {
  spinner.classList.add('active');
}

function hideSpinner() {
  spinner.classList.remove('active');
}

In the above code, we have selected the spinner div using the querySelector() method and assigned it to a variable called "spinner". We have then defined the showSpinner() and hideSpinner() functions, which add and remove the "active" class from the spinner div, respectively.

To test our spinner, we can call the showSpinner() function before performing an asynchronous task, and then call the hideSpinner() function once the task is complete. For example, if we were making an API call, we could do something like this:

showSpinner();

fetch('https://api.example.com/data')
  .then(response => {
    // handle response
    hideSpinner();
  })
  .catch(error => {
    // handle error
    hideSpinner();
  });

In the above code, we have called the showSpinner() function before making the API call and the hideSpinner() function within the .then() and .catch() methods to hide the spinner once the task is complete.

Conclusion

In this tutorial, we have learned how to create a custom loading spinner using HTML, CSS, and JavaScript. We have used CSS animations to create a rotating effect and JavaScript to show and hide the spinner. By using this custom spinner, you can improve the user experience of your website or application by providing a visual cue that lets users know that something is happening in the background.