.preloader {
	background: $white;
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999999;

	.middle {
		width: 80px;
		height: 80px;
		line-height: 80px;
		text-align: center;
		color: $theme-primary-color;
		position: absolute;
		left: 50%;
		top: 50%;
		@include center-by-translating();
		@include rounded-border();

		i:before {
			font-size: 45px;
		}

		&:before {
			content: "";
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			border: 4px solid lighten($black, 80%);
			border-top: 4px solid $theme-primary-color;
			border-bottom: 4px solid $theme-primary-color;
			@include rounded-border();
			-webkit-animation: proloaderAnimation 0.8s linear infinite;
			animation: proloaderAnimation 0.8s linear infinite;
		}
	}
}

/*** proloader animation ***/
@-webkit-keyframes proloaderAnimation {
  form {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes proloaderAnimation {
  form {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}