Planics Devloper

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

Showing posts with label loader. Show all posts

Ring animated loader using html and CSS. Hello guys, Planics Devloper is providing HTML,CSS,BootStrap,JavaScript,PHP . If you wa...


Ring animated loader using html and CSS.

Ring 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 loaderusing html and CSS?

how to design google animated loader for website so please check it out in YouTube.

Here we show ring type animated loader using pure html and CSS. Here we show how to transform and skew any object using only CSS.


loader.html
<!DOCTYPE html>
<html>
    <head>
        <title>Planics Dev</title>

    <style>
        body {
    margin:0;  padding:0;
}
/* Loader Starts from here */
#container{
    display:block;
    position:absolute ;
    height:100%;  width:100%;
    color:white;
      background-image:-webkit-linear-gradient(right,#06beb6,#48b1bf);
    user-select:none;
}

#loader,#load {
    position:absolute ;
    height:40px;  width:40px;
    top:0; bottom:100px;
    left:0; right:0;
    margin:auto;
    background-color:transparent;      
}
 #loader:before,#loader:after{
        content:"";
        position:absolute ;
        height:40px;  width:40px;
        border:8px solid rgb(255, 255, 255);
        border-radius:10px;       
    }
#loader:before {
    animation:animate1 2s linear infinite;
}
#loader:after {
    animation:animate2 2s linear infinite;
}
#load {
    top:55%; position:absolute ;
    font-size:20px;
    font-family: 'Aleo', serif;
    margin-left:40%;
}


@keyframes animate1 {
    100%{
        transform:rotate(180deg) skew(360deg);
    }
}
@keyframes animate2 {
    100%{
        transform:rotate(-180deg) skew(-360deg);
    }
}
        </style>
    </head>
    <body>
   
    <!-- Loader starts -->
   <div id="container" >
       <div id="loader"></div>
       <br><br />
       <div id="load"></div>
   </div>
    <!-- Loader ends -->
   
    </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?

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


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?

How to design google type animated loader using html and CSS Hello guys, Planics Devloper is providing HTML,CSS,BootStrap,JavaScri...


How to design google type animated loader using html and CSS

google theme 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 Product card or something then click here and get latest design
                                                                 free  Click here

How to design Best card hover in 2020?

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

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


Free Cards Effect in HTML with CSS

How to design puzzle type loader using only html and CSS?How to design multicolor animatedloader using html and CSS?

Here we show you how to google animated loader for website so please check it out in YouTube.

loader.html
<!DOCTYPE html>
<html>
    <head>
        <title>Google Loader</title>
                        <style>
                        body {
    background:#222;
}

.container{
    width:250pt;
    height:330pt;
    display:grid;
    place-items:center ;
    position:absolute ;
    top:50%;
    left:50%;
    transform:translate(-50% , -50%);
}

.google{
    position:absolute ;
    width:106pt;
    height:35pt;
    top:50%;
    left:50%;
    transform:translate(-50% , -50%);
   
}

.g{
    background:linear-gradient(to bottom right , rgb(66 , 133 , 244 ) 50% , rgb(21 , 101 , 192) 50%);
    width:25pt;
    height:25pt;
    border-radius:50%;
    position:absolute ;
    left:2pt;
    bottom:3pt;
            animation : G 1s linear infinite;
}

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


.o{
    background:linear-gradient(to bottom , rgb(234 , 67 , 53) 50% , rgb(198 , 40 , 40) 50%);
    border-radius:50%;
    width:15pt;
    height:15pt;
    position:absolute ;
    left:29pt;
    bottom:3pt;
    animation:o 1.5s ease-in-out infinite ;
}


@keyframes o{
    50%{
        left:46pt;
        z-index:10;
    }
}

.o2{
    background:linear-gradient(to bottom , rgb(251 , 188 , 5) 50% , rgb(255 , 145 , 0) 50%);
    width:15pt;
    height:15pt;
    position:absolute ;
    left:46pt;
    bottom:3pt;
    border-radius:50%;
    animation:o2 1.5s ease-in-out infinite ;
}

@keyframes o2{
    50%{
        left:29pt;
    }
}

.g2{
    background:linear-gradient(to bottom right , rgb(66 , 133 , 244 ) 50% , rgb(21 , 101 , 192) 50%);
    width:15pt;
    height:15pt;
    border-radius:50%;
    left:63pt;
    top:6pt;
    position:absolute ;
    animation:rotate 2s ease-out infinite ;
}

.down_part{
    content:"";
    position:absolute ;
    background: rgb(21 , 101 , 192) ;
    width:15pt;
    height:7.5pt;
    bottom:-10pt;
    border-bottom-left-radius:15pt;
    border-bottom-right-radius:15pt;
    left:50%;
    transform:translateX(-50%);
}

@keyframes rotate{
    100%{
        transform:rotateY(2turn);
    }
}

.l{
    background:linear-gradient(to right , #00a86b , #29ab87 , #00a572 , #50c878);
    width:5pt;
    height:25pt;
    border-radius:2pt;
    background-size:400% 400%;
    background-position:0% 200%;
    position:absolute ;
    left:80pt;
    bottom:3pt;
    animation:l 8s linear infinite ;
}

@keyframes l{
    25%{
        background-position:100% 200%;
    }
    50%{
        background-position:200% 200%;
    }
    75%{
        background-position:300% 200%;
    }
    100%{
        background-position:400% 200%;
    }
}

.e{
    background:linear-gradient(to bottom , rgb(234 , 67 , 53) 50% , rgb(198 , 40 , 40) 50%);
    width:15pt;
    height:15pt;
    border-radius:50%;
    position:absolute ;
    left:89pt;
    bottom:3pt;
    animation:e 2s linear infinite ;
}

@keyframes e{
    100%{
        transform:rotateX(1turn) rotateY(1turn) rotateZ(1turn);
    }
}

.e:after{
    content:"";
    position:absolute ;
    width:7.5pt;
    height:7.5pt;
    background-color:#222;
    right:0;
    bottom:0;
}

.line{
    background:linear-gradient(to right , #4285F4 , #DB4437 , #F4B400 , #0F9D58);
    width:106pt;
    height:3pt;
    border-radius:2pt;
    background-size:400% 400%;
    background-position:0% 200%;
    position:absolute ;
    bottom:-5pt;
    animation:line 5s linear infinite ;
}

@keyframes line{
    0%{
        background-position:0% 200%;
    }
    25%{
        background-position:100% 200%;
    }
    50%{
        background-position:200% 200%;
    }
    75%{
        background-position:300% 200%;
    }
    100%{
        background-position:400% 200%;
    }
}
                        </style>
    </head>
    <body>
        <div class="container">
            <div class="google">
                <div class="g"></div>
                <div class="o"></div>
                <div class="o2"></div>
                <div class="g2">
                    <div class="down_part"></div>
                </div>
                <div class="l"></div>
                <div class="e"></div>
                <div class="line"></div>
            </div>
        </div>
    </body>
</html>

How to set video in background  in homepage using html and css?In this link we are provide you how toset video as background any web page.How to design home page for car usinghtml and css ?
Subscribe to: Posts (Atom)