Divided Circle Loading Page: In this lesson we will learn how to create an animation which could be used as a landing page or as a loading page. Loading page features is for supporting and minimize the boring amount that happens when the user wait for website loading.
This lesson will follow the following order:
- Create HTML file and add HTML code.
- Create CSS file and adding our style.
We Explained “Divided Circle Loading Page” at this Video:
Create HTML file and add HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<svg><rect ></rect></svg>
</body>
</html>Create CSS file and adding our style:
body{
margin: 0;
padding: 0;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
display: flex;
align-items: center;
background-color: #1a1a1a;
}
svg{
width: 100px;
height: 100px;
border-radius: 50%;
}
svg rect{
width: 100px;
height: 100px;
fill: none;
stroke-width: 100px;
stroke: #ff690a;
stroke-dasharray: 100;
stroke-dashoffset: 50%;
animation: animate 2s linear infinite;
}
@keyframes animate {
to{
stroke-dashoffset: 250%;
}
}
You could Download the code form the following button:
Consequently You could follow us at :
Website URL: https://www.safhatech.com/
YouTube: https://www.youtube.com/channel/UCIVzh6iykNowNcOUT5Gfasw
Twitter: http:// https://twitter.com/safhatech
Instagram: https://www.instagram.com/safhatech
Facebook: http:// https://www.facebook.com/Safhatech-487171875443687
Phone: 967778283416
Hello i am kavin, its my first occasion to commenting anywhere, when i read this piece of writing i thought i could
also make comment due to this sensible post.
Thanks Kavin
I absolutely love your blog and find a lot of your post’s to
be just what I’m looking for. Would you offer guest writers to write content in your case?
I wouldn’t mind creating a post or elaborating on a
few of the subjects you write regarding here.
Again, awesome website!