JSFiddle - React, Tailwind, and code Playground

by Eric Ocampo

HTML

<input type="button" value="Obtener datos" id="btnLoad">
<div class="cs-loader hidden">
  <div class="cs-loader-inner">
    <label>	●</label>
    <label>	●</label>
    <label>	●</label>
    <label>	●</label>
    <label>	●</label>
    <label>	●</label>
  </div>
</div>
<div id="lista" height="100px" width="100px">
    
</div>

CSS

body {
  margin: 0;
  padding: 0;
  
}
.hidden{
    display:none;
}
li{
    list-style:none;
}
li:nth-child(odd) {
    background:#0277bd;
    color:white;
}
li:nth-child(even) {
    background:white;
}




.cs-loader {
  position: absolute;
  left: 0;
  height: 30px;
  width: 100%;
  background:#3498db;
  opacity: .7
}

.cs-loader-inner {
  transform: translateY(-50%);
  top: 50%;
  position: absolute;
  width: calc(100px);
  color: #FFF;
  padding: 0 50px;
  text-align: center;
}

.cs-loader-inner label {
  font-size: 20px;
  opacity: 0;
  display:inline-block;
}

@keyframes lol {
  0% {
    opacity: 0;
    transform: translateX(-300px);
  }
  33% {
    opacity: 1;
    transform: translateX(0px);
  }
  66% {
    opacity: 1;
    transform: translateX(0px);
  }
  100% {
    opacity: 0;
    transform: translateX(300px);
  }
}

@-webkit-keyframes lol {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-300px);
  }
  33% {
    opacity: 1;
    -webkit-transform: translateX(0px);
  }
  66% {
    opacity: 1;
    -webkit-transform: translateX(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(300px);
  }
}

.cs-loader-inner label:nth-child(6) {
  -webkit-animation: lol 3s infinite ease-in-out;
  animation: lol 3s infinite ease-in-out;
}

.cs-loader-inner label:nth-child(5) {
  -webkit-animation: lol 3s 100ms infinite ease-in-out;
  animation: lol 3s 100ms infinite ease-in-out;
}

.cs-loader-inner label:nth-child(4) {
  -webkit-animation: lol 3s 200ms infinite ease-in-out;
  animation: lol 3s 200ms infinite ease-in-out;
}

.cs-loader-inner label:nth-child(3) {
  -webkit-animation: lol 3s 300ms infinite ease-in-out;
  animation: lol 3s 300ms infinite ease-in-out;
}

.cs-loader-inner label:nth-child(2) {
  -webkit-animation: lol 3s 400ms infinite ease-in-out;
  animation: lol 3s 400ms infinite ease-in-out;
}

.cs-loader-inner label:nth-child(1) {
  -webkit-animation: lol 3s 500ms infinite ease-in-out;
  animation: lol 3s 500ms infinite ease-in-out;
}

JavaScript

$("#btnLoad").click(function(){
	// indicamos que se inició la carga de datos
	$("lista").html("Cargando datos...");
	// procedemos a hacer la petición ajax
	$.ajax({
		// el primer parametro es la url de la petición
		url: "https://jsonplaceholder.typicode.com/posts",
		/* podemos ejecutar una funcion cuando el servidor
		* responde correctamente con success.*/
		success: function(data){
			// data contiene el JSON enviando por el servidor
            var json = data;
            // almacenamos los posts en una variable con html
            var html = "<ul>";
            // iteramos el objeto json que contiene la información de los posts
			$.each(json, function(index, value) {
            	// agregamos un nuevo elemento a la lista
    			html += "<li>"+value.title+"</li>";
			});
            // cerramos la lista
            html += "</ul>";
            // agregamos la lista completa a nuestro div
            $("#lista").html(html);
		},
    error: function( jqXHR, textStatus, errorThrown ) {
        $("#lista").html( "error:"+jqXHR.status);
    }
	});
});