Cara Membuat Animasi Loading Pada Button di Bootstrap
Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Kali ini saya akan mencoba membagi Cara Membangun Animasi Loading Di Button di Bootstrap.
Pasti teman-teman ingin tampilan web teman-teman lebih menarik dengan menyisipkan animasi-animasi di web.
Nah supaya web teman-teman lebih menarik saya akan memberikan contoh Cara Membangun Animasi Loading Di Button di Bootstrap. berikut langkah-langkahnya:
– Pertama-tama teman-teman ketikan dulu tag <button> di text editor teman-teman. Dan beri class seperti gambar di bawah ini
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content=IE=edge>
<meta name=viewport content=width=device-width, initial-scale=1>
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Theme</title>
<!-- Bootstrap -->
<link href=css/bootstrap.min.css rel=stylesheet>
<link rel=stylesheet type=text/css href=css/modifikasi.css>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src=https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js></script>
<script src=https://oss.maxcdn.com/respond/1.4.2/respond.min.js></script>
<![endif]-->
</head>
<body>
<div class=container text-center>
<h3>Animasi Button Di Bootstrap</h3>
<button class=btn btn-lg btn-primary>
</button>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src=js/bootstrap.min.js></script>
</body>
</html>
Teman-teman dapat merubah warna dengan mengganti class btn-primary menjadi btn-danger dan yang lain-lain sesuai keinginan teman-teman.
– Kedua teman-teman ketikan tag <span> dan beri class seperti gambar di bawah ini
<button class=btn btn-lg btn-primary>
<span class=glyphicon glyphicon-refresh glyphicon-refresh-animate></span> Loading...
</button>
Pemberian class glyphicon berfungsi bagi menampilkan icon bootstrap di pada button
– Ketiga teman-teman ketikan css di bawah ini dan save dengan nama modifikasi.css di folder css bootstrap teman-teman.
/** meberi animasi di icon**/
.glyphicon-refresh-animate {
-animation: spin .7s infinite linear;
-webkit-animation: spin2 .7s infinite linear;
}
@-webkit-keyframes spin2 {
from { -webkit-transform: rotate(0deg);}
to { -webkit-transform: rotate(360deg);}
}
@keyframes spin {
from { transform: scale(1) rotate(0deg);}
to { transform: scale(1) rotate(360deg);}
}
– Hasilnya akan menjadi seperti ini.
Kalau di jalankan di browser, icon refresh di button akan berputar
Bagaimana teman-teman mudahkan Cara Membangun Animasi Loading Di Button di Bootstrap. Demikian artikel saya hari ini. Sehat selalu ya teman-teman, selamat mencoba.
Sumber https://kursuswebsite.org
