Circular Progress Bar is a popular web element that is mainly used on business or personal websites. If you want to create a circular progress bar using HTML and CSS, then this article will help you. Here I am going to show you how to make a simple CSS circle progress bar. When you load the page, this animation will go from zero to your assigned meaning. A percentage of text is used here, but no animation is used in this text. It is made in a very simple way. ✅ Watch Live Preview 👉👉 Circular Progress Bar In this article, I will show you step by step how I made this circular progress bar design.To make it, you need to have an idea about basic HTML and CSS.
Step 1: The basic structure of Circular Progress Bar
I have used HTML and CSS to create the basic structure of the Circular Progress Bar. I have created a small circle on the webpage. The width and height of this circle are 150 px. The background color of the circle is white and margins are used to place it in the middle.
Step 2: Half of the simple CSS circle progress bar
As I said before, the animation in this circle is divided into two parts. This means that the animation has been divided into two parts up to the customer value. I have made the first part of those two parts. Width and height 150 have been used to make this animation equal in size to the Circular Progress Bar. Similarly, border-radius 50% has been used to make it round. Here I have set the background-color to blue. If you want to play an animation in another color, you can use that color here.
Step 3: The other half of the Circular Progress Bar
Now I have designed the other half of the Circular Progress Bar. I set the time to three seconds by adding animation here. This means that when this page is opened, the animation will take 3 seconds to reach the meaning you set from zero. Here 135 degrees have been used using transform. This transform will determine where the animation will end in this circle. ➤ We know that a circle is formed by 360. Since here we have divided the CSS circle progress bar into two parts, so each part is 180 degrees. ➤ Here we have set a 135-degree animation for each part using Transform. So it will be 270 degrees for the total circle. Here I want to increase the animation to 75% so I have used 270 degrees.
You determine the value of this degree according to your needs. For example, if you want the animation of the Circular Progress Bar will be up to 80%. But for that, you have to use 144 degrees here . Lastly, I have implemented this animation using @keyframes.
Step 4: Create a percentage in the Circular Progress Bar
Now I have added percentages in this circular progress bar. Although that percentage of animation is not added. Added text using basic HTML and CSS code. I have used text-align: center and position: absolute to place the text in the middle of the Circular Progress Bar. I used border-radius: 50% to make its background width and height 122 px and round. Here I have used font-size: 2em to make the size of the text smaller and larger.
As you can see in the picture above, now this CSS Circular Progress Bar is absolutely ready. Hope you find out from this article how I created this Circular Progress Bar using HTML and CSS.
There is a very easy to follow, informative and detailed tutorial on exactly how to achieve this (and more) by Anders Ingemann, which can be found here.
Its a fairly complex operation- so I’ll simply distil the final stage from the tutorial here
For first linear part, you can use linear-gradient:(270deg. ) for filling 50% of the circle.
For other linear part, you can increase the angle (270°+) to fill more than 50% of the circle (360° or 0° = 75% of the circle . 90° = 100% of the circle)
For example: linear-gradient(270deg, black 50%, transparent 50%), linear-gradient(0deg, black 50%, lightgray 50%) combination creates a circle with a lightgray background, filled with seventy-five percent black color. (snippet below)
Circle to fill a container animation
You may use box-shadow instead transform and a pseudo a bit smaller to avoid the buggy gap around the container and the shadow;
If I understand you correctly, here is one way you could make this work.
There are 3 elements to this; the image, the circle and the gap.
The circle is a div with a border-radius to round it out, and a border with the color of your choice.
The gap is a div that is the full height of the wrapper and the width of the intended gap. The div is given the same color as the background (white in this case — change to whatever you want). Then we apply a transform of -30deg to get the angle in your example.
The image is a div with a border-radius and is positioned in the middle of the wrapper.
The css then makes use of keyframes to add an animation to the gap div to make it rotate when you hover over the wrapper. This gives the illusion of the circle rotating.
Is don’t think it’s particularly a bug in your code — it’s just that the system is trying to work out how to show part CSS pixels on a screen which uses several screen pixels per CSS pixel. Some can get ‘left behind’.
A different way of creating the effect you want is to use background images made up of a conic gradient overlaid with a radial one (to give the ‘hole’ in the middle).
This is a simple snippet to demonstrate the idea in HTML/CSS. The CSS variable —ratio could be set in JS using setProperty to whatever the ratio of red to green is required.
