My vue progress bar did not make different color with api

Hello friend may i ask something. I want to ask about making progress bar on vue. I had make it with vue bootstrap. If just input a value, it work. But, when i input two or more value it did not work. Honestly i want make progress bar like github, like this:

And i use an rest api from github to get value. i get language value from repositories.

i hope you can help me, this is my code

mounted() {
    axios
      .get(
        "https://api.github.com/repos/dimaswntech/" +
          this.$route.params.name +
          "/languages",
        {
          headers: {
            Authorization: "token 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",
          },
        }
      )
      .then((response) => {
        this.setValue(response.data);
      });
      
      //this is the mounted method to get data from github rest api

 <b-progress :max="max" class="mb-3">
                <b-progress-bar
                  v-for="(nilai, index) in value"
                  :key="nilai[index]"
                  variant="primary"
                  :value="nilai"
                  :label="`${((nilai / max) * 100).toFixed(2)}%`"
                ></b-progress-bar>
              </b-progress>
              
              // this is the bootstrap element on vue template

If you want more my code, please comment bellow, then i add it