.spinner {
	position: relative;
	width: 1em;
	height: 1em;
	font-size: 30px;
	color: #000;
}

.spinner::after {
	content: '';
	animation: 1s linear 0s normal none infinite running spin;
	box-sizing: border-box;
	border-bottom-color: transparent;
	border-image: none;
	border-radius: 100%;
	border-style: solid;
	border-width: 0.18em;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	animation: spin 1s linear infinite;
}

.spinner--fixed {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

@-webkit-keyframes spin
{
	from { -webkit-transform: rotate(0deg); opacity: 0.4; }
	50%  { -webkit-transform: rotate(180deg); opacity: 1; }
	to   { -webkit-transform: rotate(360deg); opacity: 0.4; }
}

@-moz-keyframes spin
{
	from { -moz-transform: rotate(0deg); opacity: 0.4; }
	50%  { -moz-transform: rotate(180deg); opacity: 1; }
	to   { -moz-transform: rotate(360deg); opacity: 0.4; }
}

@-ms-keyframes spin
{
	from { -ms-transform: rotate(0deg); opacity: 0.4; }
	50%  { -ms-transform: rotate(180deg); opacity: 1; }
	to   { -ms-transform: rotate(360deg); opacity: 0.4; }
}

@-o-keyframes spin
{
	from { -o-transform: rotate(0deg); opacity: 0.4; }
	50%  { -o-transform: rotate(180deg); opacity: 1; }
	to   { -o-transform: rotate(360deg); opacity: 0.4; }
}

@keyframes spin
{
	from { transform: rotate(0deg); opacity: 0.2; }
	50%  { transform: rotate(180deg); opacity: 1; }
	to   { transform: rotate(360deg); opacity: 0.2; }
}