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:

Create HTML file and add HTML code:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <link href="style.css" rel="stylesheet" type="text/css">
<svg><rect ></rect></svg>

Create CSS file and adding our style:

    margin: 0;
    padding: 0;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    align-items: center;
    background-color: #1a1a1a;
    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 {
        stroke-dashoffset: 250%;

You could Download the code form the following button:

Consequently You could follow us at :

Website URL:


Twitter: http://


Facebook: http://

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