.progress-circle {
  width: 120px;
  height: 120px;
  line-height: 120px;
  background: none;
  margin: 0 auto;
  box-shadow: none;
  position: relative;

  &:after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 20px solid #e6f6eb;
    position: absolute;
    top: 0;
    left: 0;
  }

  & > span {
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 1;
  }

  &-bar {
    width: 100%;
    height: 100%;
    background: none;
    position: absolute;
    border: 20px solid $primary;
    top: 0;
  }

  &-left {
    left: 0;

    .progress-circle-bar {
      left: 100%;
      border-top-right-radius: 80px;
      border-bottom-right-radius: 80px;
      border-left: 0;
      -webkit-transform-origin: center left;
      transform-origin: center left;
      transition: transform 0.5s linear 0.5s;
    }
  }

  &-right {
    right: 0;

    .progress-circle-bar {
      left: -100%;
      border-top-left-radius: 80px;
      border-bottom-left-radius: 80px;
      border-right: 0;
      -webkit-transform-origin: center right;
      transform-origin: center right;
      transition: transform 0.5s linear;
    }
  }

  &-value {
    width: 100%;
    height: 100%;
    font-size: 14px;
    text-align: center;
    position: absolute;
  }

  @media only screen and (max-width: 990px) {
    margin-bottom: 20px;
  }
}