CSS Loader

How to make a CSS loader through CSS?

Last updated:7/20/2021 1:11:17 AM

1 Answers

Ethan Karla
Ethan Karla

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!

Answer