Pure CSS to make progress in a circle

Question

Pure CSS to make progress in a circle

Navigation

#1 by (1 votes)

6

I'm trying to make a progress circle, but I can not. I want it exactly that way.

I want a black circle.

A border in gray smaller than this circle, type about 5px less.

A circle that is progress.

I found some tips on the internet but I can not put it into practice. I can not get the circle to figure out the correct percentage.

So far, I have done this 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>

css

asked by anonymous 25.10.2017 / 18:38

1 answer

Format date return with Date format and no String Remote access to the MySQL database

score 1 · Accepted Answer

Diego goes by parts.

First the style clip:rect(); has been discontinued . Now what we use is Clip-Path

In addition Rect means rectangle, ant would never work with it in the form of a circle. For this there is clip-path:circle();

% com_deprecated reference: link a>

% Reference% link

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 clip:rect(); is 100% CSS has no script. The technique I used does not use clip-path:circle(); but the result may interest you ...

It's a really simple template, but it's for didactic purposes and you see it working with your own code. If you want then I'll give you more sophisticated template links with CSS 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>