.progress {
    border: 1px solid #ccc;
    position: relative;
    display: block;
    height: 22px;
    padding: 0;
    min-width: 190px;
    margin:4px 0;
    color: #fff;
   
    background: #DEDEDE;
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#e9e9e9));
    background: -moz-linear-gradient(top, #ccc, #e9e9e9);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#e9e9e9');

    -moz-box-shadow:0 1px 0 #fff;
    -webkit-box-shadow:0 1px 0 #fff;
    box-shadow:0 1px 0 #fff;

    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
.progress span {
    display: block;
    height: 20px;
    margin: 0;
    padding: 0;
    text-align:center;
    color: #fff;
    width:0;
    
    -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);

    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
.progress span b{
    color:#fff;
    line-height:20px;
    padding-left:2px;
    text-shadow:0 1px 1px rgba(0, 0, 0, 0.5);
}

.progress-blue span {
    border: 1px solid #0078a5; 
    background-color: #5C9ADE;
    background: -moz-linear-gradient(top, #00adee 10%, #0078a5 90%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #00adee), color-stop(0.9, #0078a5));
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}


    @keyframes rellenar{
      to{
        stroke-dasharray: var(--porcentaje) 100;
      }
    }

    body{
      display: flex;
      gap: 30px;
    }

    .porcentajes{
      position:relative;
    }
    .porcentajes span{
      position: absolute;
      top: 0%;
      left: 0%;
      bottom: 0%;
      right: 0%;
      display: flex;
      align-items: center;
      justify-content: center;
      font: 25px/1em Verdana;
      color: #fff;
   
    }

    circle{
      fill: none;
      stroke-width: 20;
      transform: rotate(-90deg);
      transform-origin: 50%;
      stroke-dasharray: 100 100;
      stroke: #AAA;
    }
    circle:nth-child(2){ /* el segundo círculo, es el que se ve por encima del anterior y debe tener el color mas intenso y el area del porcentaje */
      stroke: var(--color);
      stroke-dasharray: 0 100;
      animation: rellenar .35s linear forwards;
    }