Breaking News: Grepper is joining You.com. Read the official announcement!

loader for html

Add Answer

OHIOLee answered on April 26, 2022 Popularity 10/10 Helpfulness 3/10

answer loader for html

related loading page html

related how to loader in html

related html loading

loader for html

Comment

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        font-family: 'Lato', sans-serif;
        font-size: 18px;
        line-height: 1.6;
        background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        min-height: 100vh;
    }

    .main {
        text-align: center;
        width: 90%;
        opacity: 0;
        display: none;
        transition: opacity 0.5s ease-in;
    }

    .main h1 {
        font-size: 40px;
    }

    .main p {
        font-size: 20px;
        color: #333;
    }

    .btn {
        display: inline-block;
        background: purple;
        color: #fff;
        text-decoration: none;
        border: none;
        border-radius: 5px;
        padding: 10px 20px;
        margin-top: 15px;
    }

    .btn:hover {
        opacity: 0.9;
    }
    
    .loader {
        height: 50px;
        transform-origin: bottom center;
        animation: rotate 3s linear infinite;
    }

    .circle {
        display: inline-block;
        background-color: purple;
        height: 40px;
        width: 40px;
        border-radius: 50%;
        transform: scale(0);
        animation: grow 1.5s linear infinite;
        margin: -10px;
    }

    .circle:nth-child(2) {
        background-color: palevioletred;
        animation-delay: 0.75s;
    }

    @keyframes rotate {
        to {
            transform: rotate(360deg);
        }
    }

    @keyframes grow {
        50%{
            transform: scale(1)
        }
    }
    </style>
    <title>CSS Loaders</title>
</head>

<body>
    <!-- Loader1 -->
    <div class="loader">
        <div class="circle"></div>
        <div class="circle"></div>
    </div>
    <script>
        const loader = document.querySelector('.loader')
        const main = document.querySelector('.main')

        function init() {
            setTimeout(() => {
                loader.style.opacity = 0;
                loader.style.display = 'none';

                main.style.display = 'block';
                setTimeout(() => (main.style.opacity = 1), 25);
            }, 4000);
        }

        init();
    </script>
</body>

</html>

Popularity 10/10 Helpfulness 3/10 Language html

Source: Grepper

Tags: html loader

Link to this answer
Share Copy Link

Contributed on Oct 10 2022

OHIOLee

0 Answers Avg Quality 2/10

Closely Related Answers

loading page html

Comment

-1

<style>
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}


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

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

Popularity 10/10 Helpfulness 2/10 Language html

Source: Grepper

Tags: html

Link to this answer
Share Copy Link

Contributed on May 05 2022

SECRET MYSTERY

0 Answers Avg Quality 2/10

how to loader in html

Comment

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  margin: auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>

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

</body>
</html>

Popularity 7/10 Helpfulness 1/10 Language html

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

html loading

Comment

-1

<script type="text/javascript">
alert("LOADING...");
</script>

Your Content Goes here...

Popularity 10/10 Helpfulness 1/10 Language html

Source: Grepper

Tags: html

Link to this answer
Share Copy Link

Contributed on Apr 26 2022

Thomas coder

0 Answers Avg Quality 2/10

loader for html

Contents

More Related Answers

loader for html

Closely Related Answers

loading page html

how to loader in html

html loading

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.