<div id='controls'>
<label>Id: <input type='text' id='person_id' /></label>
<button id='btnLoad'>Load</button>
</div>
<h1><b>Name: </b><span class='field' data-key="name"></span></h1>
<p><b>hair_color: </b><span class='field' data-key="hair_color"></span></p>
<p><b>eye_color: </b><span class='field' data-key="eye_color"></span></p>.loader {
border: 5px solid #f3f3f3; /* Light grey */
border-top: 5px solid #3498db; /* Blue */
border-radius: 50%;
width: 10px;
height: 10px;
animation: spin 1s linear infinite;
display: inline-block;
vertical-align: middle;
margin-left: 10px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}async function load() {
const id = $('#person_id').val();
$('.field').addClass('loader');
const data = await $.getJSON(`https://swapi.co/api/people/${id}/`);
$('.field').removeClass('loader');
$('.field').each((idx, el) => {
$(el).text(data[el.dataset.key]);
});
}
$('#btnLoad').on('click', load);
External CSS
This Pen doesn't use any external CSS resources.