<head>
<link rel='stylesheet' type='text/css' href='http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css'/>
</head>
Selanjutnya, letakkan link Bootstrap.min.js dan jquery.min.js diatas tag body tutup, yaitu: </body>, sbb:
<script src='//www.appacyber.net/_styl/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script>
<script src='http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js'></script>
Berikutnya, letakkan tombol button berikut ini dimanapun anda suka:
<button id="update" class='btn btn-success'><i class="icon-refresh"></i> Click Here</button>
Lalu, letakkan script javascript ini di bawah tag body buka <body> atau paling bawah sekali diatas tag body tutup </body> atau dalam tag <head>
<script>
$( document ).ready( function() {
$( "#update" ).on( "click", function( e ) {
var $icon = $( this ).find( ".icon-refresh" ),
animateClass = "icon-refresh-animate";
$icon.addClass( animateClass );
// setTimeout is to indicate some async operation
window.setTimeout( function() {
$icon.removeClass( animateClass );
}, 2000 );
});
});
</script>
Letakkan script CSS berikut ini di blok script CSS blogmu:
<style>
.icon-refresh-animate {
animation-name: rotateThis;
animation-duration: .5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes rotateThis {
from { transform: scale( 1 ) rotate( 0deg ); }
to { transform: scale( 1 ) rotate( 360deg ); }
}
</style>
Berikut ini adalah DEMO-nya:
Atau akses disini:
http://jsfiddle.net/alicera/kVHbV/817/
Selamat Mencoba dan Coba kembangkan lagi!
No comments:
Post a Comment