Designkit-percentage-bars NPM

designkit-percentage-bars

1.0.0

A Sass module for percentage bars used in RightScale apps.

Install

npm i --save designkit-percentage-bars

CSS

.percentage_bar {
  position: relative;
  height: 4px;
  margin-top: 10px;
  background: #eaeaea;
  border-radius: 10px;
}

.percentage_bar .percentage_metric {
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  background: #0A83F6;
  border-radius: 10px 0 0 10px;
}

.percentage_bar .percentage_metric.percentage_bar_100, .percentage_bar .percentage_metric.percentage_bar_animation_100 {
  border-radius: 10px;
}

.percentage_bar_0 {
  width: 0%;
}

.percentage_bar_1 {
  width: 1%;
}

.percentage_bar_2 {
  width: 2%;
}

.percentage_bar_3 {
  width: 3%;
}

.percentage_bar_4 {
  width: 4%;
}

.percentage_bar_5 {
  width: 5%;
}

.percentage_bar_6 {
  width: 6%;
}

.percentage_bar_7 {
  width: 7%;
}

.percentage_bar_8 {
  width: 8%;
}

.percentage_bar_9 {
  width: 9%;
}

.percentage_bar_10 {
  width: 10%;
}

.percentage_bar_11 {
  width: 11%;
}

.percentage_bar_12 {
  width: 12%;
}

.percentage_bar_13 {
  width: 13%;
}

.percentage_bar_14 {
  width: 14%;
}

.percentage_bar_15 {
  width: 15%;
}

.percentage_bar_16 {
  width: 16%;
}

.percentage_bar_17 {
  width: 17%;
}

.percentage_bar_18 {
  width: 18%;
}

.percentage_bar_19 {
  width: 19%;
}

.percentage_bar_20 {
  width: 20%;
}

.percentage_bar_21 {
  width: 21%;
}

.percentage_bar_22 {
  width: 22%;
}

.percentage_bar_23 {
  width: 23%;
}

.percentage_bar_24 {
  width: 24%;
}

.percentage_bar_25 {
  width: 25%;
}

.percentage_bar_26 {
  width: 26%;
}

.percentage_bar_27 {
  width: 27%;
}

.percentage_bar_28 {
  width: 28%;
}

.percentage_bar_29 {
  width: 29%;
}

.percentage_bar_30 {
  width: 30%;
}

.percentage_bar_31 {
  width: 31%;
}

.percentage_bar_32 {
  width: 32%;
}

.percentage_bar_33 {
  width: 33%;
}

.percentage_bar_34 {
  width: 34%;
}

.percentage_bar_35 {
  width: 35%;
}

.percentage_bar_36 {
  width: 36%;
}

.percentage_bar_37 {
  width: 37%;
}

.percentage_bar_38 {
  width: 38%;
}

.percentage_bar_39 {
  width: 39%;
}

.percentage_bar_40 {
  width: 40%;
}

.percentage_bar_41 {
  width: 41%;
}

.percentage_bar_42 {
  width: 42%;
}

.percentage_bar_43 {
  width: 43%;
}

.percentage_bar_44 {
  width: 44%;
}

.percentage_bar_45 {
  width: 45%;
}

.percentage_bar_46 {
  width: 46%;
}

.percentage_bar_47 {
  width: 47%;
}

.percentage_bar_48 {
  width: 48%;
}

.percentage_bar_49 {
  width: 49%;
}

.percentage_bar_50 {
  width: 50%;
}

.percentage_bar_51 {
  width: 51%;
}

.percentage_bar_52 {
  width: 52%;
}

.percentage_bar_53 {
  width: 53%;
}

.percentage_bar_54 {
  width: 54%;
}

.percentage_bar_55 {
  width: 55%;
}

.percentage_bar_56 {
  width: 56%;
}

.percentage_bar_57 {
  width: 57%;
}

.percentage_bar_58 {
  width: 58%;
}

.percentage_bar_59 {
  width: 59%;
}

.percentage_bar_60 {
  width: 60%;
}

.percentage_bar_61 {
  width: 61%;
}

.percentage_bar_62 {
  width: 62%;
}

.percentage_bar_63 {
  width: 63%;
}

.percentage_bar_64 {
  width: 64%;
}

.percentage_bar_65 {
  width: 65%;
}

.percentage_bar_66 {
  width: 66%;
}

.percentage_bar_67 {
  width: 67%;
}

.percentage_bar_68 {
  width: 68%;
}

.percentage_bar_69 {
  width: 69%;
}

.percentage_bar_70 {
  width: 70%;
}

.percentage_bar_71 {
  width: 71%;
}

.percentage_bar_72 {
  width: 72%;
}

.percentage_bar_73 {
  width: 73%;
}

.percentage_bar_74 {
  width: 74%;
}

.percentage_bar_75 {
  width: 75%;
}

.percentage_bar_76 {
  width: 76%;
}

