/* Mini spinner - https://codepen.io/t_afif/pen/JjWJPwN */
.mini-spinner{
	height: .3rem;
	width: 6rem;
	background: linear-gradient(hsl(var(--color-cat-h), var(--color-cat-s), 60%, 0.8) 0 0), linear-gradient(hsl(var(--color-cat-h), var(--color-cat-s), 60%, 0.8) 0 0), var(--color-lightblue-lighter);
	background-size: 60% 100%;
	background-repeat: no-repeat;
	animation: bar-loop 3s infinite;
}

.mini-spinner--white{
	height: .3rem;
	width: 6rem;
	background: linear-gradient(hsl(var(--color-cat-h), var(--color-cat-s), 60%, 0.8) 0 0), linear-gradient(hsl(var(--color-cat-h), var(--color-cat-s), 60%, 0.8) 0 0), #fff;
	background-size: 60% 100%;
	background-repeat: no-repeat;
	animation: bar-loop 3s infinite;
}

@keyframes bar-loop{
	0%   {background-position: -150% 0, -150% 0}
	60%  {background-position: 250% 0, -150% 0}
	100% {background-position: 250% 0, 250% 0}
}

.mini-spinner::after, .mini-spinner--white::after{
	content: 'Cargando...';
	font-family: 'Roboto Mono', sans-serif;
	font-size: .7rem;
	margin-top: .5rem;
	text-align: center;
	display: none;			/* Cambiar a -display: block- en su css correspondiente para utilizar */
}