ejemplo de botón cargando animado con CSS en español

en este ejemplo te muestro cómo puedes hacer un botón de cargando animado es decir  se ejecute una pequeña animación para llamar la atención y todo esto utilizando solo estilos CSS

veamos cómo funciona:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.botoncargando {
background-color: #4CAF50; 
border: none; 
color: white; 
padding: 12px 24px; 
font-size: 16px; 
}

.fa {
margin-left: -12px;
margin-right: 8px;
}
</style>
</head>
<body>

<h2>Botón cargando animado</h2>

<button class="botoncargando">
<i class="fa fa-spinner fa-spin"></i>Cargando
</button>

</body>
</html>

como puedes ver en el código anterior en el apartado del Body simplemente tenemos un elemento de tipo button con una clase aplicada llamada botóncargando y después un elemento <i> con tres clases aplicadas cuya definición está en la hoja de estilos que tienes definida en la parte del head

y es en realidad la responsable del aspecto del iconito y de su animación el aspecto del botoncito lo tiene la clase fa-spinner y la animación lo tiene la clase fa-spin

si quieres ver más ejemplos de los diferentes iconos que tiene esta hoja de estilos pública te dejo el siguiente enlace