<svg height="0" width="0" aria-hidden="true">
	<defs>
		<clipPath id="clip-path">
			<rect x="74" y="0" width="320" height="12"></rect>
			<rect x="74" y="20" width="320" height="12"></rect>
			<rect x="74" y="40" width="320" height="12"></rect>
			<rect x="0" y="70" width="320" height="12"></rect>
			<rect x="0" y="90" width="320" height="12"></rect>
			<circle id="Oval" cx="30" cy="30" r="30"></circle>
		</clipPath>
	</defs>
</svg>

<ul>
	<li class="card is-loading">
		<div class="card__content"></div>
	</li>
</ul>
html {
  font: normal 100%/1.5 'Roboto', sans-serif;
}

html, body {
  height: 100%;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  background: #1E88E5;
}

ul {
  list-style-type: none;
}

.card {
  width: 320px;
  padding: 1rem;
  background-color: white;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.075);
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.075);
}

.card__content {
  overflow: auto;
}
.card__content .card__results {
  margin: 0;
}
.card__content img {
  border-radius: 80%;
  float: left;
  display: inline-block;
  height: 60px;
  margin-right: 10px;
  width: 60px;
}
.is-loading .card__content {
  -webkit-animation: 1s forwards infinite placeholder-flash linear;
          animation: 1s forwards infinite placeholder-flash linear;
  -webkit-clip-path: url(#clip-path);
          clip-path: url(#clip-path);
  height: 110px;
  background: -webkit-gradient(linear, left top, right top, color-stop(8%, #eeeeee), color-stop(18%, #dddddd), color-stop(33%, #eeeeee));
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  background-size: 800px 104px;
}
.card__content.is-animating {
  -webkit-animation: 300ms forwards fade-in linear;
          animation: 300ms forwards fade-in linear;
}

@-webkit-keyframes placeholder-flash {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}

@keyframes placeholder-flash {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
$.ajax({
	url: 'https://randomuser.me/api/?results=1',
	method: 'GET',
	dataType: 'json',
	crossDomain: 'true'
}).done(function(data) {
	var results = data.results[0],
			fname = results.name.first,
			lname = results.name.last,
			street = results.location.street,
			city = results.location.city,
			state = results.location.state,
			email = results.email,
			url = results.picture.medium;

	var markup = `
	 <p class="card__results">
			${fname} ${lname}<br>
			${street} ${city} ${state}<br>
			<a href="#">${email}</a>
	 </p>
	`;

	setTimeout(function() {
		$('.card__content').prepend('<img src="'+ url +'"/>').append(markup).addClass('is-animating');
	  $('.card').removeClass('is-loading');
		$('svg').remove();
	}, 2000);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js