Skip to content

Instantly share code, notes, and snippets.

@chrisjung-dev
Created December 29, 2015 10:33
Show Gist options
  • Save chrisjung-dev/5d33b8f65b34fc0a1bde to your computer and use it in GitHub Desktop.
Save chrisjung-dev/5d33b8f65b34fc0a1bde to your computer and use it in GitHub Desktop.
<div class="loading-bar"></div>
<style>
.loading-bar {
display: none;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
background: red;
height: 0;
animation-name: expand-width, fade;
animation-duration: 1s, 4s;
animation-delay: 0s, 1s;
animation-iteration-count: 1;
}
.loading-bar.visible {
display: block;
opacity: 1;
height: 2px;
}
@keyframes fade {
from {
height: 2px;
opacity: 1;
}
to {
height: 0;
opacity: 0;
}
}
@keyframes expand-width {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes glow {
from {
box-shadow: 0 0 5px red,
0 0 10px red,
0 0 10px rgba(255, 165, 0, 1),
0 0 20px rgb(255, 244, 0);
}
to {
box-shadow: none;
}
}
.loading-bar.visible:before {
box-shadow: none;
position: absolute;
right: 0;
content: "";
display: block;
height: 2px;
width: 8px;
animation-name: glow;
animation-duration: 5s;
animation-iteration-count: 1;
}
</style>
<script>
var links = document.querySelectorAll( 'a' ),
linkslen = links.length;
for ( var link = 0; link < linkslen; link++ ) {
links[link].addEventListener( 'click', function ( e ) {
//e.preventDefault();
var lb = document.querySelectorAll( '.loading-bar' )[0];
lb.classList.remove( 'visible' );
//noinspection SillyAssignmentJS
// triggers reflow
lb.offsetHeight = lb.offsetHeight;
lb.classList.add( 'visible' );
}, false )
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment