css不规则图片进度条

1.准备2张图片：1张白色物体（初始状态）、1张完整形态（加载完成）

2.HTML、css

<div class="person-container">
                <div class="loading_person person"></div>
                <div class="person-div">
                    <div class="total_person person"></div>
                </div>
            </div>


<style rel="stylesheet/less" lang="less">
.person-container {
        position: relative;
        width: 200px;
        height：300px;
        .person {
            position: absolute;
            top: 0;
            left: 0;
        }
        .loading_person {
            width: 100%;
            height: 100%;
            background: url('loading.png') 0 0 no-repeat;
            background-size: contain;
        }
        .total_person {
            width:200px;
            height: 100%;
            background: url('total.png') 0 0 no-repeat;
            background-size: contain;
        }
        .person-div {
            height: 100%;
            width: 0;
            overflow: hidden;
            position: relative;
            transition: width 5s ease-in 2s;
            -webkit-transition: width 5s ease-in 1s;
        }
        .person-div-width {
            width: 100%;
        }
    }
</style>

3.触发加载动画

const dom = document.querySelector('.person-div')
// 触发transition：width由0变100%
dom.classList.add('person-div-width')
// 等待加载动画完成，进行下一步
dom.addEventListener('transitionend', this.loaded)