.demo{ background: linear-gradient(45deg, #11998e,#38ef7d); }

.preloader{
	height: 100px;
	width: 100px;
    margin: 30px auto 0;
	position: relative;
}

.loader{
    background-color: #fff;
	width: 5px;
	height: 5px;
    border-radius: 50px;
    position: relative;
	top: calc(50% - 2.5px);
	left: calc(50% - 2.5px);
}

.loader:before,
.loader:after{
	content: "";
    background: linear-gradient(45deg,transparent,rgba(255, 255, 255, .3),rgba(255, 255, 255, .3),transparent);
    width: 50px;
	height: 50px;
    border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	border-radius: 0 50px 0px 0;
    transform-origin:  0% 100%;
    position: absolute;
	top: -47px;
	animation: loader 1s linear infinite;
}

.loader:after{
    border-top: none;
    border-right: none;
	border-bottom: 3px solid #fff;
	border-left: 3px solid #fff;
	border-radius: 0 0px 0px  50px;
	transform-origin:  100% 0%;
    top: 2px;
	right: 2px;
}

@keyframes loader{
    0%{ transform:rotate(0deg); }
    100%{ transform:rotate(360deg); }
}