Progress bar gradient ionic

Ionic Framework ionic-v3
1

I have a progress bar in my App and I want to display gradient colors in my progress bar.Could you please give me a clue .
p.s. I am not good at Css.

ColorGradient

html


<div class="progress-pie-chart" data-percent="1">
          <div class="ppc-progress">
            <div class="ppc-progress-fill"></div>
          </div>
          <div class="ppc-percents">
            <div class="pcc-percents-wrapper">
              <span>100%</span>
              <ion-icon class="checkmark" name="checkmark"></ion-icon>
              <ion-icon class="book" name="book-outline"></ion-icon>
            </div>
          </div>

css

 .progress-pie-chart {
    width: $size;
    height: $size;
    border-radius: 50%;
    background: map-get($colors, 'secondary');
    position: relative;
    &.gt-50 {
      background-color: map-get($colors, 'primary');
    }
  }
  .ppc-percents {
    @include circle(#{$size/1.1});
    background: #000;
    text-align: center;
    display: table;
    span {
      display: block;
      font-size: 0.9em;
      color: map-get($colors, 'primary');
    }
  }
  .pcc-percents-wrapper {
    display: table-cell;
    vertical-align: middle;
  }
  .progress-pie-chart {
    margin: 10px auto 0;
  }```