🚀Animated Loading Spinner | HTML & CSS💯

This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Robson Muniz

Learn how to build an Animated Loading Spinner Tutorial using HTML and CSS !

Source Code:

Content and Structure:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Animated Loading Spinner</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="spinner">
    Loading...
    <div class="spinner-sector spinner-sector-red"></div>
    <div class="spinner-sector spinner-sector-blue"></div>
    <div class="spinner-sector spinner-sector-green"></div>
    <div class="spinner-sector spinner-sector-orange"></div>
</div> 

</body>
</html>

Layout and Design

*{
   box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body{
    display: grid;
    place-items: center;
    min-height: 100vh;
    overflow: hidden;
}

.spinner{
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    overflow: hidden;
    position: relative;
    animation: text-fading 2s ease-in-out infinite alternate;
}

@keyframes text-fading {
    0%{
        color: rgba(0,0,0,1);
    }
    50%{
        color: rgba(0,0,0,0.5);
    }
    100%{
        color: rgba(0,0,0,0.1);

    }
}

.spinner-sector{
    position: absolute;
    width: 100%;
    height: 100%;
    /*background: red;*/
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 15px solid transparent;
    mix-blend-mode: overlay;
    animation: rotate var(--duration) var(--timing) infinite;
}

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

.spinner-sector-red{
    border-top-color: #cf2c20;
    --duration: 1.5s;
    --timing: ease-in-out;
}

.spinner-sector-blue{
    border-left-color: #2454df;
    --duration: 2s;
    --timing: ease-in;
}

.spinner-sector-green{
    border-right-color: #258342;
    --duration: 2.5s;
    --timing: ease-out;
}

.spinner-sector-orange{
    border-bottom-color: #f0a204;
    --duration: 3s;
    --timing: ease-in-out;
}

🛴Follow us for more content like this:
https://bit.ly/WDevMadeEasy

This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Robson Muniz

Print Share Comment Cite Upload Translate Updates

APA

Robson Muniz | Sciencx (2022-10-07T13:53:56+00:00) 🚀Animated Loading Spinner | HTML & CSS💯. Retrieved from https://www.scien.cx/2022/10/07/%f0%9f%9a%80animated-loading-spinner-html-css%f0%9f%92%af/

MLA

" » 🚀Animated Loading Spinner | HTML & CSS💯." Robson Muniz | Sciencx - Friday October 7, 2022, https://www.scien.cx/2022/10/07/%f0%9f%9a%80animated-loading-spinner-html-css%f0%9f%92%af/

HARVARD

Robson Muniz | Sciencx Friday October 7, 2022 » 🚀Animated Loading Spinner | HTML & CSS💯., viewed ,<https://www.scien.cx/2022/10/07/%f0%9f%9a%80animated-loading-spinner-html-css%f0%9f%92%af/>

VANCOUVER

Robson Muniz | Sciencx - » 🚀Animated Loading Spinner | HTML & CSS💯. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/10/07/%f0%9f%9a%80animated-loading-spinner-html-css%f0%9f%92%af/

CHICAGO

" » 🚀Animated Loading Spinner | HTML & CSS💯." Robson Muniz | Sciencx - Accessed . https://www.scien.cx/2022/10/07/%f0%9f%9a%80animated-loading-spinner-html-css%f0%9f%92%af/

IEEE

" » 🚀Animated Loading Spinner | HTML & CSS💯." Robson Muniz | Sciencx [Online]. Available: https://www.scien.cx/2022/10/07/%f0%9f%9a%80animated-loading-spinner-html-css%f0%9f%92%af/. [Accessed: ]

rf:citation

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Learn how to build an Animated Loading Spinner Tutorial using HTML and CSS !

Related Posts