.percentage_bar_77 {
  width: 77%;
}

.percentage_bar_78 {
  width: 78%;
}

.percentage_bar_79 {
  width: 79%;
}

.percentage_bar_80 {
  width: 80%;
}

.percentage_bar_81 {
  width: 81%;
}

.percentage_bar_82 {
  width: 82%;
}

.percentage_bar_83 {
  width: 83%;
}

.percentage_bar_84 {
  width: 84%;
}

.percentage_bar_85 {
  width: 85%;
}

.percentage_bar_86 {
  width: 86%;
}

.percentage_bar_87 {
  width: 87%;
}

.percentage_bar_88 {
  width: 88%;
}

.percentage_bar_89 {
  width: 89%;
}

.percentage_bar_90 {
  width: 90%;
}

.percentage_bar_91 {
  width: 91%;
}

.percentage_bar_92 {
  width: 92%;
}

.percentage_bar_93 {
  width: 93%;
}

.percentage_bar_94 {
  width: 94%;
}

.percentage_bar_95 {
  width: 95%;
}

.percentage_bar_96 {
  width: 96%;
}

.percentage_bar_97 {
  width: 97%;
}

.percentage_bar_98 {
  width: 98%;
}

.percentage_bar_99 {
  width: 99%;
}

.percentage_bar_100 {
  width: 100%;
}

