<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Barra de progreso</title>
</head>
<body>
 
  <div class="container">
    <div class="css"></div>    
    <div class="html"></div>
    <div class="php"></div>
  </div>
  
</body>
</html>
$bgcolor: darkblue;
@function progress_bar_rotate($deg){
  @if $deg >= 0 and $deg <= 100 {
    $deg: $deg / 100 * 180;
  }@else{
    $deg: 0;
  }
  
  @return #{$deg}deg;
}
@mixin progress_bar($bgcolor,$progressColor,$texto,$deg){
  display: block;
  width: 8rem;
  height: 8rem;
  position: relative;
  background-image: linear-gradient(
    rgba($progressColor,.5) 50%,
    $progressColor 50%
  );
  
  border-radius: 50%;
  
  
  transform: rotate(progress_bar_rotate($deg));
  
  &::before,&::after{
    display: block;
    width: 100%;
    height: 100%;    
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    box-sizing: border-box;
    text-align: center;
    text-transform: uppercase;
    color: $progressColor;
    
  }
  &::before{
    content: "#{$texto}";
    padding: .5rem;
    background-color: $bgcolor;
    background-clip: content-box;
    
    line-height: 3rem;
    font-size: 1.2rem;
    
    
    
    
    transform: rotate(-#{progress_bar_rotate($deg)});
  }
  &::after{
    content: "#{$deg}%";
    background-image: linear-gradient(
      transparent 50%,
      $bgcolor 50%
    );
    transform: scale(1.1) rotate(-#{progress_bar_rotate($deg)});
    line-height: 7rem;
    font-size: .8rem;
  }
}



body{
  display: flex;
  align-items: center;
  justify-content: center;
  .container{
    display: flex;   
    justify-content: space-around;
    background-color: $bgcolor;
    height: 9rem;
    min-width: 500px;
    padding-top: 4rem;
   
   
  }
   min-height: 100vh;
   
  
}


.html{
  @include progress_bar($bgcolor,yellow,html,85);
}
.php{
  @include progress_bar($bgcolor,white,php,80);
}
.css{
  @include progress_bar($bgcolor, red,css,50);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.