.radial-progress {
  @circle-size: 75px;
  @circle-color: #00ace7;
  @inset-size: 65px;
  @transition-length: 1s;
  @shadow: none;

  margin-top:    10px;
  margin-bottom: 30px;
  margin-left:   25px;
  margin-right:  25px;
  width:  @circle-size;
  height: @circle-size;
  box-shadow: @shadow;

  background-color: #ebebeb;
  border-radius: 50%;
  .circle {
    .mask, .fill, .shadow {
      width:    @circle-size;
      height:   @circle-size;
      position: absolute;
      border-radius: 50%;
    }
    .shadow {
      box-shadow: initial;
    }
    .mask, .fill {
      -webkit-backface-visibility: hidden;
      transition: -webkit-transform @transition-length;
      transition: -ms-transform @transition-length;
      transition: transform @transition-length;
      border-radius: 50%;
    }
    .mask {
      clip: rect(0px, @circle-size, @circle-size, @circle-size/2);
      .fill {
        clip: rect(0px, @circle-size/2, @circle-size, 0px);
        background-color: @circle-color;
      }
    }
  }
  .inset {
    width:       @inset-size;
    height:      @inset-size;
    position:    absolute;
    margin-left: (@circle-size - @inset-size)/2;
    margin-top:  (@circle-size - @inset-size)/2;

    background-color: whitesmoke;
    border-radius: 50%;
    box-shadow: initial;
    text-align: center;
  }

  @i: 0;
  @increment: 180deg / 100;
  .loop (@i) when (@i <= 100) {
    &[data-progress="@{i}"] {
      .circle {
        .mask.full, .fill {
          -webkit-transform: rotate(@increment * @i);
          -ms-transform: rotate(@increment * @i);
          transform: rotate(@increment * @i);
        }
        .fill.fix {
          -webkit-transform: rotate(@increment * @i * 2);
          -ms-transform: rotate(@increment * @i * 2);
          transform: rotate(@increment * @i * 2);
        }
      }
    }
    .loop(@i + 1);
  }
  .loop(@i);
}

.blue-background {

    .radial-progress {
        background-color: rgba(0, 172, 231, 1);
        box-shadow: initial;
        .circle {
            .mask {
                .fill {
        		     background-color: white;
                }
            }
        }
        .inset {
            background-color: rgba(0, 172, 231, 1);
            box-shadow: initial;
        }
    }
}

.white-background {

    .radial-progress {
        .inset {
            background-color: white;
        }
    }
}

.dark-theme {
    .radial-progress {
        background-color: rgba(153,153,153,0.75);
        .inset {
            background-color: #2c2c2c;
        }
    }


}