Skip to main content

Archive

Show more

Progress Percentage Circle Design | HTML And CSS

by Rustcode
Progress-Percentage-Circle-Design-html-and-css

Progress Percentage Circle Design Using HTML And CSS

You must have seen the "Progress Percentage Board" on some website because this is also a very popular and useful element for the website developer. It is similar to website loader but can also be used to show progress or skills on the website.

We will use the animation property of css to create this loader. and the border-radius property will be used to create the round shape. We hope you like this animation.

You can read interesting articles on web development. The link is given below.

If you want to learn animation using javascript and jsplugins, We have already created a lot of animation using various plugins of javascript, check out the playlist. We hope you like it.


01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Progress Percentage Circle Design | Rustcode</title>   
<link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>



02. HTML

<!DOCTYPE html>
<html>
<head>
  <title>Progress Percentage Circle Animation | Rustcode</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="circle-container">
  <div class="circle">
    <div class="item layer-1">
      <div class="fill"></div>
    </div>
    <div class="item layer-2">
      <div class="fill"></div>
    </div>
    <div class="inside-content">64%</div>
  </div>
</div>

</body>
</html>



03. CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700');

body{
  padding: 0px;
  margin: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #D5F2E3;
}

.circle-container{
  width: 150px;
  height: 150px;
  background: #E1E1E1;
  border-radius: 50%;
}

.circle-container .circle .item,
.circle-container .circle .fill{
  width: 150px;
  height: 150px;
  position: absolute;
  border-radius: 50%;
}

.circle-container .circle .item{
  clip: rect(0px, 150px, 150px, 64px);
}

.circle-container .circle .item .fill{
  clip: rect(0px, 64px, 150px, 0px);
  background-color: #2892D7;
}

.circle-container .circle .item.layer-1,
.circle-container .circle .fill{
  transform: rotate(126deg);
  animation: fill ease-in-out 3s;
}

@keyframes fill {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(126deg);
  }
}

.inside-content{
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #D5F2E3;
  text-align: center;
  margin-top: 10px;
  margin-left: 10px;
  position: absolute;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
  font-size: 32px;
  line-height: 130px;
}



04. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




05. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download the source code, you can download it from here and change this according to your need.





Comments

Post a Comment