基于颜色渐变样式绘制信号格

预期目标：

根据WiFi信号强度，绘制信号格，满格100，80格以上为好，40格以上为中，其余为差。根据信号级别展示不同的颜色。
实现效果：

代码实现如下：

css部分：

<style>
	// 定义css变量，实现作用域内css样式的变化
  .line:nth-of-type(n) {
        --percent: '1%';
        --to-percent: '2%';
        --line-color: #aaa;
        --line-width: '0%';
    }
    .line {
        margin: 20px auto;
        position: relative;
        width: 600px;
        height: 50px;
        background: repeating-linear-gradient(to right, 
            #aaa, #aaa 1%,
            #fff 1%, #fff 2%
        );
    }
    .signal {
        margin: auto;
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        width: var(--line-width);
        background: repeating-linear-gradient(to right,
            var(--line-color), var(--line-color) var(--percent),
            #fff var(--percent), #fff var(--to-percent)
        );
    }
</style>

javascript部分：

<script>
     window.onload = function() {
         for (let i = 0; i < 10; i++) {
             const body = document.querySelector('body');
             let lineDiv = document.createElement('div');
             lineDiv.setAttribute('class', 'line');
             let signalDiv = document.createElement('div');
             signalDiv.setAttribute('class', 'signal');
             lineDiv.appendChild(signalDiv);
             body.appendChild(lineDiv);
             const doStyle = document.querySelectorAll('.line')[i].style;
             // 模拟信号强度数据
             const signal = Math.floor(Math.random() * 100);
             doStyle.setProperty('--line-color', getColor(signal));
             doStyle.setProperty('--line-width', (signal / 100) * 100 + '%');
             doStyle.setProperty('--percent', (100 / signal) + '%');
             doStyle.setProperty('--to-percent', 2 * (100 / signal) + '%');
         }
     }

     function getColor(signal) {
         if (signal > 0 && signal < 40) {
             return 'red';
         }
         if (signal >= 40 && signal < 80) {
             return 'yellow';
         }
         if (signal >= 80) {
             return 'green';
         }
         return '#aaa';
     }
</script>