How to make partly bordered circle on top of another border?

Question

I have a circle with some percentage covered border on top of another one with lower opacity. How to make this by CSS? I tried width: 20%, but for border-radius it does not work. I want to make this as on example image:

Also how to make ending of partly covered border with half-circle shape?

Answer 1

this is a purely css based progress bar in circle shape
in your html:

    <div class="c100 p25">
     <span>25%</span>
     <div class="slice">
      <div class="bar"></div>
       <div class="fill"></div>
       </div>
       </div>
 in css:

    .c100.p25 .fill {
      position: absolute;
      border: 0.08em solid #307bbb;
      width: 0.84em;
      height: 0.84em;
      clip: rect(0em, 0.5em, 1em, 0em);
      border-radius: 50%;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
       -ms-transform: rotate(0deg);
       -o-transform: rotate(0deg);
       transform: rotate(0deg);
       }
       .c100 {
        position: relative;
        font-size: 120px;
        width: 1em;
        height: 1em;
        border-radius: 50%;
        float: left;
        margin: 0 0.1em 0.1em 0;
        background-color: #cccccc;
         }
        .c100 *,
        .c100 *:before,
        .c100 *:after {
         -webkit-box-sizing: content-box;
         -moz-box-sizing: content-box;
            box-sizing: content-box;
        }
          .c100.center {
           float: none;
           margin: 0 auto;
               }

               .c100 > span {
               position: absolute;
                  width: 100%;
                z-index: 1;
                left: 0;
                top: 0;
                 width: 5em;
                line-height: 5em;
                 font-size: 0.2em;
                 color: #cccccc;
                 display: block;


    text-align: center;
      white-space: nowrap;
      -webkit-transition-property: all;
      -moz-transition-property: all;
      -o-transition-property: all;
      transition-property: all;
      -webkit-transition-duration: 0.2s;
      -moz-transition-duration: 0.2s;
      -o-transition-duration: 0.2s;
      transition-duration: 0.2s;
      -webkit-transition-timing-function: ease-out;
      -moz-transition-timing-function: ease-out;
      -o-transition-timing-function: ease-out;
      transition-timing-function: ease-out;
    }
    .c100:after {
      position: absolute;
      top: 0.08em;
      left: 0.08em;
      display: block;
      content: " ";
      border-radius: 50%;
      background-color: #f5f5f5;
      width: 0.84em;
      height: 0.84em;
      -webkit-transition-property: all;
      -moz-transition-property: all;
      -o-transition-property: all;
      transition-property: all;
      -webkit-transition-duration: 0.2s;
      -moz-transition-duration: 0.2s;
      -o-transition-duration: 0.2s;
      transition-duration: 0.2s;
      -webkit-transition-timing-function: ease-in;
      -moz-transition-timing-function: ease-in;
      -o-transition-timing-function: ease-in;
      transition-timing-function: ease-in;
    }
    .c100 .slice {
      position: absolute;
      width: 1em;
      height: 1em;
      clip: rect(0em, 1em, 1em, 0.5em);
    }
.c100.p25 .bar {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);

.c100:hover {
  cursor: default;
}
.c100:hover > span {
  width: 3.33em;
  line-height: 3.33em;
  font-size: 0.3em;
  color: #307bbb;
}
.c100:hover:after {
  top: 0.04em;
  left: 0.04em;
  width: 0.92em;
  height: 0.92em;
}