css 电池loading加载效果

css电池loading的加载效果，可自己修改电量。

    .progress {
        width:80px;
        height:40px;
        border:2px solid #000;
        padding:3px;
        background:
                repeating-linear-gradient(90deg,#000 0 10px,#0000 0 16px)
                0/0% no-repeat content-box content-box;
        position: relative;
        animation:p5 2s infinite steps(6);
    }
    .progress::before {
        content:"";
        position: absolute;
        top: 50%;
        left:100%;
        transform: translateY(-50%);
        width:10px;
        height: 10px;
        border: 2px solid #000;
    }
    @keyframes p5 {
        100% {background-size:120%}
    }



<div class="progress"></div>