.demo{ background: linear-gradient(45deg, #ee0979,#ff6a00); }

.preloader{
    background-color: rgba(255, 255, 255, .2);
	width: 50px;
	height: 50px;
    margin: 50px auto 0;
    position: relative;
}

.preloader:before{
	content: "";
	background-color: #fff;
	height: 10px;
	width: 10px;
	border-radius: 10px;
    position: absolute;
	animation: preloader 2s ease-in-out infinite;
}

.preloader:after{
	content: "";
	background-color: #fff;
	height: 50px;
	width: 0px;
    opacity: 1;
    position: absolute;
    top: 0px;
	left: 0px;
	z-index: 0;
	animation: preloader-2 5s ease-in-out infinite;
}

@keyframes preloader{
    0%{
        left: -12px;
        top: -12px;
    }
    25%{
        left:52px;
        top:-12px;
    }
    50%{
        left: 52px;
        top: 52px;
    }
    75%{
        left: -12px;
        top: 52px;
    }
    100%{
        left:-12px;
        top:-12px;
    }
}

@keyframes preloader-2{
    0%{ width: 0px; }
    70%{
        width: 50px;
        opacity: 1;
    }
    90%{
        opacity: 0;
        width: 50px;
    }
    100%{
        opacity: 0;
        width: 0px;
    }
}