Rajneesh Tutorials
Facebook Loader Animations
By Rajneesh
May 30, 2020
View our previous post
Facebook Loading Animation by HTML CSS
HELLO friends did you want a amazing Facebook Loading Animation made with html css only fully working and responsive design
by Rajneesh Thakur
Is it awesome ?
You can run in on mobile
Pure css
Code
You can join us on Facebook page. Here we provide all the basic tutorial of html css and java script. Here we also upload the amazing design tutorial with html and css
And python project also. Like our page in Facebook, click Rajneesh Tutorials
Here is code of Facebook Loading Animation
HTML & CSS
<<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
body{
display: flex;
align-items: center;
justify-content: center;
font-family: arial;
}
#i{
overflow: hidden ;
display: flex;
justify-content: center;
background: rgb(0,100,255) ;
width: 50px;
color: #fff;
height: 50px;
box-shadow: 0 0 5px rgb(0,0,0);
font-size: 70px;
font-weight: bold;
border-radius: 100%;
position: absolute ;
top: 20%;
}
.a{
width: 10px;
height: 10px;
background: rgb(0,100,255);
margin: 0 5px;
border-radius: 100%;
animation: raj 2s infinite ;
}
@keyframes raj{
100%{
background: #fff ;
}
}
#c{
animation-delay: .5s;
}
#d{
animation-delay: 1s;
}
</style>
</head>
<body>
<p id="i"> f </p>
<div class="a" id="b">
</div>
<div class="a" id="c">
</div>
<div class="a" id="d">
</div>
</body>
</html>
How to run this code
To run this code there are some simple steps
Copy code
Make a file index.html
Paste code and save file
Open file in browser
Next topic on how to make a clock with html css js only:
Example
You can make it more awesome
Comments below: Do you like our blogs?
Follow us from options
Thanks to see our blog
Follow me to get more like this
© Rajneesh Tutorials
Facebook id Rajneesh
Website Rajneesh home
Facebook page Rajneesh Tutorials
Blog Top 10s
Blog Rajneesh Tutorials
Comments
Post a Comment