Make a Cool CSS Loader

 

Hey friends, today I'll share the code of this cool CSS loader. This time I made this quick and simple project as a token of appreciation for reaching over 25 subscribers (34 as of time of writing).

Now,let's see the code.

HTML Code:

<div class="loader"></div>

CSS Code:

body{background:#0f0936}

.loader {

  border: 16px solid #f3f3f3;

    border-radius: 50%;

      border-top: 16px solid #1dc47f;

        width: 120px;

          height: 120px;

            -webkit-animation: spin 2s linear infinite; /* Safari */

            -  animation: spin 2s linear infinite;

            -  }

/* Safari */

@-webkit-keyframes spin {

  0% { -webkit-transform: rotate(0deg); }

    100% { -webkit-transform: rotate(360deg); }

    }

@keyframes spin {

  0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

    }

The output would be like below:

Thanks for reading and do subscribe to our YT channel for more tutorials! Do comment any suggestions or doubts you have. Till the next one, goodbye!