<template>
  <div class="pro">
    <div
      class="pro-bar"
      :style="'width:' + (100 -  pie) + '%'"
    >
    </div>
  </div>
</template>

<script>
export default {
  props: {
    pie: {
      type: Number,
      default: 0
    }
  }
}
</script>
<style lang="scss" scoped>
$bg: #e6ebf8;

.pro {
  position: relative;
  height: 14px;
  background: linear-gradient(
    90deg,
    #11e9ff 0%,
    #ffdf89 52%,
    #ff9989 85%,
    #ff3434 100%
  );
  &::after {
    width: 100%;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 14px;
    background-image: linear-gradient(
      90deg,
      transparent 0,
      transparent 25%,
      $bg 25%,
      $bg 50%,
      transparent 50%,
      transparent 75%,
      $bg 75%,
      $bg
    );
    background-size: 12px 12px;
  }
  .pro-bar {
    width: 100%;
    height: 14px;
    background: $bg;
    float: right;
    animation: animate-positive 0.3s;
  }
}
@keyframes animate-positive {
  0% {
    width: 100%;
  }
}
</style>