planics Devloper provide Website,program,project,software related content.specially providing web designning, we provide I.T. related content.

Square Progress Bars animated loader using html and CSS. Hello guys, Planics Devloper is providing HTML,CSS,BootStrap,JavaScript,P...

how to design snake animated loader using html and css


Square Progress Bars animated loader using html and CSS.

Square Progress Bars animated loader using html and CSS.

Hello guys, Planics Devloper is providing HTML,CSS,BootStrap,JavaScript,PHP. If you want any design then copy code from our post otherwise watch our video on blog.

If you want to design card hover or something then click here and get latest design
                                                                 free  Click here

How to design Best product card hoverin 2020?

design beautiful snake amination loader using html and CSS . you learn in this video how to design square progress bar aminated loader using html and CSS.

How to design different type ofanimation in one loader using html and css?


Free Cards Effect in HTML with CSS

How to design square type loader usingonly html and CSS?

How to design snake animated loader using html and CSS?

how to design google animated loader for website so please check it out in YouTube.Here we show snake square animated loader using pure html and CSS


loader.html
<!DOCTYPE html>
<html>
    <head>
        <title>Snake-loader</title>
    <link href="https://fonts.googleapis.com/css?family=Aleo|Slabo+27px" rel="stylesheet">
    <style>
            body {
    margin:0; padding:0;
   
}
 /* Loader Starts from here */
#container
{   display:block;
    position:fixed; top:0;
    height:100vh; width:100vw;
    background-image:-webkit-linear-gradient(right,#134E5E,#71B280);
    z-index:5;
}

#load
{   position:relative ;
    font-size:22px;
    color:white;
    margin:auto; text-align:center;
    font-family: 'Aleo', serif;  
    user-select:none;
    top:140px;
}
#loader
{
    display:block ;
    position:relative ;
    height:100px; width:100px;
    margin:auto;
    top:calc( 50% - 100px); 
    border:10px dashed #93F9B9; 
    box-shadow:0 0 0 10px rgba(0,0,0,.4), inset 0 0 0 10px rgba(0,0,0,.2);
    animation:rotate 8s linear infinite;
}
@keyframes rotate {
    100% {transform:rotate(-360deg);}
}
#container:before {
    color:white;
    content:"23%";
    font-family: 'Aleo', serif; 
    display:block ;
    text-align:center ;
    position:relative ;
    margin:auto;
    top:calc( 50% - 25px); 
    font-size:22px;
    animation:percent 2.97s infinite;
}
@keyframes percent {
    0% {content:'0%';}
    20% {content:'22%';}
     30% {content:'30%';}
      40% {content:'43%';}
      50% {content:'59%';}
       60% {content:'64%';}
    70% {content:'71%';}
     80% {content:'82%';}
      90% {content:'98%';}
      100% {content:'100%';}
}
#loader > span
{
    display:block ;
    position:absolute ;
    height:100%; width:100%;
    top:0;  left:0;
    overflow:hidden;
}
#loader > span:before {
    content:"";
    display:block ;
    position:absolute ;
    height:100%; width:100%;
    top:0;  left:0;
    border:none;
    border-top:10px solid white;
    animation:animate 2s linear infinite;
}
@keyframes animate {
    0% {left:-100%;}
    25% {left:0;}
    50%,100% {left:100%;}
}
#loader > span:nth-child(2)
{
    transform:rotate(90deg);
}
#loader > span:nth-child(3)
{
    transform:rotate(180deg);
}
#loader > span:nth-child(4)
{
    transform:rotate(270deg);
}
#loader > span:nth-child(2):before
{
    animation-delay:.5s;
}
#loader > span:nth-child(3):before
{
    animation-delay:1s;
}
#loader > span:nth-child(4):before
{
    animation-delay:1.5s;
}
            </style>
    </head>
    <body>
    <!-- Loader starts -->
    <div id="container">
    <div id="loader"    >
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div> 
    <br><br><br>
    <div id="load"></div>
   
    <center>    
</center>
    </div>
   

    </body>
</html>

How to Design round animated loader usinghtml and css?

In this link we are provide you how to set video as background any web page.

How to design home page for car usinghtml and css ?

How to design web page using adobe XD?




0 coment�rios: