function loadjscssfile(filename, filetype, callback){
if (filetype=="js"){ //if filename is a external JavaScript file
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("async",true)
fileref.setAttribute("src", filename)
if (fileref.readyState) { //IE
fileref.onreadystatechange = function () {
if (fileref.readyState == "loaded" || fileref.readyState == "complete") {
fileref.onreadystatechange = null;
callback();
}
};
} else { //Others
fileref.onload = function () {
callback();
};
}
}
else if (filetype=="css"){ //if filename is an external CSS file
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref!="undefined")
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(fileref);
}
(function (){
//Dynamically load jquery
if (typeof jQuery == 'undefined') {
loadjscssfile('//code.jquery.com/jquery.min.js','js',function () {
main();
});
} else main();
})();
function main(){
$(document).ready(function(){
//main code.....
});
};<script>
$('body').show();
$('.version').text(NProgress.version);
NProgress.start();
setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 1000);
</script>.fade {
transition: all 300ms linear 700ms;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
opacity: 1;
}
.fade.out {
opacity: 0;
}<body style='display: none'>
<header class='page-header'>
<span class='nprogress-logo fade out'></span>
<h1>NProgress<i>.js</i></h1>
<p class='fade out brief big'>A nanoscopic progress bar. Featuring realistic
trickle animations to convince your users that something is happening!</p>
</header>
<div class='contents fade out'>
Текст....
</div>
</body>