Codeconvey
  • Home
  • Tutorials
    • CSS Slideshow
    • CSS Navigation
    • Modal & Popup
    • Hover Effects
    • HTML Forms
    • Layout
  • CSS Animation
  • How To
  • Resources
No Result
View All Result
Codeconvey
No Result
View All Result

Pure CSS Percentage Circle With Animation

Ashfaq Ahmed by Ashfaq Ahmed
January 21, 2023
in Loading Animation
12
CSS Percentage Circle
10
SHARES
0
VIEWS
Share on FacebookShare on Twitter

We have already posted a pure CSS radial progress bar, and here we will show you another way of making percentage circle with animation.

Our previous tutorial was built with gradient colors. Today I am going to demonstrate how to create an animated circle without gradient color and also it will animate page load.

The CSS Circles can easily created using pure CSS and HTML only. You don’t need to add any JavaScript or jQuery. It still supports manage modern browsers and can customize easily.

The percentage circle is good to use to present your skills. It allows users to know your skills quickly, and also it’s a great way to tell your users what you are providing and what service you will give to their customers.

How to Create a Percentage Circle with CSS

If we take a look at HTML, we will see it doesn’t require to write a large number of lines. We have circle wrapper and then it’s child div class name circle.

Next, we added two fill and mask div, and finally, we would have a div to add percentage number. Just like here.

<div class="circle-wrap">
  <div class="circle">
    
    <div class="mask full">
      <div class="fill"></div>
    </div>
   
    <div class="mask half">
      <div class="fill"></div>
    </div>
    
    <div class="inside-circle">
      70%
    </div>
    
  </div>

What we do with the wrapper is to set the width and height of the circle as per our need and add the background color which we want to see as fill. Also, border-radius should be added to make it rounded.

.circle-wrap {
  margin: 50px auto;
  width: 150px;
  height: 150px;
  background: #e6e2e7;
  border-radius: 50%;
}

The mask and fill also have the same size of width and height as a wrapper. Also border-radius. The extra thing we will do here to add the position absolute.

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

For the mask, we are going to use clip CSS property and set recent values.

.circle-wrap .circle .mask {
  clip: rect(0px, 150px, 150px, 75px);
}

As for as fill, we need to do the same thing, but the value position will change, and the background color will be added. We will add the background color that we want to see as filled.

.circle-wrap .circle .mask .fill {
  clip: rect(0px, 75px, 150px, 0px);
  background-color: #9e00b1;
}
.circle-wrap .circle .mask.full,
.circle-wrap .circle .fill {
  animation: fill ease-in-out 3s;
  transform: rotate(126deg);
}

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

Finally, we need to do something with inside-circle to make it look good and perfect. OK, we do add the width and height, but we do set less width and height as compared to the wrapper so it should not fill out the whole circle.

Next, we will add border-radius, set background color white and do a few other stylings. Let have a look at the CSS blow.

.circle-wrap .inside-circle {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #fff;
  line-height: 130px;
  text-align: center;
  margin-top: 10px;
  margin-left: 10px;
  position: absolute;
  z-index: 100;
  font-weight: 700;
  font-size: 2em;
}
Tags: Progress Bar
Buy Me A Coffee Demo Download
Previous Post

Pure CSS Image Slider without Javascript

Next Post

Fullscreen Video Parallax Background Using CSS3

Next Post
Video Parallax Background

Fullscreen Video Parallax Background Using CSS3

Comments 12

  1. shrushti dhokai says:
    3 years ago

    It was really very helpful. and easy to implement .

    Thank you

    Reply
  2. Kirill Zavrazhnov says:
    3 years ago

    On 100% it adds small gap between two halfs.

    Reply
  3. Shwetank says:
    3 years ago

    What to change if i need to show different value of percentages here?

    Reply
    • Muhammad Asif says:
      3 years ago

      Hi!
      You need to update values of CSS clip property in the mask and fill selector according to your percentage.
      Look at the following:

      .circle-wrap .circle .mask {
        clip: rect(0px, 150px, 150px, 75px);
      }
      

      Similarly, keep the same values for fill selector.

  4. CRice says:
    3 years ago

    Hey, if you could point towards an example to change the precentage completion, I’m sure this tutorial would become exponentially better. As someone who’s not an expert with CSS, I tried changing the clip value for the mask selector but with no avail. Whites appear at different positions and I lost the shape of the circle

    Reply
    • Muhammad Asif says:
      3 years ago

      Hi CRice!
      You can calculate the masked values with respect to the size of the circle.

  5. Mythos says:
    2 years ago

    In general a nice way.
    But your explanation about changing the percentage is really not good…
    An example would be much better.

    Reply
    • Muhammad Asif says:
      2 years ago

      Thanks for your feedback! We’ll write something better about circular progress bar with percentage in upcoming tutorials. Keep visiting us!

  6. vineet rastogi says:
    2 years ago

    how to add this percentage circle in cf7 with multistep (4 step) option

    Reply
    • Ashfaq Ahmed says:
      2 years ago

      Not sure about the CF7 but you can give a try by using the CF style plugin.

  7. Sam says:
    1 year ago

    Hi, please could you set this for me so it’s 2/3rds the size & shows the percentage at 50% it’s too hard to work out , thank you 🙂

    Reply
    • Muhammad Asif says:
      1 year ago

      Hi Sam!
      You can update the percentage value in HTML structure like below:

          <div class="inside-circle">
            50%
          </div>
      

      Then you need to update the CSS clip-path value to adjust the fill area according to your percentage value. You can do that in the following selector:

      .circle-wrap .circle .mask {
        clip: rect(0px, 150px, 150px, 75px);
      }
      

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe More Tutorials

Subscribe to our mailing list to receives monthly updates direct to your inbox!

You might also like

CSS Flip Animation on Hover – Flipping Card

CSS Flip Animation on Hover – Flipping Card

January 7, 2020
CSS Percentage Circle

Pure CSS Percentage Circle With Animation

January 21, 2023
Smooth CSS Fade in on Page Load Animation

Smooth CSS Fade in On Page Load Animation

December 11, 2019
Hexagonal CSS Grid

Auto Adjustable Hexagonal CSS Grid

December 17, 2019
Codeconvey

© 2023 Codeconvey.com - All rights reserved.

Navigate Site

  • Home
  • About Us
  • Contact us
  • License
  • Disclaimer
  • DMCA
  • Terms & Conditions

Follow Us

No Result
View All Result
  • Home
  • CSS Animation
  • CSS Navigation
  • HTML Forms
  • Hover Effects
  • CSS Slideshow
  • Layout
  • Modal & Popup
  • How To
  • Resources

© 2023 Codeconvey.com - All rights reserved.