.percentage_bar_animation_0 {
  -webkit-animation: anim_width_0 1s;
          animation: anim_width_0 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_0 {
  from {
    width: 0%;
  }
  to {
    width: 0%;
  }
}

@keyframes anim_width_0 {
  from {
    width: 0%;
  }
  to {
    width: 0%;
  }
}

.percentage_bar_animation_1 {
  -webkit-animation: anim_width_1 1s;
          animation: anim_width_1 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_1 {
  from {
    width: 0%;
  }
  to {
    width: 1%;
  }
}

@keyframes anim_width_1 {
  from {
    width: 0%;
  }
  to {
    width: 1%;
  }
}

.percentage_bar_animation_2 {
  -webkit-animation: anim_width_2 1s;
          animation: anim_width_2 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_2 {
  from {
    width: 0%;
  }
  to {
    width: 2%;
  }
}

@keyframes anim_width_2 {
  from {
    width: 0%;
  }
  to {
    width: 2%;
  }
}

.percentage_bar_animation_3 {
  -webkit-animation: anim_width_3 1s;
          animation: anim_width_3 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_3 {
  from {
    width: 0%;
  }
  to {
    width: 3%;
  }
}

@keyframes anim_width_3 {
  from {
    width: 0%;
  }
  to {
    width: 3%;
  }
}

.percentage_bar_animation_4 {
  -webkit-animation: anim_width_4 1s;
          animation: anim_width_4 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_4 {
  from {
    width: 0%;
  }
  to {
    width: 4%;
  }
}

@keyframes anim_width_4 {
  from {
    width: 0%;
  }
  to {
    width: 4%;
  }
}

.percentage_bar_animation_5 {
  -webkit-animation: anim_width_5 1s;
          animation: anim_width_5 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_5 {
  from {
    width: 0%;
  }
  to {
    width: 5%;
  }
}

@keyframes anim_width_5 {
  from {
    width: 0%;
  }
  to {
    width: 5%;
  }
}

.percentage_bar_animation_6 {
  -webkit-animation: anim_width_6 1s;
          animation: anim_width_6 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_6 {
  from {
    width: 0%;
  }
  to {
    width: 6%;
  }
}

@keyframes anim_width_6 {
  from {
    width: 0%;
  }
  to {
    width: 6%;
  }
}

.percentage_bar_animation_7 {
  -webkit-animation: anim_width_7 1s;
          animation: anim_width_7 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_7 {
  from {
    width: 0%;
  }
  to {
    width: 7%;
  }
}

@keyframes anim_width_7 {
  from {
    width: 0%;
  }
  to {
    width: 7%;
  }
}

.percentage_bar_animation_8 {
  -webkit-animation: anim_width_8 1s;
          animation: anim_width_8 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_8 {
  from {
    width: 0%;
  }
  to {
    width: 8%;
  }
}

@keyframes anim_width_8 {
  from {
    width: 0%;
  }
  to {
    width: 8%;
  }
}

.percentage_bar_animation_9 {
  -webkit-animation: anim_width_9 1s;
          animation: anim_width_9 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_9 {
  from {
    width: 0%;
  }
  to {
    width: 9%;
  }
}

@keyframes anim_width_9 {
  from {
    width: 0%;
  }
  to {
    width: 9%;
  }
}

.percentage_bar_animation_10 {
  -webkit-animation: anim_width_10 1s;
          animation: anim_width_10 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_10 {
  from {
    width: 0%;
  }
  to {
    width: 10%;
  }
}

@keyframes anim_width_10 {
  from {
    width: 0%;
  }
  to {
    width: 10%;
  }
}

.percentage_bar_animation_11 {
  -webkit-animation: anim_width_11 1s;
          animation: anim_width_11 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_11 {
  from {
    width: 0%;
  }
  to {
    width: 11%;
  }
}

@keyframes anim_width_11 {
  from {
    width: 0%;
  }
  to {
    width: 11%;
  }
}

.percentage_bar_animation_12 {
  -webkit-animation: anim_width_12 1s;
          animation: anim_width_12 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_12 {
  from {
    width: 0%;
  }
  to {
    width: 12%;
  }
}

@keyframes anim_width_12 {
  from {
    width: 0%;
  }
  to {
    width: 12%;
  }
}

.percentage_bar_animation_13 {
  -webkit-animation: anim_width_13 1s;
          animation: anim_width_13 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_13 {
  from {
    width: 0%;
  }
  to {
    width: 13%;
  }
}

@keyframes anim_width_13 {
  from {
    width: 0%;
  }
  to {
    width: 13%;
  }
}

.percentage_bar_animation_14 {
  -webkit-animation: anim_width_14 1s;
          animation: anim_width_14 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_14 {
  from {
    width: 0%;
  }
  to {
    width: 14%;
  }
}

@keyframes anim_width_14 {
  from {
    width: 0%;
  }
  to {
    width: 14%;
  }
}

.percentage_bar_animation_15 {
  -webkit-animation: anim_width_15 1s;
          animation: anim_width_15 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_15 {
  from {
    width: 0%;
  }
  to {
    width: 15%;
  }
}

@keyframes anim_width_15 {
  from {
    width: 0%;
  }
  to {
    width: 15%;
  }
}

.percentage_bar_animation_16 {
  -webkit-animation: anim_width_16 1s;
          animation: anim_width_16 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_16 {
  from {
    width: 0%;
  }
  to {
    width: 16%;
  }
}

@keyframes anim_width_16 {
  from {
    width: 0%;
  }
  to {
    width: 16%;
  }
}

.percentage_bar_animation_17 {
  -webkit-animation: anim_width_17 1s;
          animation: anim_width_17 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_17 {
  from {
    width: 0%;
  }
  to {
    width: 17%;
  }
}

@keyframes anim_width_17 {
  from {
    width: 0%;
  }
  to {
    width: 17%;
  }
}

.percentage_bar_animation_18 {
  -webkit-animation: anim_width_18 1s;
          animation: anim_width_18 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_18 {
  from {
    width: 0%;
  }
  to {
    width: 18%;
  }
}

@keyframes anim_width_18 {
  from {
    width: 0%;
  }
  to {
    width: 18%;
  }
}

.percentage_bar_animation_19 {
  -webkit-animation: anim_width_19 1s;
          animation: anim_width_19 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_19 {
  from {
    width: 0%;
  }
  to {
    width: 19%;
  }
}

@keyframes anim_width_19 {
  from {
    width: 0%;
  }
  to {
    width: 19%;
  }
}

.percentage_bar_animation_20 {
  -webkit-animation: anim_width_20 1s;
          animation: anim_width_20 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_20 {
  from {
    width: 0%;
  }
  to {
    width: 20%;
  }
}

@keyframes anim_width_20 {
  from {
    width: 0%;
  }
  to {
    width: 20%;
  }
}

.percentage_bar_animation_21 {
  -webkit-animation: anim_width_21 1s;
          animation: anim_width_21 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_21 {
  from {
    width: 0%;
  }
  to {
    width: 21%;
  }
}

@keyframes anim_width_21 {
  from {
    width: 0%;
  }
  to {
    width: 21%;
  }
}

.percentage_bar_animation_22 {
  -webkit-animation: anim_width_22 1s;
          animation: anim_width_22 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_22 {
  from {
    width: 0%;
  }
  to {
    width: 22%;
  }
}

@keyframes anim_width_22 {
  from {
    width: 0%;
  }
  to {
    width: 22%;
  }
}

.percentage_bar_animation_23 {
  -webkit-animation: anim_width_23 1s;
          animation: anim_width_23 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_23 {
  from {
    width: 0%;
  }
  to {
    width: 23%;
  }
}

@keyframes anim_width_23 {
  from {
    width: 0%;
  }
  to {
    width: 23%;
  }
}

.percentage_bar_animation_24 {
  -webkit-animation: anim_width_24 1s;
          animation: anim_width_24 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_24 {
  from {
    width: 0%;
  }
  to {
    width: 24%;
  }
}

@keyframes anim_width_24 {
  from {
    width: 0%;
  }
  to {
    width: 24%;
  }
}

.percentage_bar_animation_25 {
  -webkit-animation: anim_width_25 1s;
          animation: anim_width_25 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_25 {
  from {
    width: 0%;
  }
  to {
    width: 25%;
  }
}

@keyframes anim_width_25 {
  from {
    width: 0%;
  }
  to {
    width: 25%;
  }
}

.percentage_bar_animation_26 {
  -webkit-animation: anim_width_26 1s;
          animation: anim_width_26 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_26 {
  from {
    width: 0%;
  }
  to {
    width: 26%;
  }
}

@keyframes anim_width_26 {
  from {
    width: 0%;
  }
  to {
    width: 26%;
  }
}

.percentage_bar_animation_27 {
  -webkit-animation: anim_width_27 1s;
          animation: anim_width_27 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_27 {
  from {
    width: 0%;
  }
  to {
    width: 27%;
  }
}

@keyframes anim_width_27 {
  from {
    width: 0%;
  }
  to {
    width: 27%;
  }
}

.percentage_bar_animation_28 {
  -webkit-animation: anim_width_28 1s;
          animation: anim_width_28 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_28 {
  from {
    width: 0%;
  }
  to {
    width: 28%;
  }
}

@keyframes anim_width_28 {
  from {
    width: 0%;
  }
  to {
    width: 28%;
  }
}

.percentage_bar_animation_29 {
  -webkit-animation: anim_width_29 1s;
          animation: anim_width_29 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_29 {
  from {
    width: 0%;
  }
  to {
    width: 29%;
  }
}

@keyframes anim_width_29 {
  from {
    width: 0%;
  }
  to {
    width: 29%;
  }
}

.percentage_bar_animation_30 {
  -webkit-animation: anim_width_30 1s;
          animation: anim_width_30 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_30 {
  from {
    width: 0%;
  }
  to {
    width: 30%;
  }
}

@keyframes anim_width_30 {
  from {
    width: 0%;
  }
  to {
    width: 30%;
  }
}

.percentage_bar_animation_31 {
  -webkit-animation: anim_width_31 1s;
          animation: anim_width_31 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_31 {
  from {
    width: 0%;
  }
  to {
    width: 31%;
  }
}

@keyframes anim_width_31 {
  from {
    width: 0%;
  }
  to {
    width: 31%;
  }
}

.percentage_bar_animation_32 {
  -webkit-animation: anim_width_32 1s;
          animation: anim_width_32 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_32 {
  from {
    width: 0%;
  }
  to {
    width: 32%;
  }
}

@keyframes anim_width_32 {
  from {
    width: 0%;
  }
  to {
    width: 32%;
  }
}

.percentage_bar_animation_33 {
  -webkit-animation: anim_width_33 1s;
          animation: anim_width_33 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_33 {
  from {
    width: 0%;
  }
  to {
    width: 33%;
  }
}

@keyframes anim_width_33 {
  from {
    width: 0%;
  }
  to {
    width: 33%;
  }
}

.percentage_bar_animation_34 {
  -webkit-animation: anim_width_34 1s;
          animation: anim_width_34 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_34 {
  from {
    width: 0%;
  }
  to {
    width: 34%;
  }
}

@keyframes anim_width_34 {
  from {
    width: 0%;
  }
  to {
    width: 34%;
  }
}

.percentage_bar_animation_35 {
  -webkit-animation: anim_width_35 1s;
          animation: anim_width_35 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_35 {
  from {
    width: 0%;
  }
  to {
    width: 35%;
  }
}

@keyframes anim_width_35 {
  from {
    width: 0%;
  }
  to {
    width: 35%;
  }
}

.percentage_bar_animation_36 {
  -webkit-animation: anim_width_36 1s;
          animation: anim_width_36 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_36 {
  from {
    width: 0%;
  }
  to {
    width: 36%;
  }
}

@keyframes anim_width_36 {
  from {
    width: 0%;
  }
  to {
    width: 36%;
  }
}

.percentage_bar_animation_37 {
  -webkit-animation: anim_width_37 1s;
          animation: anim_width_37 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_37 {
  from {
    width: 0%;
  }
  to {
    width: 37%;
  }
}

@keyframes anim_width_37 {
  from {
    width: 0%;
  }
  to {
    width: 37%;
  }
}

.percentage_bar_animation_38 {
  -webkit-animation: anim_width_38 1s;
          animation: anim_width_38 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_38 {
  from {
    width: 0%;
  }
  to {
    width: 38%;
  }
}

@keyframes anim_width_38 {
  from {
    width: 0%;
  }
  to {
    width: 38%;
  }
}

.percentage_bar_animation_39 {
  -webkit-animation: anim_width_39 1s;
          animation: anim_width_39 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_39 {
  from {
    width: 0%;
  }
  to {
    width: 39%;
  }
}

@keyframes anim_width_39 {
  from {
    width: 0%;
  }
  to {
    width: 39%;
  }
}

.percentage_bar_animation_40 {
  -webkit-animation: anim_width_40 1s;
          animation: anim_width_40 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_40 {
  from {
    width: 0%;
  }
  to {
    width: 40%;
  }
}

@keyframes anim_width_40 {
  from {
    width: 0%;
  }
  to {
    width: 40%;
  }
}

.percentage_bar_animation_41 {
  -webkit-animation: anim_width_41 1s;
          animation: anim_width_41 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_41 {
  from {
    width: 0%;
  }
  to {
    width: 41%;
  }
}

@keyframes anim_width_41 {
  from {
    width: 0%;
  }
  to {
    width: 41%;
  }
}

.percentage_bar_animation_42 {
  -webkit-animation: anim_width_42 1s;
          animation: anim_width_42 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_42 {
  from {
    width: 0%;
  }
  to {
    width: 42%;
  }
}

@keyframes anim_width_42 {
  from {
    width: 0%;
  }
  to {
    width: 42%;
  }
}

.percentage_bar_animation_43 {
  -webkit-animation: anim_width_43 1s;
          animation: anim_width_43 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_43 {
  from {
    width: 0%;
  }
  to {
    width: 43%;
  }
}

@keyframes anim_width_43 {
  from {
    width: 0%;
  }
  to {
    width: 43%;
  }
}

.percentage_bar_animation_44 {
  -webkit-animation: anim_width_44 1s;
          animation: anim_width_44 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_44 {
  from {
    width: 0%;
  }
  to {
    width: 44%;
  }
}

@keyframes anim_width_44 {
  from {
    width: 0%;
  }
  to {
    width: 44%;
  }
}

.percentage_bar_animation_45 {
  -webkit-animation: anim_width_45 1s;
          animation: anim_width_45 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_45 {
  from {
    width: 0%;
  }
  to {
    width: 45%;
  }
}

@keyframes anim_width_45 {
  from {
    width: 0%;
  }
  to {
    width: 45%;
  }
}

.percentage_bar_animation_46 {
  -webkit-animation: anim_width_46 1s;
          animation: anim_width_46 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_46 {
  from {
    width: 0%;
  }
  to {
    width: 46%;
  }
}

@keyframes anim_width_46 {
  from {
    width: 0%;
  }
  to {
    width: 46%;
  }
}

.percentage_bar_animation_47 {
  -webkit-animation: anim_width_47 1s;
          animation: anim_width_47 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_47 {
  from {
    width: 0%;
  }
  to {
    width: 47%;
  }
}

@keyframes anim_width_47 {
  from {
    width: 0%;
  }
  to {
    width: 47%;
  }
}

.percentage_bar_animation_48 {
  -webkit-animation: anim_width_48 1s;
          animation: anim_width_48 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_48 {
  from {
    width: 0%;
  }
  to {
    width: 48%;
  }
}

@keyframes anim_width_48 {
  from {
    width: 0%;
  }
  to {
    width: 48%;
  }
}

.percentage_bar_animation_49 {
  -webkit-animation: anim_width_49 1s;
          animation: anim_width_49 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_49 {
  from {
    width: 0%;
  }
  to {
    width: 49%;
  }
}

@keyframes anim_width_49 {
  from {
    width: 0%;
  }
  to {
    width: 49%;
  }
}

.percentage_bar_animation_50 {
  -webkit-animation: anim_width_50 1s;
          animation: anim_width_50 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_50 {
  from {
    width: 0%;
  }
  to {
    width: 50%;
  }
}

@keyframes anim_width_50 {
  from {
    width: 0%;
  }
  to {
    width: 50%;
  }
}

.percentage_bar_animation_51 {
  -webkit-animation: anim_width_51 1s;
          animation: anim_width_51 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_51 {
  from {
    width: 0%;
  }
  to {
    width: 51%;
  }
}

@keyframes anim_width_51 {
  from {
    width: 0%;
  }
  to {
    width: 51%;
  }
}

.percentage_bar_animation_52 {
  -webkit-animation: anim_width_52 1s;
          animation: anim_width_52 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_52 {
  from {
    width: 0%;
  }
  to {
    width: 52%;
  }
}

@keyframes anim_width_52 {
  from {
    width: 0%;
  }
  to {
    width: 52%;
  }
}

.percentage_bar_animation_53 {
  -webkit-animation: anim_width_53 1s;
          animation: anim_width_53 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_53 {
  from {
    width: 0%;
  }
  to {
    width: 53%;
  }
}

@keyframes anim_width_53 {
  from {
    width: 0%;
  }
  to {
    width: 53%;
  }
}

.percentage_bar_animation_54 {
  -webkit-animation: anim_width_54 1s;
          animation: anim_width_54 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_54 {
  from {
    width: 0%;
  }
  to {
    width: 54%;
  }
}

@keyframes anim_width_54 {
  from {
    width: 0%;
  }
  to {
    width: 54%;
  }
}

.percentage_bar_animation_55 {
  -webkit-animation: anim_width_55 1s;
          animation: anim_width_55 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_55 {
  from {
    width: 0%;
  }
  to {
    width: 55%;
  }
}

@keyframes anim_width_55 {
  from {
    width: 0%;
  }
  to {
    width: 55%;
  }
}

.percentage_bar_animation_56 {
  -webkit-animation: anim_width_56 1s;
          animation: anim_width_56 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_56 {
  from {
    width: 0%;
  }
  to {
    width: 56%;
  }
}

@keyframes anim_width_56 {
  from {
    width: 0%;
  }
  to {
    width: 56%;
  }
}

.percentage_bar_animation_57 {
  -webkit-animation: anim_width_57 1s;
          animation: anim_width_57 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_57 {
  from {
    width: 0%;
  }
  to {
    width: 57%;
  }
}

@keyframes anim_width_57 {
  from {
    width: 0%;
  }
  to {
    width: 57%;
  }
}

.percentage_bar_animation_58 {
  -webkit-animation: anim_width_58 1s;
          animation: anim_width_58 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_58 {
  from {
    width: 0%;
  }
  to {
    width: 58%;
  }
}

@keyframes anim_width_58 {
  from {
    width: 0%;
  }
  to {
    width: 58%;
  }
}

.percentage_bar_animation_59 {
  -webkit-animation: anim_width_59 1s;
          animation: anim_width_59 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_59 {
  from {
    width: 0%;
  }
  to {
    width: 59%;
  }
}

@keyframes anim_width_59 {
  from {
    width: 0%;
  }
  to {
    width: 59%;
  }
}

.percentage_bar_animation_60 {
  -webkit-animation: anim_width_60 1s;
          animation: anim_width_60 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_60 {
  from {
    width: 0%;
  }
  to {
    width: 60%;
  }
}

@keyframes anim_width_60 {
  from {
    width: 0%;
  }
  to {
    width: 60%;
  }
}

.percentage_bar_animation_61 {
  -webkit-animation: anim_width_61 1s;
          animation: anim_width_61 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_61 {
  from {
    width: 0%;
  }
  to {
    width: 61%;
  }
}

@keyframes anim_width_61 {
  from {
    width: 0%;
  }
  to {
    width: 61%;
  }
}

.percentage_bar_animation_62 {
  -webkit-animation: anim_width_62 1s;
          animation: anim_width_62 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_62 {
  from {
    width: 0%;
  }
  to {
    width: 62%;
  }
}

@keyframes anim_width_62 {
  from {
    width: 0%;
  }
  to {
    width: 62%;
  }
}

.percentage_bar_animation_63 {
  -webkit-animation: anim_width_63 1s;
          animation: anim_width_63 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_63 {
  from {
    width: 0%;
  }
  to {
    width: 63%;
  }
}

@keyframes anim_width_63 {
  from {
    width: 0%;
  }
  to {
    width: 63%;
  }
}

.percentage_bar_animation_64 {
  -webkit-animation: anim_width_64 1s;
          animation: anim_width_64 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_64 {
  from {
    width: 0%;
  }
  to {
    width: 64%;
  }
}

@keyframes anim_width_64 {
  from {
    width: 0%;
  }
  to {
    width: 64%;
  }
}

.percentage_bar_animation_65 {
  -webkit-animation: anim_width_65 1s;
          animation: anim_width_65 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_65 {
  from {
    width: 0%;
  }
  to {
    width: 65%;
  }
}

@keyframes anim_width_65 {
  from {
    width: 0%;
  }
  to {
    width: 65%;
  }
}

.percentage_bar_animation_66 {
  -webkit-animation: anim_width_66 1s;
          animation: anim_width_66 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_66 {
  from {
    width: 0%;
  }
  to {
    width: 66%;
  }
}

@keyframes anim_width_66 {
  from {
    width: 0%;
  }
  to {
    width: 66%;
  }
}

.percentage_bar_animation_67 {
  -webkit-animation: anim_width_67 1s;
          animation: anim_width_67 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_67 {
  from {
    width: 0%;
  }
  to {
    width: 67%;
  }
}

@keyframes anim_width_67 {
  from {
    width: 0%;
  }
  to {
    width: 67%;
  }
}

.percentage_bar_animation_68 {
  -webkit-animation: anim_width_68 1s;
          animation: anim_width_68 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_68 {
  from {
    width: 0%;
  }
  to {
    width: 68%;
  }
}

@keyframes anim_width_68 {
  from {
    width: 0%;
  }
  to {
    width: 68%;
  }
}

.percentage_bar_animation_69 {
  -webkit-animation: anim_width_69 1s;
          animation: anim_width_69 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_69 {
  from {
    width: 0%;
  }
  to {
    width: 69%;
  }
}

@keyframes anim_width_69 {
  from {
    width: 0%;
  }
  to {
    width: 69%;
  }
}

.percentage_bar_animation_70 {
  -webkit-animation: anim_width_70 1s;
          animation: anim_width_70 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_70 {
  from {
    width: 0%;
  }
  to {
    width: 70%;
  }
}

@keyframes anim_width_70 {
  from {
    width: 0%;
  }
  to {
    width: 70%;
  }
}

.percentage_bar_animation_71 {
  -webkit-animation: anim_width_71 1s;
          animation: anim_width_71 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_71 {
  from {
    width: 0%;
  }
  to {
    width: 71%;
  }
}

@keyframes anim_width_71 {
  from {
    width: 0%;
  }
  to {
    width: 71%;
  }
}

.percentage_bar_animation_72 {
  -webkit-animation: anim_width_72 1s;
          animation: anim_width_72 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_72 {
  from {
    width: 0%;
  }
  to {
    width: 72%;
  }
}

@keyframes anim_width_72 {
  from {
    width: 0%;
  }
  to {
    width: 72%;
  }
}

.percentage_bar_animation_73 {
  -webkit-animation: anim_width_73 1s;
          animation: anim_width_73 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_73 {
  from {
    width: 0%;
  }
  to {
    width: 73%;
  }
}

@keyframes anim_width_73 {
  from {
    width: 0%;
  }
  to {
    width: 73%;
  }
}

.percentage_bar_animation_74 {
  -webkit-animation: anim_width_74 1s;
          animation: anim_width_74 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_74 {
  from {
    width: 0%;
  }
  to {
    width: 74%;
  }
}

@keyframes anim_width_74 {
  from {
    width: 0%;
  }
  to {
    width: 74%;
  }
}

.percentage_bar_animation_75 {
  -webkit-animation: anim_width_75 1s;
          animation: anim_width_75 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_75 {
  from {
    width: 0%;
  }
  to {
    width: 75%;
  }
}

@keyframes anim_width_75 {
  from {
    width: 0%;
  }
  to {
    width: 75%;
  }
}

.percentage_bar_animation_76 {
  -webkit-animation: anim_width_76 1s;
          animation: anim_width_76 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_76 {
  from {
    width: 0%;
  }
  to {
    width: 76%;
  }
}

@keyframes anim_width_76 {
  from {
    width: 0%;
  }
  to {
    width: 76%;
  }
}

.percentage_bar_animation_77 {
  -webkit-animation: anim_width_77 1s;
          animation: anim_width_77 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_77 {
  from {
    width: 0%;
  }
  to {
    width: 77%;
  }
}

@keyframes anim_width_77 {
  from {
    width: 0%;
  }
  to {
    width: 77%;
  }
}

.percentage_bar_animation_78 {
  -webkit-animation: anim_width_78 1s;
          animation: anim_width_78 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_78 {
  from {
    width: 0%;
  }
  to {
    width: 78%;
  }
}

@keyframes anim_width_78 {
  from {
    width: 0%;
  }
  to {
    width: 78%;
  }
}

.percentage_bar_animation_79 {
  -webkit-animation: anim_width_79 1s;
          animation: anim_width_79 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_79 {
  from {
    width: 0%;
  }
  to {
    width: 79%;
  }
}

@keyframes anim_width_79 {
  from {
    width: 0%;
  }
  to {
    width: 79%;
  }
}

.percentage_bar_animation_80 {
  -webkit-animation: anim_width_80 1s;
          animation: anim_width_80 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_80 {
  from {
    width: 0%;
  }
  to {
    width: 80%;
  }
}

@keyframes anim_width_80 {
  from {
    width: 0%;
  }
  to {
    width: 80%;
  }
}

.percentage_bar_animation_81 {
  -webkit-animation: anim_width_81 1s;
          animation: anim_width_81 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_81 {
  from {
    width: 0%;
  }
  to {
    width: 81%;
  }
}

@keyframes anim_width_81 {
  from {
    width: 0%;
  }
  to {
    width: 81%;
  }
}

.percentage_bar_animation_82 {
  -webkit-animation: anim_width_82 1s;
          animation: anim_width_82 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_82 {
  from {
    width: 0%;
  }
  to {
    width: 82%;
  }
}

@keyframes anim_width_82 {
  from {
    width: 0%;
  }
  to {
    width: 82%;
  }
}

.percentage_bar_animation_83 {
  -webkit-animation: anim_width_83 1s;
          animation: anim_width_83 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_83 {
  from {
    width: 0%;
  }
  to {
    width: 83%;
  }
}

@keyframes anim_width_83 {
  from {
    width: 0%;
  }
  to {
    width: 83%;
  }
}

.percentage_bar_animation_84 {
  -webkit-animation: anim_width_84 1s;
          animation: anim_width_84 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_84 {
  from {
    width: 0%;
  }
  to {
    width: 84%;
  }
}

@keyframes anim_width_84 {
  from {
    width: 0%;
  }
  to {
    width: 84%;
  }
}

.percentage_bar_animation_85 {
  -webkit-animation: anim_width_85 1s;
          animation: anim_width_85 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_85 {
  from {
    width: 0%;
  }
  to {
    width: 85%;
  }
}

@keyframes anim_width_85 {
  from {
    width: 0%;
  }
  to {
    width: 85%;
  }
}

.percentage_bar_animation_86 {
  -webkit-animation: anim_width_86 1s;
          animation: anim_width_86 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_86 {
  from {
    width: 0%;
  }
  to {
    width: 86%;
  }
}

@keyframes anim_width_86 {
  from {
    width: 0%;
  }
  to {
    width: 86%;
  }
}

.percentage_bar_animation_87 {
  -webkit-animation: anim_width_87 1s;
          animation: anim_width_87 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_87 {
  from {
    width: 0%;
  }
  to {
    width: 87%;
  }
}

@keyframes anim_width_87 {
  from {
    width: 0%;
  }
  to {
    width: 87%;
  }
}

.percentage_bar_animation_88 {
  -webkit-animation: anim_width_88 1s;
          animation: anim_width_88 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_88 {
  from {
    width: 0%;
  }
  to {
    width: 88%;
  }
}

@keyframes anim_width_88 {
  from {
    width: 0%;
  }
  to {
    width: 88%;
  }
}

.percentage_bar_animation_89 {
  -webkit-animation: anim_width_89 1s;
          animation: anim_width_89 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_89 {
  from {
    width: 0%;
  }
  to {
    width: 89%;
  }
}

@keyframes anim_width_89 {
  from {
    width: 0%;
  }
  to {
    width: 89%;
  }
}

.percentage_bar_animation_90 {
  -webkit-animation: anim_width_90 1s;
          animation: anim_width_90 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_90 {
  from {
    width: 0%;
  }
  to {
    width: 90%;
  }
}

@keyframes anim_width_90 {
  from {
    width: 0%;
  }
  to {
    width: 90%;
  }
}

.percentage_bar_animation_91 {
  -webkit-animation: anim_width_91 1s;
          animation: anim_width_91 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_91 {
  from {
    width: 0%;
  }
  to {
    width: 91%;
  }
}

@keyframes anim_width_91 {
  from {
    width: 0%;
  }
  to {
    width: 91%;
  }
}

.percentage_bar_animation_92 {
  -webkit-animation: anim_width_92 1s;
          animation: anim_width_92 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_92 {
  from {
    width: 0%;
  }
  to {
    width: 92%;
  }
}

@keyframes anim_width_92 {
  from {
    width: 0%;
  }
  to {
    width: 92%;
  }
}

.percentage_bar_animation_93 {
  -webkit-animation: anim_width_93 1s;
          animation: anim_width_93 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_93 {
  from {
    width: 0%;
  }
  to {
    width: 93%;
  }
}

@keyframes anim_width_93 {
  from {
    width: 0%;
  }
  to {
    width: 93%;
  }
}

.percentage_bar_animation_94 {
  -webkit-animation: anim_width_94 1s;
          animation: anim_width_94 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_94 {
  from {
    width: 0%;
  }
  to {
    width: 94%;
  }
}

@keyframes anim_width_94 {
  from {
    width: 0%;
  }
  to {
    width: 94%;
  }
}

.percentage_bar_animation_95 {
  -webkit-animation: anim_width_95 1s;
          animation: anim_width_95 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_95 {
  from {
    width: 0%;
  }
  to {
    width: 95%;
  }
}

@keyframes anim_width_95 {
  from {
    width: 0%;
  }
  to {
    width: 95%;
  }
}

.percentage_bar_animation_96 {
  -webkit-animation: anim_width_96 1s;
          animation: anim_width_96 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_96 {
  from {
    width: 0%;
  }
  to {
    width: 96%;
  }
}

@keyframes anim_width_96 {
  from {
    width: 0%;
  }
  to {
    width: 96%;
  }
}

.percentage_bar_animation_97 {
  -webkit-animation: anim_width_97 1s;
          animation: anim_width_97 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_97 {
  from {
    width: 0%;
  }
  to {
    width: 97%;
  }
}

@keyframes anim_width_97 {
  from {
    width: 0%;
  }
  to {
    width: 97%;
  }
}

.percentage_bar_animation_98 {
  -webkit-animation: anim_width_98 1s;
          animation: anim_width_98 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_98 {
  from {
    width: 0%;
  }
  to {
    width: 98%;
  }
}

@keyframes anim_width_98 {
  from {
    width: 0%;
  }
  to {
    width: 98%;
  }
}

.percentage_bar_animation_99 {
  -webkit-animation: anim_width_99 1s;
          animation: anim_width_99 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_99 {
  from {
    width: 0%;
  }
  to {
    width: 99%;
  }
}

@keyframes anim_width_99 {
  from {
    width: 0%;
  }
  to {
    width: 99%;
  }
}

.percentage_bar_animation_100 {
  -webkit-animation: anim_width_100 1s;
          animation: anim_width_100 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes anim_width_100 {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

@keyframes anim_width_100 {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

Author

Jason Melgoza

License

MIT

sass css styles

@infinitebrahmanuniverse/nolb-des @everything-registry/sub-chunk-1470 @zalastax/nolb-des

1.0.0

6 years ago