CSS Loader

Anonymous User 743 20 Jul 2021

How to make a CSS loader through CSS?

Anonymous User

Software Developer Trainee

I am a content writter !

1 Answers

Ethan Karla 21 Jul 2021

Below code can help you how to create a CSS loader, Loaders are very important tool in a website. So, let's get started.

<!DOCTYPE html>

<html>

<head>

    <meta name='viewport' content='width=device-width, initial-scale=1'>

    <style>

        .loader {

            border: 16px solid #f3f3f3;

            border-radius: 50%;

            border-top: 16px solid orange;

            width: 120px;

            height: 120px;

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

            animation: spin 1s 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);

            }

        }

    </style>

</head>

<body>

    <h2>How To Create A Loader</h2>

    <div class='loader'></div>

</body>

</html>

Hope this code will be helpful for you.

Happy Coding!

forum

CSS Loader

Can you answer this question?

1 Answers