Pure CSS for circle progress

Question

Pure CSS for circle progress

Asked 6 years, 8 months ago

Viewed 500 times

6

I’m trying to make a circle of progress, but I’m not making it. I want it exactly this way.

I want a black circle.
A gray border smaller than that circle, like 5px less.
A circle that is progress.

I found some tips on the internet but I’m not able to put in practice. I can’t make the circle understand the right percentage.

So far, I’ve done it below:

.percent {
  position: absolute;
  background-color: #000;
  width: 80px;
  height: 80px;
  left: 0;
  right: 0;
  top: 50px;
  margin: auto;
  color: #fff;
  font-size: 24px;
  display: table;
  text-align: center;
  border-radius: 50%;
}

.slice {
  width: 64px;
  height: 64px;
  border: 4px solid #fff;
  border-radius: 50%;
  top: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
}

.bar {
  border: 4px solid #f00;
  border-radius: 50%;
  width: 64px;
  height: 64px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
  clip: rect(0, 30px, 30px, 0);
  transform: rotate(0deg);
}

<div class="percent">
  <div class="slice">
    
  </div>
  <div class="bar"></div>
    <div class="fill"></div>
</div>

I took a negative here for no reason. Until when?

– Diego Souza

2017/11/08 at 17:38

1 answer

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2018-01-05T21:30:17+00:00

Diego we go by parts.

First style clip:rect(); was discontinued. Now what is used is the Clip-Path

In addition to the Rect that is to say rectangle, Antão would never work with it in circle shape. For that there is the clip-path:circle();

Reference of clip:rect(); (deprecated): https://developer.mozilla.org/en-US/docs/Web/CSS/clip

Reference of clip-path:circle(); https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

Now let’s get down to business, the code!

I used as a basis the design and code you posted, and I did the animation using @keyframes is 100% CSS has no script. The technique I used does not use clip:rect(); but the result may interest you...

It is a very simple model even, but it is for educational purposes and you see working with your own code. If you want later I’ll send you more sophisticated CSS-only template links as well.

.percent {
    position: absolute;
    background-color: #000;
    width: 80px;
    height: 80px;
    left: 0;
    right: 0;
    top: 50px;
    margin: auto;
    border-radius: 50%;
    }
    .slice {
    width: 64px;
    height: 64px;
    border: 4px solid #fff;
    border-radius: 50%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    }
    .bar1 {
    border: 4px solid #f00;
    border-radius: 50%;
    width: 64px;
    height: 64px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    border-top: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid transparent;
    -webkit-animation: loader1 4s linear infinite;
            animation: loader1 4s linear infinite;
    }
    .bar2 {
    border: 4px solid #f00;
    border-radius: 50%;
    width: 64px;
    height: 64px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    border-top: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid transparent;
    -webkit-animation: loader2 4s linear infinite;
            animation: loader2 4s linear infinite;
    }

    @-webkit-keyframes loader1 {
        0% {
            border-top: 4px solid transparent;
            border-right: 4px solid transparent;
            border-bottom: 4px solid transparent;
            border-left: 4px solid transparent;
        }
        25% {
            border-top: 4px solid red;
            border-right: 4px solid transparent;
            border-bottom: 4px solid transparent;
            border-left: 4px solid transparent;
        }
        50% {
            border-top: 4px solid red;
            border-right: 4px solid red;
            border-bottom: 4px solid transparent;
            border-left: 4px solid transparent;
        }
        75% {
            border-top: 4px solid red;
            border-right: 4px solid red;
            border-bottom: 4px solid red;
            border-left: 4px solid transparent;
        }
        100% {
            border-top: 4px solid red;
            border-right: 4px solid red;
            border-bottom: 4px solid red;
            border-left: 4px solid red;
        }
    }

    @keyframes loader1 {
        0% {
            border-top: 4px solid transparent;
            border-right: 4px solid transparent;
            border-bottom: 4px solid transparent;
            border-left: 4px solid transparent;
        }
        25% {
            border-top: 4px solid red;
            border-right: 4px solid transparent;
            border-bottom: 4px solid transparent;
            border-left: 4px solid transparent;
        }
        50% {
            border-top: 4px solid red;
            border-right: 4px solid red;
            border-bottom: 4px solid transparent;
            border-left: 4px solid transparent;
        }
        75% {
            border-top: 4px solid red;
            border-right: 4px solid red;
            border-bottom: 4px solid red;
            border-left: 4px solid transparent;
        }
        100% {
            border-top: 4px solid red;
            border-right: 4px solid red;
            border-bottom: 4px solid red;
            border-left: 4px solid red;
        }
    }

    @-webkit-keyframes loader2 {
        0% {
            border-top: 4px solid transparent;
            border-right: 4px solid transparent;
            border-bottom: 4px solid transparent;
            border-left: 4px solid transparent;
            -webkit-transform: rotate(0deg);
                    transform: rotate(0deg);
        }
        25% {
            border-top: 4px solid red;
            border-right: 4px solid transparent;
            border-bottom: 4px solid transparent;
            border-left: 4px solid transparent;
            -webkit-transform: rotate(90deg);
                    transform: rotate(90deg);
        }
        50% {
            border-top: 4px solid red;
            border-right: 4px solid transparent;
            border-bottom: 4px solid transparent;
            border-left: 4px solid red;
            -webkit-transform: rotate(180deg);
                    transform: rotate(180deg);
        }
        75% {
            border-top: 4px solid red;
            border-right: 4px solid transparent;
            border-bottom: 4px solid red;
            border-left: 4px solid red;
            -webkit-transform: rotate(270deg);
                    transform: rotate(270deg);
        }
        100% {
            border-top: 4px solid red;
            border-right: 4px solid red;
            border-bottom: 4px solid red;
            border-left: 4px solid red;
            -webkit-transform: rotate(360deg);
                    transform: rotate(360deg);
        }
    }

    @keyframes loader2 {
        0% {
            border-top: 4px solid transparent;
            border-right: 4px solid transparent;
            border-bottom: 4px solid transparent;
            border-left: 4px solid transparent;
            -webkit-transform: rotate(0deg);
                    transform: rotate(0deg);
        }
        25% {
            border-top: 4px solid red;
            border-right: 4px solid transparent;
            border-bottom: 4px solid transparent;
            border-left: 4px solid transparent;
            -webkit-transform: rotate(90deg);
                    transform: rotate(90deg);
        }
        50% {
            border-top: 4px solid red;
            border-right: 4px solid transparent;
            border-bottom: 4px solid transparent;
            border-left: 4px solid red;
            -webkit-transform: rotate(180deg);
                    transform: rotate(180deg);
        }
        75% {
            border-top: 4px solid red;
            border-right: 4px solid transparent;
            border-bottom: 4px solid red;
            border-left: 4px solid red;
            -webkit-transform: rotate(270deg);
                    transform: rotate(270deg);
        }
        100% {
            border-top: 4px solid red;
            border-right: 4px solid red;
            border-bottom: 4px solid red;
            border-left: 4px solid red;
            -webkit-transform: rotate(360deg);
                    transform: rotate(360deg);
        }
    }

<div class="percent">
    <div class="slice"></div>
    <div class="bar1"></div>
    <div class="fill"></div>
</div>

<div class="percent" style="margin-left: 100px">
    <div class="slice"></div>
    <div class="bar2"></div>
    <div class="fill"></div>
</div>