Pure CSS Loader using html and CSS | Animated Loading effect for Your website Using HTML and CSS
Hello guys, Welcome in planics developer We are giving
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
or something then click here and get latest design free
HOW TO DESIGN BEST PRODUCT CARD IN2020?
Here we show you how to design animated Square loader
for website so please check it out in YouTube.
Free Cards Effect in HTML with CSS
HOW TO DESIGN squre LOADER USING ONLY HTMLAND CSS?
How to design pure css Loader using html and css ? How to set round loader for website ?
loader.html
|
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color:black;
}
.center{
text-align:center;
/* #cc208e
0%, #6713d2 */
}
.loader {
position:absolute ;
top:20%;
Left:45%;
border: 16px
solid #f3f3f3;
border-radius: 50%;
border-top:
15px solid #cc208e;
width:
120px;
height:
120px;
-webkit-animation: spin 2s linear
infinite;
animation:
spin 2s linear infinite;
}
.loader1{
position:absolute ;
Left:45%;
top:450px;
border: 16px
groove #f3f3f3;
border-radius: 50%;
border-bottom: 14px solid
#cc208e;
border-top:
14px solid #6713d2;
width:
120px;
height:
120px;
-webkit-animation: spin 1.5s linear
infinite;
animation:
spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg);}
100% {
-webkit-transform:
rotate(360deg); }
}
@keyframes spin {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); }
}
</style
</head>
<body class="center">
<div class=" loader"></div>
<div class="loader1"></div>
</body>
</html>
|
HOW TO SET VIDEO IN BACKGROUND IN HOMEPAGE USING HTML 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 ?
2 .loader
3. Home page
4. Login
0 coment�rios: