CSS Loader

by ThreeG

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div class="loader"></div>
        <div class="content">
            Lorem ipsum.
        </div>
    </body>
</html>

CSS

body {
    margin:0;
    height:100vh;
}
.loader{
    margin:auto ;
    border-radius:50%;
    border:15px solid gray;
    border-left: 15px solid red;
    width:100px;
    height:100px;
    box-sizing:border-box ;
    position:fixed;
    left:0;
    top:0;
    right:0;
    bottom:0;
    animation: rotate 1s linear infinite, fade 1s linear 2s forwards;
}
.content{
    width:100%;
    height:100%;
    background:#00f;
    opacity:0;
    animation: show 1s linear 2s forwards;
    font-family:arial;
    font-size:20px;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
}
@keyframes rotate{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}
@keyframes fade{
    from {opacity:1;}
    to{opacity:0;}
}
@keyframes show{
    from {opacity:0;}
    to{opacity:1;}
}