Skip to content

Instantly share code, notes, and snippets.

@ShigeoTejima

ShigeoTejima/test.html

Created February 12, 2017 16:36
Show Gist options
  • Save ShigeoTejima/760685839d8c83580b558832de148843 to your computer and use it in GitHub Desktop.
Save ShigeoTejima/760685839d8c83580b558832de148843 to your computer and use it in GitHub Desktop.
Download ZIP
loading wall example...
Raw
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
.glyphicon-refresh-animate {
-animation: spin .7s infinite linear;
-ms-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);}
}
</style>
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<div id="a" class="col-md-3" style="border: 1px solid black; display: inline-block; position: relative; height: 80px;">
Cell
<input type="text" name="name" tabindex="-1">
<div id="wall" style="position: absolute; top: 0; left: 0; width: 237px; height: 27px; z-index: 1; border: 1px solid red; vertical-align: middle;">
<span id="loading" style="font-size: 24px; text-align: center;" class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
</div>
</div>
</div>
<script>
$(function() {
function ajust_wall() {
var $div_a = $("div#a");
var $div_wall = $("div#wall");
var width = $div_a.css("width");
var height = $div_a.css("height");
$div_wall.css("width", width);
$div_wall.css("height", height);
var $loading = $("span#loading");
var fontSize = $loading.css("font-size");
var top = (parseFloat(height)/2 - parseFloat(fontSize)/2 - 2);
$loading.css("width", width);
$loading.css("top", top + "px");
}
$(window).on("resize", ajust_wall);
ajust_wall();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment