カラフルなバーの表示（Angular）

はじめに

参画プロジェクトにて、値に応じてバッテリーの増減を確認できるものがほしいとのことでカラフルなバーを自作

ソース

色の異なる3つのバーをかぶせるように配置する

.html

<div class="barContainer">
        <div class="colorful-bar" [style.zIndex]="1"></div>
        <div class="gray-bar" [style.width.%]="grayBarWidth" [style.right.px]="0" [style.zIndex]="2"></div>
        <div class="additional-bar" [style.zIndex]="3"></div>
</div>

.css

.barContainer {
    position: relative;
    width: 70%;
}

.colorful-bar {
    top: 0;
    height: 30px;
    background: linear-gradient(90deg,
            #EB5757 0%, #EB5757 20%,
            #F3994A 20%, #F3994A 40%,
            #F2C94B 40%, #F2C94B 60%,
            #26AE60 60%, #26AE60 80%,
            #2296F3 80%, #2296F3 100%);
}

.gray-bar {
    position: absolute;
    top: 0;
    height: 30px;
    background-color: gray;
}

.additional-bar {
    position: absolute;
    top: 0;
    height: 30px;
    width: 100%;
    background: linear-gradient(90deg,
            rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 9%, rgb(255, 255, 255) 9%, rgb(255, 255, 255) 10%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 19%, rgb(255, 255, 255) 19%, rgb(255, 255, 255) 20%,
            rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 29%, rgb(255, 255, 255) 29%, rgb(255, 255, 255) 30%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 39%, rgb(255, 255, 255) 39%, rgb(255, 255, 255) 40%,
            rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 49%, rgb(255, 255, 255) 49%, rgb(255, 255, 255) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 59%, rgb(255, 255, 255) 59%, rgb(255, 255, 255) 60%,
            rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0) 69%, rgb(255, 255, 255) 69%, rgb(255, 255, 255) 70%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0) 79%, rgb(255, 255, 255) 79%, rgb(255, 255, 255) 80%,
            rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0) 89%, rgb(255, 255, 255) 89%, rgb(255, 255, 255) 90%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 99%, rgb(255, 255, 255) 99%, rgb(255, 255, 255) 100%);
}

tsで"grayBarWidth"の値を変更し、増減を表現する

.ts

       grayBarWidth: number = (100 - "適当な数値");
       

イメージ

"grayBarWidth"が5

"grayBarWidth"が80

終わりに

参考になりましたら「いいね」を押していただけると励みになりますのでよろしくお願いします