.ui-loader-overlay{
	padding:20px;
	overflow:auto;
	background:rgba(0, 0, 0, 0.8);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	z-index:9000;
}
.ui-loader{
	transform: translate(-50%, -50%);
	
	position:relative;
	left:50%;
	left:calc(50% - 18px);
	top:50%;
	
	animation: ui-loader-rotate 1.4s linear infinite;
}
.ui-loader-overlay .ui-loader{
	left:0%  !important;
	top:0% !important;
}
.ui-loader .ui-loader-spinner{
	stroke-dasharray: 187;
	stroke-dashoffset: 0;
	transform-origin: center;
	animation:ui-loader-dash 1.4s ease-in-out infinite, ui-loader-color 5.6s ease-in-out infinite;
}
.ui-loader.white .ui-loader-spinner{
	animation:ui-loader-dash 1.4s ease-in-out infinite, ui-loader-color-blanco 5.6s ease-in-out infinite;
}
.ui-loader-overlay .ui-loader .ui-loader-spinner{
	animation:ui-loader-dash 1.4s ease-in-out infinite, ui-loader-color-blanco 5.6s ease-in-out infinite;
}

@keyframes ui-loader-rotate{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(270deg);
	}
}
@keyframes ui-loader-dash{
	0%{
		stroke-dashoffset: 187;
	}
	50%{
		stroke-dashoffset: 46.75;
		transform:rotate(135deg);
	}
	100%{
		stroke-dashoffset: 187;
		transform:rotate(450deg);
	}
}
@keyframes ui-loader-color{
	0%{
		stroke: rgba(0,0,0, 0.5);
	}
	25%{
		stroke: rgba(0,0,0, 0.5);
	}
	50%{
		stroke: rgba(0,0,0, 0.5);
	}
	75%{
		stroke: rgba(0,0,0, 0.5);
	}
	100%{
		stroke: rgba(0,0,0, 0.5);
	}
}
@keyframes ui-loader-color-blanco{
	0%{
		stroke: rgba(255,255,255, 0.5);
	}
	25%{
		stroke: rgba(255,255,255, 0.5);
	}
	50%{
		stroke: rgba(255,255,255, 0.5);
	}
	75%{
		stroke: rgba(255,255,255, 0.5);
	}
	100%{
		stroke: rgba(255,255,255, 0.5);
	}
}

/*

<svg class="ui-loader" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
	<circle class="ui-loader-spinner" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>

*/