CSS3 radial progress bar by Geedmo

CSS3 radial progress bar is useful to create a radial bar chart. Below is a simple demo for it by Geedmo. In this example, Geedmo is using SASS to make coding easier and faster. But you can actually use CSS3 only to make a radial progress bar.

To see how it works, just click on the button Run Pen below:

How to create a CSS3 radial progress bar

Step 1: Add Html

<div class="wrap">
  <!-- 
    Use class "progress-radial" to represent for a radio progress bar.
    And use class "progress-xx" to represent for a percentage.
    With "xx" is from 0 to 100.
  -->
  <div class="progress-radial progress-25">
    <div class="overlay">25%</div>
  </div>

  <div class="progress-radial progress-50">
    <div class="overlay">50%</div>
  </div>

  <div class="progress-radial progress-75">
    <div class="overlay">75%</div>
  </div>

  <div class="progress-radial progress-90">
    <div class="overlay">90%</div>
  </div>
</div>
<!--
  @title: CSS3 Background Radial Progress Bars
  @author: @geedmo 
  @url: http://geedmo.com
-->

Step 2: Add CSS

SASS version:

@import compass

// Colors
$barColor: tomato
$overlayColor: #fffde8
$backColor: #2f3439

@import url(https://fonts.googleapis.com/css?family=Noto+Sans)

body
  padding: 30px 0
  background-color: $backColor
  font-family: 'Noto Sans', sans-serif

.wrap
  width: 600px
  margin: 0 auto

/* -------------------------------------
 * Bar container
 * ------------------------------------- */
.progress-radial
  float: left
  margin-right: 30px
  position: relative
  width: 100px
  height: 100px
  border-radius: 50%
  border: 2px solid $backColor // remove gradient color
  background-color: $barColor // default 100%

/* -------------------------------------
 * Optional centered circle w/text
 * ------------------------------------- */  
.progress-radial .overlay
  position: absolute
  width: 60px
  height: 60px
  background-color: $overlayColor
  border-radius: 50%
  margin-left: 20px
  margin-top: 20px
  text-align: center
  line-height: 60px
  font-size: 16px
  
/* -------------------------------------
 * Mixin for progress-% class
 * ------------------------------------- */

$step: 5 // step of % for created classes

$loops: round(100 / $step)
$increment: 360 / $loops
$half: round($loops / 2)
@for $i from 0 through $loops
  .progress-#{$i*$step}
    @if $i < $half
      $nextdeg: 90deg + ( $increment * $i )
      background-image: linear-gradient(90deg, $backColor 50%, transparent 50%, transparent), linear-gradient($nextdeg, $barColor 50%, $backColor 50%, $backColor)
    @else
      $nextdeg: -90deg + ( $increment * ( $i - $half ) )
      background-image: linear-gradient($nextdeg, $barColor 50%, transparent 50%, transparent), linear-gradient(270deg, $barColor 50%, $backColor 50%, $backColor)

CSS3 version:

@import url(https://fonts.googleapis.com/css?family=Noto+Sans);
body {
  padding: 30px 0;
  background-color: #2f3439;
  font-family: 'Noto Sans', sans-serif;
}

.wrap {
  width: 600px;
  margin: 0 auto;
}

/* -------------------------------------
 * Bar container
 * ------------------------------------- */
.progress-radial {
  float: left;
  margin-right: 30px;
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid #2f3439;
  background-color: tomato;
}

/* -------------------------------------
 * Optional centered circle w/text
 * ------------------------------------- */
.progress-radial .overlay {
  position: absolute;
  width: 60px;
  height: 60px;
  background-color: #fffde8;
  border-radius: 50%;
  margin-left: 20px;
  margin-top: 20px;
  text-align: center;
  line-height: 60px;
  font-size: 16px;
}

/* -------------------------------------
 * Mixin for progress-% class
 * ------------------------------------- */
.progress-0 {
  background-image: linear-gradient(
      90deg,
      #2f3439 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(90deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-5 {
  background-image: linear-gradient(
      90deg,
      #2f3439 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(108deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-10 {
  background-image: linear-gradient(
      90deg,
      #2f3439 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(126deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-15 {
  background-image: linear-gradient(
      90deg,
      #2f3439 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(144deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-20 {
  background-image: linear-gradient(
      90deg,
      #2f3439 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(162deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-25 {
  background-image: linear-gradient(
      90deg,
      #2f3439 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(180deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-30 {
  background-image: linear-gradient(
      90deg,
      #2f3439 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(198deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-35 {
  background-image: linear-gradient(
      90deg,
      #2f3439 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(216deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-40 {
  background-image: linear-gradient(
      90deg,
      #2f3439 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(234deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-45 {
  background-image: linear-gradient(
      90deg,
      #2f3439 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(252deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-50 {
  background-image: linear-gradient(
      -90deg,
      #ff6347 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-55 {
  background-image: linear-gradient(
      -72deg,
      #ff6347 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-60 {
  background-image: linear-gradient(
      -54deg,
      #ff6347 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-65 {
  background-image: linear-gradient(
      -36deg,
      #ff6347 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-70 {
  background-image: linear-gradient(
      -18deg,
      #ff6347 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-75 {
  background-image: linear-gradient(
      0deg,
      #ff6347 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-80 {
  background-image: linear-gradient(
      18deg,
      #ff6347 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-85 {
  background-image: linear-gradient(
      36deg,
      #ff6347 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-90 {
  background-image: linear-gradient(
      54deg,
      #ff6347 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-95 {
  background-image: linear-gradient(
      72deg,
      #ff6347 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-100 {
  background-image: linear-gradient(
      90deg,
      #ff6347 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

Web UI Element

Progress Bar