You are currently viewing How to Create a Divided Circle Loading Page with CSS & HTML Code?
animated circle Page image

How to Create a Divided Circle Loading Page with CSS & HTML Code?

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:

https://youtu.be/D9E834DPrbQ

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

This Post Has 3 Comments

  1. 먹튀검증업체

    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.

  2. 먹튀검증업체

    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!

  3. Mofreh

    Thanks Kavin

Leave a Reply