Skip to content

Instantly share code, notes, and snippets.

@nixon1333
Created December 26, 2017 13:25
Show Gist options
  • Save nixon1333/f86b9cc0e97a21da9cb83d2e6a5a73c6 to your computer and use it in GitHub Desktop.
Save nixon1333/f86b9cc0e97a21da9cb83d2e6a5a73c6 to your computer and use it in GitHub Desktop.
load a long time consuming link with a loader
<html>
<head>
<style>
#loading {
display:none;
position:absolute;
left:0;
top:0;
z-index:1000;
width:100%;
height:100%;
min-height:100%;
background:#000;
opacity:0.8;
text-align:center;
color:#fff;
}
#loading_anim {
position:absolute;
left: calc(50% - 90px);
top: calc(50% - 90px);
z-index:1010;
}
.spinner {
width: 180px;
height: 180px;
position: relative;
/* margin: 100px auto; */
}
.double-bounce1, .double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #333;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
animation: sk-bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
@-webkit-keyframes sk-bounce {
0%, 100% { -webkit-transform: scale(0.0) }
50% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bounce {
0%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
</style>
</head>
<div id="loading">
<div id="loading_anim">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
</div>
<a href="https://twitter.com/nixon1333" class="mylinkclass withanimation">link</a>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script>
$(function () {
$(".withanimation").click(function(e) {
e.preventDefault();
$("#loading").show();
var url=$(this).attr("href");
setTimeout(function() {
setTimeout(function() {showSpinner();},30);
window.location=url;
},0);
});
});
function showSpinner() {
$('#loading').show();
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment