Bootstrap 3 Skeleton
This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.
by rwachtler
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="spinner-wrapper">
<div class="spinner-outer">
</div>
</div>
CSS
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
.spinner-wrapper {
width: 40px;
height: 40px;
position: relative;
background: transparent;
}
.spinner-outer{
width: 100%;
height: 100%;
background: transparent;
border: 1px solid #000;
border-radius: 50%;
position: relative;
overflow: hidden;
}
.spinner-fill{
height: 50%;
width: 1px;
background: red;
transform-origin: bottom center;
position: absolute;
left: calc(50% - 0.5px);
}
JavaScript
$(document).ready(function(){
var expire = 10000; // 10 secs
var transformVal = 0;
var transformPerSecond = 1;
var spinnerInterval;
var passedTime = 0;
var creationInterval = expire/360;
spinnerInterval = setInterval(function(){
if(passedTime < expire){
var spin = $('<div class="spinner-fill"></div>');
spin.css('transform', 'rotate('+transformVal+'deg)');
$('.spinner-outer').append(spin);
transformVal += transformPerSecond;
passedTime += Math.round(creationInterval);
} else{
console.log(passedTime);
alert("reload");
clearInterval(spinnerInterval);
}
},creationInterval);
});