.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.loading{
	width: 10em;
	height: 10em;
	font-size: 1.5em;
	font-family: arial;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	position: relative;
	animation: crecer 2s linear infinite;
	color: #1a6baf;
}

.loading::before,
.loading::after{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	border-radius: 50%;
	border: 3px solid #1a6baf;
	border-left-color: transparent;
	border-right-color: transparent;
	box-sizing: border-box;
    animation: rotar 2s infinite linear;
        /*cubic-bezier(0.33,1.5,0.66,-0.5);*/
}

.loading::after{
	width: 90%;
	height: 90%;
	top: 5%;
	left: 5%;
    animation: rotar 2s infinite linear reverse;
}

@keyframes rotar{
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(360deg);
	}
}


.loading span::after{
  content: '';
  animation: addPoints 3s linear infinite;
  min-width: 1em;
  display: inline-block;
}

@keyframes addPoints{
  25%{
    content: '';
  }
  50%{
        content: '.';
  }
  75%{
        content: '..';
  }
  100%{
        content: '...';
  }
}