Kreisförmiger Fortschrittsbalken mit CSS implementiert

<div Klasse="wrap">
  
<div Klasse="Fortschritt-radial Fortschritt-25">
  <div class="overlay">25 %</div>
</div>

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

<div Klasse="Fortschritt-radialer Fortschritt-75">
  <div class="overlay">75 %</div>
</div>

<div Klasse="Fortschritt-radial Fortschritt-90">
  <div class="overlay">90 %</div>
</div>
  
</div>

@import-URL (https://fonts.googleapis.com/css?family=Noto+Sans);
Körper {
  Polsterung: 30px 0;
  Hintergrundfarbe: #2f3439;
  Schriftfamilie: „Noto Sans“, serifenlos;
}

.wickeln {
  Breite: 600px;
  Rand: 0 automatisch;
}

/* -------------------------------------
 * Bar-Container
 * ------------------------------------- */
.Fortschritt-radial {
  schweben: links;
  Rand rechts: 30px;
  Position: relativ;
  Breite: 100px;
  Höhe: 100px;
  Randradius: 50 %;
  Rand: 2px durchgezogen #2f3439;
  Hintergrundfarbe: Tomate;
}

/* -------------------------------------
 * Optionaler zentrierter Kreis mit Text
 * ------------------------------------- */
.fortschritt-radial .overlay {
  Position: absolut;
  Breite: 60px;
  Höhe: 60px;
  Hintergrundfarbe: #fffde8;
  Randradius: 50 %;
  Rand links: 20px;
  Rand oben: 20px;
  Textausrichtung: zentriert;
  Zeilenhöhe: 60px;
  Schriftgröße: 16px;
}

/* -------------------------------------
 * Mixin für Fortschritts-%-Klasse
 * ------------------------------------- */
.Fortschritt-0 {
  Hintergrundbild: linearer Farbverlauf (90 Grad, #2f3439 50 %, rgba (0, 0, 0, 0) 50 %, rgba (0, 0, 0, 0)), linearer Farbverlauf (90 Grad, #ff6347 50 %, #2f3439 50 %, #2f3439);
}

.Fortschritt-5 {
  Hintergrundbild: linearer Farbverlauf (90 Grad, #2f3439 50 %, rgba (0, 0, 0, 0) 50 %, rgba (0, 0, 0, 0)), linearer Farbverlauf (108 Grad, #ff6347 50 %, #2f3439 50 %, #2f3439);
}

.Fortschritt-10 {
  Hintergrundbild: linearer Farbverlauf (90 Grad, #2f3439 50 %, rgba (0, 0, 0, 0) 50 %, rgba (0, 0, 0, 0)), linearer Farbverlauf (126 Grad, #ff6347 50 %, #2f3439 50 %, #2f3439);
}

.Fortschritt-15 {
  Hintergrundbild: linearer Farbverlauf (90 Grad, #2f3439 50 %, rgba (0, 0, 0, 0) 50 %, rgba (0, 0, 0, 0)), linearer Farbverlauf (144 Grad, #ff6347 50 %, #2f3439 50 %, #2f3439);
}

.Fortschritt-20 {
  Hintergrundbild: linearer Farbverlauf (90 Grad, #2f3439 50 %, rgba (0, 0, 0, 0) 50 %, rgba (0, 0, 0, 0)), linearer Farbverlauf (162 Grad, #ff6347 50 %, #2f3439 50 %, #2f3439);
}

.Fortschritt-25 {
  Hintergrundbild: linearer Farbverlauf (90 Grad, #2f3439 50 %, rgba (0, 0, 0, 0) 50 %, rgba (0, 0, 0, 0)), linearer Farbverlauf (180 Grad, #ff6347 50 %, #2f3439 50 %, #2f3439);
}

.Fortschritt-30 {
  Hintergrundbild: linearer Farbverlauf (90 Grad, #2f3439 50 %, rgba (0, 0, 0, 0) 50 %, rgba (0, 0, 0, 0)), linearer Farbverlauf (198 Grad, #ff6347 50 %, #2f3439 50 %, #2f3439);
}

.Fortschritt-35 {
  Hintergrundbild: linearer Farbverlauf (90 Grad, #2f3439 50 %, rgba (0, 0, 0, 0) 50 %, rgba (0, 0, 0, 0)), linearer Farbverlauf (216 Grad, #ff6347 50 %, #2f3439 50 %, #2f3439);
}

.Fortschritt-40 {
  Hintergrundbild: linearer Farbverlauf (90 Grad, #2f3439 50 %, rgba (0, 0, 0, 0) 50 %, rgba (0, 0, 0, 0)), linearer Farbverlauf (234 Grad, #ff6347 50 %, #2f3439 50 %, #2f3439);
}

.Fortschritt-45 {
  Hintergrundbild: linearer Farbverlauf (90 Grad, #2f3439 50 %, rgba (0, 0, 0, 0) 50 %, rgba (0, 0, 0, 0)), linearer Farbverlauf (252 Grad, #ff6347 50 %, #2f3439 50 %, #2f3439);
}

.Fortschritt-50 {
  Hintergrundbild: linearer Farbverlauf (-90 Grad, #ff6347 50 %, rgba (0, 0, 0, 0) 50 %, rgba (0, 0, 0, 0)), linearer Farbverlauf (270 Grad, #ff6347 50 %, #2f3439 50 %, #2f3439);
}

.Fortschritt-55 {
  Hintergrundbild: linearer Farbverlauf (-72 Grad, #ff6347 50 %, rgba (0, 0, 0, 0) 50 %, rgba (0, 0, 0, 0)), linearer Farbverlauf (270 Grad, #ff6347 50 %, #2f3439 50 %, #2f3439);
}

.Fortschritt-60 {
  Hintergrundbild: linearer Farbverlauf (-54 Grad, #ff6347 50 %, rgba (0, 0, 0, 0) 50 %, rgba (0, 0, 0, 0)), linearer Farbverlauf (270 Grad, #ff6347 50 %, #2f3439 50 %, #2f3439);
}

.Fortschritt-65 {
  Hintergrundbild: linearer Farbverlauf (-36 Grad, #ff6347 50 %, rgba (0, 0, 0, 0) 50 %, rgba (0, 0, 0, 0)), linearer Farbverlauf (270 Grad, #ff6347 50 %, #2f3439 50 %, #2f3439);
}

.Fortschritt-70 {
  Hintergrundbild: linearer Farbverlauf (-18 Grad, #ff6347 50 %, rgba (0, 0, 0, 0) 50 %, rgba (0, 0, 0, 0)), linearer Farbverlauf (270 Grad, #ff6347 50 %, #2f3439 50 %, #2f3439);
}

.Fortschritt-75 {
  Hintergrundbild: linearer Farbverlauf (0 Grad, #ff6347 50 %, rgba (0, 0, 0, 0) 50 %, rgba (0, 0, 0, 0)), linearer Farbverlauf (270 Grad, #ff6347 50 %, #2f3439 50 %, #2f3439);
}

.Fortschritt-80 {
  Hintergrundbild: linearer Farbverlauf (18 Grad, #ff6347 50 %, rgba (0, 0, 0, 0) 50 %, rgba (0, 0, 0, 0)), linearer Farbverlauf (270 Grad, #ff6347 50 %, #2f3439 50 %, #2f3439);
}

.Fortschritt-85 {
  Hintergrundbild: linearer Farbverlauf (36 Grad, #ff6347 50 %, rgba (0, 0, 0, 0) 50 %, rgba (0, 0, 0, 0)), linearer Farbverlauf (270 Grad, #ff6347 50 %, #2f3439 50 %, #2f3439);
}

.Fortschritt-90 {
  Hintergrundbild: linearer Farbverlauf (54 Grad, #ff6347 50 %, rgba (0, 0, 0, 0) 50 %, rgba (0, 0, 0, 0)), linearer Farbverlauf (270 Grad, #ff6347 50 %, #2f3439 50 %, #2f3439);
}

.Fortschritt-95 {
  Hintergrundbild: linearer Farbverlauf (72 Grad, #ff6347 50 %, rgba (0, 0, 0, 0) 50 %, rgba (0, 0, 0, 0)), linearer Farbverlauf (270 Grad, #ff6347 50 %, #2f3439 50 %, #2f3439);
}

.Fortschritt-100 {
  Hintergrundbild: linearer Farbverlauf (90 Grad, #ff6347 50 %, rgba (0, 0, 0, 0) 50 %, rgba (0, 0, 0, 0)), linearer Farbverlauf (270 Grad, #ff6347 50 %, #2f3439 50 %, #2f3439);
}