Partially completed circle (with text) in CSS

Question

I'm trying to create the following effect with on a design: https://i.sstatic.net/dhima.png

I can create a bordered circle fine - but the matter of partially completing the circle is proving difficult. There are a myriad of different ways to do this with Javascript and Canvas, but I can't find a solid way to achieve it in CSS. I don't mind having a number of different classes for different values, but is there an elegant solution available?

Answer 1

Updated: this is very possible using pure CSS3.

(You should be able to open the below demo and customize to your result)

Use @keyframes to animate between the numbers. You'll need to add this.

Below is using @keyframes 'rotate' { for the circular motion.

body { background: #222; }

.circle {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: #333;
  border-radius: 50%;
}

.inner-circle {
  width: 92%;
  height: 92%;
  background: #222;
  border-radius: 50%;
  margin: auto;
  vertical-align: middle;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  
}

.spinner {
  height: 0;
  width: 0;
  border-radius: 50%;
  border-right: 50px solid rgba(255,255,255,0.3);
  border-top: 50px solid transparent;
  border-left: 50px solid transparent;
  border-bottom: 50px solid transparent;

  -webkit-animation: rotate 1.6s infinite;

          animation: rotate 1.6s infinite;
}

@-webkit-keyframes 'rotate' {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes 'rotate' {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

<div class="circle">
  <div class="spinner"></div>
  <div class="inner-circle"></div>
</div>