loading界面类似注水填充--彩色图片随加载进度覆盖灰色图片

最近遇到的问题，一直不知道怎么解决，在这里记录下，核心是给彩色图片设置外层div，然后overflow:hidden就可以了。

直接上代码把。。用的是vue做的。

<template>
    <div id="loadPage">
        <div class="containerDiv">
            <div class="out_box">
                <img class="out_img" src="../assets/images/gray.png">
                <div :style="'width:' + temp +'%'" class="inside_box">
                    <img src="../assets/images/colorful.png">
                </div>
            </div>
            <div class="temp">
                <span v-text="temp"></span>%
            </div>
        </div>
    </div>
</template>
<style rel="stylesheet/scss" lang="scss" scoped>
    #loadPage {
        height: 100%;
        position: relative;
        min-height: 1217px;
        .containerDiv{
            min-height: 1333px;
            width: 100%;
            background:url("../assets/images/loding_bg.png") top center no-repeat;
            background-size: cover;
            .out_box{
                position: relative;
                width: 341px;
                height: 386px;
                top: 330px;
                left: 206px;
                .out_img{
                    display: block;
                    position: relative;
                    z-index: 1;
                }
                .inside_box{
                    position: absolute;
                    height: 386px;
                    top: 0;
                    left: 0;
                    width: 0;
                    overflow: hidden;
                    z-index: 2;
                    img{
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 341px;
                        height: 386px;
                    }
                    
                }
            }
            .temp {
                height: 130px;
                width: 100px;
                color: white;
                padding-top: 350px;
                font-size: 50px;
                margin-left: 310px;
            }
        }
    }
    
</style>
<script type="text/ecmascript-6">
    import list from '../assets/script/loadimg';
    import store from '../store/index';

    export default{
        data(){
            return {
                progress: 0,
                temp: 0
            }
        },

        mounted() {
            let imagesList = list.list;
            let len = imagesList.length;
            let images = [];
            let count = 0;
            this.progress = parseInt(count/len);

            if (imagesList.length > 0) {
                imagesList.forEach((item) => {
                    let imgUrl = require('../assets/images/' + item);
                    let img = document.createElement('img');
                    img.src = imgUrl;
                    images.push(img);
                })
            }
            var timer = setInterval( ()=>{
                var self = this;
                images.forEach(function(img, index){
                    if(img.complete){
                        count = count + 1;
                        images.splice(index, 1)
                    }
                });
                this.progress = parseInt(count * 100 / len);
                if(this.temp < this.progress - 1){
                    this.temp += 2;
                }

                if(this.progress == 100 && this.temp >= this.progress-1){
                    window.clearInterval(timer);
                    setTimeout( ()=>{
                        store.loading = false
                    }, 600 )
                }
                self.images = images;
            }, 33)
        }
    }
</script>