Powered byBlog Widgetand shared by JUNIAWAN89

Membuat loading page dengan ajax


Sore, kali ini saya mau share gimana sih caranya buat loading page dengan ajax.

Langsung aja ya... cekidot

Ini dia coding nya :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(document).ajaxStart(function(){
        $("#wait").css("display", "block");
    });
    $(document).ajaxComplete(function(){
        $("#wait").css("display", "none");
    });
    $("button").click(function(){
        $("#txt").load("text.php");
    });
});
</script>
</head>
<body>

<div id="txt"><h2>Biarkan Ajax mengganti tulisan ini... Yeaaahhh!!!</h2></div>

<button>Ganti yuk</button>

<div id="wait" style="display:none;width:69px;height:89px;border:1px solid black;position:absolute;top:50%;left:50%;padding:2px;"><img src='loading.gif' width="64" height="64" /><br>Loading..</div>

</body>
</html>


Sobat bisa download untuk gambar gif nya. Ubah nama nya menjadi loading.gif
Untuk text.php, sobat bisa buat filenya, isikan kata-kata apapun didalamnya, terserah sobat saja.

Klik disini untuk demo

Terimakasih
Semoga bermanfaat
Latest
Previous
Next Post »

Pengunjung yang baik selalu memberikan masukan / komentar.... ConversionConversion EmoticonEmoticon

Popular