docs/styles/radial.less

@import "variables.less";

@-webkit-keyframes rotating {
  from{
    -webkit-transform: rotate(0deg);
  }
  to{
    -webkit-transform: rotate(360deg);
  }
}

.radial-progress {

  &.radial-spinner {
    -webkit-animation: rotating 1.6s linear infinite;
  }

  @circle-size: 140px;
  @circle-background: red;
  @inset-size: @circle-size - 4;
  @inset-color: white;
  @transition-length: 1s;
  // @percentage-color: #3FD899;
  @percentage-font-size: 24px;
  @percentage-text-width: 57px;
  background: white;
  margin: 0 auto;

  width:  @circle-size;
  height: @circle-size;

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

    background-color: @inset-color;
    border-radius: 100%;
    .percentage {
      width:       @percentage-text-width;
      position:    absolute;
      top:         (@inset-size - @percentage-font-size) / 2.0;
      left:        (@inset-size - @percentage-text-width) / 2.0;

      line-height: 1;
      text-align:  center;

      color:       @brand-primary;
      font-weight: 500;
      font-size:   @percentage-font-size;
    }
  }


  &.radial-negative .circle .mask .fill {
    background-color: @brand-negative;
  }

  &.radial-positive .circle .mask .fill {
    background-color: @brand-positive;
  }

  &.radial-thick {
    @inset-size: @circle-size - 10;
    .inset {
      width:       @inset-size;
      height:      @inset-size;
      margin-left: (@circle-size - @inset-size) / 2.0;
      margin-top:  (@circle-size - @inset-size) / 2.0;
      .percentage {
        top:         (@inset-size - @percentage-font-size) / 2.0;
        left:        (@inset-size - @percentage-text-width) / 2.0;
      }
    }
  }

  &.radial-gray {
    background: @gray-lightest;
  }

  &.radial-transparent {
    @inset-color: @color-background;
    background: @color-background;
    .inset {
      background-color: @inset-color;
    }
  }

  @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);
        }
      }
      .inset .percentage:before {
        content: "@{i}%"
      }
    }
    .loop(@i + 1);
  }
  .loop(@i);
}