JSFiddle - React, Tailwind, and code Playground

by Evgeny Pisarev

HTML

<div class='container'>
    
  <div class='progress-ring' data-percentage='45'>
    <div class='content'>
      <h3>45</h3>
        <span>PHP</span>
    </div>
  </div>
    
  <div class='progress-ring' data-percentage='84'>
    <div class='content'>
      <h3>84</h3>
        <span>CSS</span>
    </div>
  </div>
    
  <div class='progress-ring' data-percentage='14'>
    <div class='content'>
      <h3>14</h3>
        <span>JS</span>
    </div>
  </div>
    
</div>

CSS

.progress-ring {
  width: 150px;
  height: 150px;
  float: left;
  border: none;
  border-radius: 50%;
  background-color: tomato;
  background-image: -webkit-linear-gradient(0deg, #2f3439 50%, transparent 50%, transparent), -webkit-linear-gradient(0deg, tomato 50%, #2f3439 50%, #2f3439);
  background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(90deg, tomato 50%, #2f3439 50%, #2f3439);
  position: relative;
}
.progress-ring .content {
  background-color: white;
  top: 50%;
  left: 50%;
  width: 130px;
  height: 130px;
  position: absolute;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  border-radius: 50%;
}
.progress-ring .content h3 {
  margin: 0;
  padding: 0;
  font-size: 28px;
  top: 50%;
  left: 50%;
  margin-left: 5px;
  position: absolute;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
}
.progress-ring .content h3::after {
  content: "%";
}

/*
  WARNING: Using 100 will generate a metric fuck ton of rules
*/
.progress-ring[data-percentage="0"] {
  background-image: -webkit-linear-gradient(0deg, #2f3439 50%, transparent 50%, transparent), -webkit-linear-gradient(0deg, tomato 50%, #2f3439 50%, #2f3439);
  background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(90deg, tomato 50%, #2f3439 50%, #2f3439);
}

.progress-ring[data-percentage="1"] {
  background-image: -webkit-linear-gradient(0deg, #2f3439 50%, transparent 50%, transparent), -webkit-linear-gradient(356.4deg, tomato 50%, #2f3439 50%, #2f3439);
  background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(93.6deg, tomato 50%, #2f3439 50%, #2f3439);
}

.progress-ring[data-percentage="2"] {
  background-image: -webkit-linear-gradient(0deg, #2f3439 50%, transparent 50%, transparent), -webkit-linear-gradient(352.8deg, tomato 50%, #2f3439 50%, #2f3439);
  background-image:...