原生css实现滚动条显示

今天拿到设计图需要作出这样的一个效果，就是使用html加css实现滚动条的效果，
效果图是这样的
实现上面效果图的代码

## html代码

 <div style=" position: relative;">
            <img src="assets/images/oa/集团OA/项目周期.png" alt="" class="project_modal_task" >
            <span class="project_modal_name"  style="font-size: 14px;">2020-06-09 至 2020-07-09</span>
           <div class="progress_bar">
               <div class="progress_bar_active" style=" width: 80%;"></div>
            </div>
            <span  class="progress_bar_value">80%</span>
        </div>

## css相关代码

 .project_modal_task{
        position: absolute;
        left: 30px;
        top: 11px;
    }
    .progress_bar{
        width: 30%!important;
        height: 6px;
        border-radius: 3px;
        position: absolute;
        right: 15%;
        bottom: 40%;
        background:#E5EBEB;

    }
    .progress_bar_active{
        border-radius: 3px;
        height: 6px;
        background: #25BC9E;
    }
    .progress_bar_value{
        position: absolute;
        right: 7%;
        bottom: 38%;
        color: #333;
        font-size: 14px;
    }

实现的思路，是利用外层的div做成一个高度6px的盒子，然后当前有颜色的部分，也是利用了div，控制盒子的颜色为已经完成部分的颜色，盒子的宽度根据外层大盒子的比例进行显示。