nixon1333/loader.html

## loader.html
<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>
	<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>