Blog

  • In this blog we are goin to create simple spinners using pure css and a little bit of javascript and for that we will be having a pretty basic project setup. We will be having three files index.html(our main html page), main.css(our main style sheet) and main.js(main javascript file). In our HTML page we will be having an h1 and a paragraph but if we reload the page we can see a little spinner in the middle of the screen, it is going to stay there for 4 seconds and then it will load the paragraph.

    What we are going to focus on is to building the spinner on pure css. We are not using any css frameworks on GIFs. We are actually going to create three different versions. It is goig to be very easy, quick and painless. So lets head over to our VS Code or any other editor of your choice. Our HTML markup is very simple, you can use emmet to create out HTML boilerplate and edit it as given below.

            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <meta http-equiv="X-UA-Compatible" content="ie=edge">
                <title>CSS Spinners</title>                
                <link rel="stylesheet" href="style.css">
            </head>
            <body>
                <div class="main">
                    <h1>Spinners using pure css</h1>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                        Facere assumenda recusandae quos quidem ducimus quod quae quia vitae nisi illum, 
                        ipsum fugiat iure nam sequi? Molestias quam totam a veniam.
                    </p>
                </div>
                <script src="main.js"></script>
            </body>
            </html>            
    

    You can open this HTML using live server which I would highly recommend if you use VS Code. Now we will head over to our main.css and add the following piece of code.

            /* Spinner 1 */
            .spinner-1:before {
                content: "";
                box-sizing: border-box;
                position: absolute;
                top: 50%;
                left: 50%;
                width: 60px;
                height: 60px;
                margin-top: -30px;
                margin-left: -30px;
                border-radius: 50%;
                border: 3px solid lightgray;
                border-top-color: #cc000f;
                animation: spinner 0.7s linear infinite;
            }            
    
            @keyframes spinner {
                to {
                  transform: rotate(360deg);
                }
            }
        

    Similarly you create the remaining two types of spinners by adding the following code to your css file

            /* Spinner 2 */
            .spinner-2:before {
                content: "";
                box-sizing: border-box;
                position: absolute;
                top: 50%;
                left: 50%;
                width: 60px;
                height: 60px;
                margin-top: -30px;
                margin-left: -30px;
                border-radius: 50%;
                border: 2px solid transparent;
                border-top-color: #cc000f;
                border-bottom-color: #cc000f;
                animation: spinner 0.7s ease infinite;
            }
                
            /* Spinner 3 */
            .spinner-3:before {
                content: "";
                box-sizing: border-box;
                position: absolute;
                top: 50%;
                left: 50%;
                width: 60px;
                height: 60px;
                margin-top: -30px;
                margin-left: -30px;
                border-radius: 50%;
                border-top: 2px solid #cc000f;
                border-right: 2px solid transparent;
                animation: spinner 0.7s linear infinite;
            }
        

    Now we will head over to our javascript file(main.js) and add the following script.

            document.querySelector(".main p").style.display = "none";
            document.querySelector(".main").classList.add("spinner-2");
                
            // Mimic Server Request
            setTimeout(() => {
                document.querySelector(".main").classList.remove("spinner-2");
                document.querySelector(".main p").style.display = "block";
            }, 4000);
        

    The above script displays the spinner first and after 4 seconds the it displays the paragraph just like an actual server request. For complete code I have attached the project zip file.

Tags: css