条形码进度条

1.进度条+条形码=条形码进度条

(1) 条形码样式

https://wow.techbrood.com/fiddle/11494

(2)进度条样式

https://blog.csdn.net/weixin_43927699/article/details/108141972

(3)加在一起,代码如下

Css:

.progress_out {
    height: 3em;
    display: block;
    padding: 10px;
    width: 100%;
    margin-bottom: 20px;
    float: left;
    text-align: center;
    border-radius: 2px;
    background-color: rgba(1, 49, 65, 1);
    position: relative;
    top: 0;
    left: 0;
    margin-right: 10px;

    background-image: linear-gradient(90deg, #1c2955 10px, transparent 0);
    background-size: 15px 100%;
}

.progress_in {
    border-radius: 2px;
    position: absolute;
    top: 0;
    left: 0;

    height: 3em;
    display: block;
    padding: 10px;
    width: 50%;
    margin-bottom: 20px;
    float: left;
    text-align: center;
    background-image: linear-gradient(90deg, #00e5ed 10px, transparent 0);
    background-size: 15px 100%;
}

HTML:

<p>
        <span class="progress_out">
        <span class="progress_in" :style="{width:progress_width+'%'}"></span>
        </span>
</p>

（4）结果

 2.调整样式

(1)函数linear-gradient

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */

linear-gradient(0deg, blue, green 40%, red);

(2)90deg

https://blog.csdn.net/qlin_11/article/details/98879519

(3)图中的这两个值相差5px,决定条形块之间的宽度

 （4）最终结果