How to create a circular progress bar over a image with only css?

Question

I´m trying to create a circular progress bar over a image, like the image attached.

I´d like when 100%, hide progress. Any help?

Answer 1

You can use CSS animation for this. This solution uses animated circle halves:

.circle {
  display: inline-flex;
  border-radius: 100%;
  background-image: url("https://i.stack.imgur.com/sRV6Q.jpg");
  overflow: hidden;
}

.circle__half {
  height: 200px;
  width: 100px;
  position: relative;
  overflow: hidden;
}

.circle__half:before {
  height: inherit;
  width: inherit;
  position: absolute;
  content: "";
  border-radius: 100px 0 0 100px;
  background-color: lime;
  transform-origin: 100% 50%;
  /* hidden by default */
  transform: rotate(180deg);
  opacity: 0.65;
  animation-name: rotate-circle-half;
  animation-duration: 4s;
  animation-timing-function: linear;
}

.circle__half--right {
  transform: scale(-1, -1);
}

.circle .circle__half--right:before {
  animation-name: rotate-circle-half--right;
}

/* show half of circle half of the time */
@keyframes rotate-circle-half {
  0% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes rotate-circle-half--right {
  0% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

<div class="circle">
  <div class="circle__half"></div>
  <div class="circle__half circle__half--right"></div>
</div>

Also if you want smooth circle hiding you can add animation for circle halves:

.circle {
  display: inline-flex;
  border-radius: 100%;
  background-image: url("https://i.stack.imgur.com/sRV6Q.jpg");
  overflow: hidden;
}

.circle__half {
  height: 200px;
  width: 100px;
  position: relative;
  overflow: hidden;
  animation-name: hide-smoothly;
  animation-duration: 2s;
  animation-delay: 4s;
  animation-fill-mode: forwards;
}

.circle__half:before {
  height: inherit;
  width: inherit;
  position: absolute;
  content: "";
  border-radius: 100px 0 0 100px;
  background-color: lime;
  transform-origin: 100% 50%;
  /* hidden by default */
  transform: rotate(180deg);
  opacity: 0.65;
  animation-name: rotate-circle-half;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.circle__half--right {
  transform: scale(-1, -1);
}

.circle .circle__half--right:before {
  animation-name: rotate-circle-half--right;
}

/* show half of circle half of the time */
@keyframes rotate-circle-half {
  0% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes rotate-circle-half--right {
  0% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes hide-smoothly {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

<div class="circle">
  <div class="circle__half"></div>
  <div class="circle__half circle__half--right"></div>
</div>

Answer 2

There's a plugin that's capable of doing it: jQuery.knob.

$(function() {
  $(".knob").knob();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Knob/1.2.13/jquery.knob.min.js"></script>
<input class="knob" data-width="150" data-width="100" data-displayInput="false" data-displayPrevious="true" data-fgColor="#87ceeb" data-skin="tron" data-thickness="15" value="75" />

If you want it animated, you can change the value of the input! Just take your mouse over the knob and use your mouse wheel to scroll it. Or see it animated here: jQuery Knob update value with animate