JSFiddle - React, Tailwind, and code Playground
by Glutamat
HTML
<input type="text" id="inp" />
<a id="load">Load Data</a>
<div id="prog"></div>
<div id="result"></div>
JavaScript
var inp, res, prog, xhr;
inp = document.getElementById("inp");
res = document.getElementById("result");
prog = document.getElementById("prog");
xhr = new XMLHttpRequest();
document.getElementById("load").addEventListener("click", function () {
res.innerHTML = "";
prog.innerHTML = "Loading...";
xhr.open("POST", "/echo/html/");
xhr.send({
delay: 10
});
});
xhr.addEventListener("readystatechange", function () {
if (this.readyState === 4 && this.status === 200) {
prog.innerHTML = "Finished";
res.innerHTML = '<img src="https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png"></img>';
inp.focus()
}
})