Skip to content

CSS Arrow loading animation using HTML & CSS | 8

    Step 1) Add HTML:

    <!-- CODE BY GS CODE -->
    <!DOCTYPE html>
    <html lang="en" dir="ltr">
    <head>
    <meta charset="utf-8">
    <title></title>
    </head>
    <body>
    
    
    <h3>css arrow loader</h3>
        <div class="arrow">
    
        </div>
    
    
     </body>
    </html>

    Add CSS CODE IN <style> tag

    <!-- CODE BY GS CODE -->
    
    <style media="screen">
    body{
    background: #f4b41a;
    }
    h3{
    text-align: center;;
    text-transform:uppercase;
    font-size: 40px;
    font-family: sans-serif;
    color: #143d59;
    }
    
    .arrow{
    position: absolute;
    top:50%;
    left: 45%;
    height: 100px;
    width: 100px;
    transform: translate(-50%,-50%);
    animation: animate infinite 2s linear;
    border:8px solid #143d59;
    border-top-color:transparent;
    border-bottom-color:transparent;
    border-radius:100%;
    }
    .arrow:before{
    content: "";
    position: absolute;
    top:4px;
    left:0px;
    transform: rotate(-120deg);
    border-top: 15px solid #143d59;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    }
    
    .arrow:after{
    content: "";
    position: absolute;
    top:85px;
    left:70px;
    transform: rotate(50deg);
    border-top: 15px solid #143d59;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    }
    
    
    @keyframes animate {
    0%{
    transform: rotate(0deg);
    }
    50%{
    transform: rotate(180deg);
    }
    100%{
    transform: rotate(360deg);
    
    }
    }
    </style>