Gradient progress bar

@helema22 wrote:

I have a progress bar in my App and I want to display gradient in progress bar. Could you give me a clue to make it . I am not good at Css and ionic2

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>40%</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;
  }
}

Posts: 1

Participants: 1

Read full topic