HTML：
<div id="loading" class="loading-end">
        <div class="door-left"></div>
        <div class="door-right"></div>
</div>
CSS：
#loading {
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 100%
}

#loading:before, #loading:after {
    display: table;
    content: ""
}

#loading:after {
    clear: both
}

.door-left, .door-right {
    background-color: #1bbc9b;
    width: 50%;
    height: 100%;
    -webkit-transition: all .5s ease
}

.door-left {
    float: left;
    -webkit-transform-origin: 0 0
}

.door-right {
    float: right;
    -webkit-transform-origin: 100% 0
}

.loading-end {
    visibility: hidden
}

.loading-end .door-left {
    -webkit-transform: rotateY(-90deg)
}

.loading-end .door-right {
    -webkit-transform: rotateY(90deg)
}
--
FROM 218.56.80.*