CSS Loading Balls.Today in this blog , we gonna learn about CSS Loading Balls Effect.
CSS Loading Balls
Hi Friends!
Today in this blog, we gonna learn about CSS Loading Balls Effect. Loading Animations, Button Neon Effects, and Button Hover Effects are some of the best attractive and clickable parts of the website. I already uploaded some loader effects if you're a beginner let's go and learn it.
This Loading Balls Effect is cool to see on our websites. In the previous blog, we will learn about CSS Animated Login Form Design if you're a beginner I will recommend learning the Login Form effect first. If you learn that and this blog will help you to learn about Loading Balls Effect. In this blog, I will give my video tutorial and source codes to download. if you have any doubts ask me in the comment section.
HTML file
[
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css loading balls</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="circle"></div>
<div class="loader">
<span></span>
<span></span>
</div>
</body>
</html>
]
You can copy this HTML file. and paste it into your HTML file. Now you will learn it clearly. and don't forget to save the file with an extension. HTML. This extension is more important for creating a website page.
CSS file
[
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
background-color: #262626FF;
}
.circle{
display: block;
position: absolute;
height: 300px;
width: 300px;
border: 50px solid black;
border-radius: 50%;
}
.loader{
display: block;
position: relative;
height: 50px;
width: 300px;
animation: anime 2s linear infinite;
}
span{
display: block;
position: absolute;
height: 50px;
width: 50px;
border-radius: 50%;
}
span:nth-child(1){
top: 0;
left: 0;
background-color: red;
box-shadow: 1px 1px 60px red,
1px 1px 60px red;
}
span:nth-child(2){
top: 0;
right: 0;
background-color: dodgerblue;
box-shadow: 1px 1px 60px dodgerblue,
1px 1px 60px dodgerblue;
}
@keyframes anime{
100%{
transform: rotate(360deg);
}
}
.circle2{
display: block;
position: absolute;
left: 45%;
height: 300px;
width: 300px;
border: 50px solid black;
border-radius: 50%;
}
.box1{
display: block;
position: absolute;
left: 35%;
height: 50px;
width: 300px;
animation: anime 2s linear infinite;
}
.box2{
display: block;
position: absolute;
left: 45%;
height: 50px;
width: 300px;
transform: rotate(360deg);
animation: anime 2s linear infinite;
}
span{
display: block;
position: absolute;
height: 50px;
width: 50px;
border-radius: 50%;
}
span:nth-child(1){
top: 0;
left: 0;
background: linear-gradient(45deg,coral,yellow);
box-shadow: 1px 1px 60px yellow,
1px 1px 60px yellow;
}
span:nth-child(2){
top: 0;
right: 0;
background: linear-gradient(45deg,limegreen,lime);
box-shadow: 1px 1px 60px lime,
1px 1px 60px lime;
}
@keyframes anime{
100%{
transform: rotate(360deg);
filter: hue-rotate(360deg);
}
}
]
Secondly, you can copy this CSS file. and paste it into your CSS file. and remember the file extension called. CSS. This will help you to design your webpage. If you want more clarity on this topic you can watch my video tutorial and If you have any doubts ask me in the comment section.
Video Tutorial
Watch this video fully and learn all loader effects for developing your Loader. repeat the code for your practice this will help you to learn this Loading Balls Effect more effectively and This video is also helpful to learn faster. colourful Loading Balls Effects are an important part of our websites. I hope this tutorial will be helpful to learn the loader effect. I will give you Source Code and you can download it.
COMMENTS