Skip to content

Instantly share code, notes, and snippets.

@toto-castaldi

toto-castaldi/loading.html

Last active February 5, 2016 13:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save toto-castaldi/bcba54e97c86d549f335 to your computer and use it in GitHub Desktop.
Save toto-castaldi/bcba54e97c86d549f335 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
loading.html
<html>
<head>
<title>AAA</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">
<style>
.glyphicon-refresh-animate {
-animation: spin .7s infinite linear;
-ms-animation: spin .7s infinite linear;
-webkit-animation: spinw .7s infinite linear;
-moz-animation: spinm .7s infinite linear;
}
@keyframes spin {
from { transform: scale(1) rotate(0deg);}
to { transform: scale(1) rotate(360deg);}
}
@-webkit-keyframes spinw {
from { -webkit-transform: rotate(0deg);}
to { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes spinm {
from { -moz-transform: rotate(0deg);}
to { -moz-transform: rotate(360deg);}
}
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://toto-castaldi.github.io/cdn/scripts/jquery.isloading.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<form id="form">
<input type="text" name="name" />
<input type="submit" />
</form>
<script>
$('#form').submit(function( event ) {
var el = $('#form input[type=submit]');
el.isLoading({'tpl': '<span class="glyphicon glyphicon-refresh glyphicon-refresh-animate" ></span>'});
setTimeout(function () {
el.isLoading('hide');
}, 2000);
event.preventDefault();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment