How to Create a CSS Page Loading Spinner

Introduction: In the realm of web development, user experience plays a pivotal role in engaging visitors and retaining them on your website. A CSS page loading spinner, also known as a preloader, is a small yet impactful element that can enhance the user experience by providing visual feedback during page loading. In this tutorial, we’ll guide you through the process of creating your own CSS page loading spinner, complete with HTML, CSS, and JavaScript code snippets.

How to Create a CSS Page Loading Spinner <demo>

Section 1: HTML Structure – Laying the Foundation

Start by creating a basic HTML structure for your webpage. In the <body> section, add a div element with a class name that you’ll use for styling and animation:

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
    <title>CSS Page Loading Spinner</title>
</head>
<body>
    <div class="spinner-container">
        <div class="spinner"></div>
    </div>
</body>
</html>

Section 2: Styling the Loading Spinner with CSS

Create a separate file named styles.css to style your spinner. Add the following CSS code to create a simple circular spinner

CSS Code:

cssCopy code
/* styles.css */
body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f5f5f5;
}

.spinner-container {
    display: flex;
    align-items: center;
}

.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
}

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

Section 3: JavaScript Magic – Adding Functionality

To further enhance the spinner’s functionality, you can use JavaScript to control its behavior. Create a file named script.js and add the following code:

JavaScript Code:

javascriptCopy code
// script.js
window.addEventListener('load', () => {
    const spinnerContainer = document.querySelector('.spinner-container');
    spinnerContainer.style.display = 'none'; // Hide spinner when page is fully loaded
});

In this JavaScript code, we’ve created functions to add and delete tasks. When the “Add” button is clicked, a new task is added to the list. When the “Delete” button for each task is clicked, the task is removed from the list.

Step 4: Testing and Refining

Now that you have set up your CSS page loading spinner, it’s time to test it across various devices and browsers. Make sure the spinner functions smoothly and the page content loads correctly.

CSS Code:

These CSS styles add a smooth transition effect to buttons when they are clicked, making the experience