How do I add a gradient background color to an item in the table according to scale?

Kotlin
IOS
VB.Net
SQL
Node.js
Swift
Ruby
Go
Oracle
Git
Laravel
Mongodb
Asp.Net
More...

the figure above is a circular table (using vue), one of the fields is probability, how to add background color to the corresponding row in the table according to the numerical value of probability? For example, the probability value is 50%, then I will add a background color to half of the table, and the background color is gradual, please give me some ideas.

Css3 css vue.js

Mar.13,2021

suppose the loop is tr, using background-size to set the width

<tr v-for="item in rows" :style="background: 'linear-gradient(left, -sharp1edf17, -sharp1edf17, -sharp3ceded, -sharp5d83ff)', background-size: item.gailv + ' 100%'">
    <td></td>...
</tr>

https://jsfiddle.net/5ac7uwyg/

Previous: There are many warning in the console after using the Menu component in antd ui in react.

Next: A question about finditer output in regularization