.loader {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    top: 0;
    z-index: 5;
    visibility: hidden;
    &.loading {
    	visibility: visible;
    }
    .circle {
        position: absolute;
        left:0;
        margin: auto;
        width: 14px;
        height: 14px;
        @include border-radius(50%);
        border: 5px solid #ccc;
        &:before {
            content: "";
            width: 7px;
            height: 7px;
            @include border-radius(20px);
            background: green;
            position: absolute;
            top:0;bottom:0;
            left:0; right:0;
            margin: auto;
            @include animation(circle 1.4s linear infinite);
        }
      
    }
}
@-webkit-keyframes circle {
	from {
		@include transform(unquote("rotate(0deg) translate(-9px) rotate(0deg)"));
	}
	to {
		@include transform(unquote("rotate(360deg) translate(-9px) rotate(-360deg)"));
	}
}

@-moz-keyframes circle {
	from {
		@include transform(unquote("rotate(0deg) translate(-9px) rotate(0deg)"));
	}
	to {
		@include transform(unquote("rotate(360deg) translate(-9px) rotate(-360deg)"));
	}
}

@-o-keyframes circle {
	from {
		@include transform(unquote("rotate(0deg) translate(-9px) rotate(0deg)"));
	}
	to {
		@include transform(unquote("rotate(360deg) translate(-9px) rotate(-360deg)"));
	}
}

@keyframes circle {
	from {
		@include transform(unquote("rotate(0deg) translate(-9px) rotate(0deg)"));
	}
	to {
		@include transform(unquote("rotate(360deg) translate(-9px) rotate(-360deg)"));
	}
}

@-webkit-keyframes fade-in-out {
	from {
		@include opacity(0);
	}
	to {
		@include opacity(1);
	}
}

@-moz-keyframes fade-in-out {
	from {
		@include opacity(0);
	}
	to {
		@include opacity(1);
	}
}

@-o-keyframes fade-in-out {
	from {
		@include opacity(0);
	}
	to {
		@include opacity(1);
	}
}

@keyframes fade-in-out {
	from {
		@include opacity(0);
	}
	to {
		@include opacity(1);
	}
}