Line 21: | Line 21: | ||
<link href="https://fonts.googleapis.com/css?family=Assistant" rel="stylesheet" rel="stylesheet"> | <link href="https://fonts.googleapis.com/css?family=Assistant" rel="stylesheet" rel="stylesheet"> | ||
<link href="https://fonts.googleapis.com/css?family=Quicksand:400,500" rel="stylesheet"> | <link href="https://fonts.googleapis.com/css?family=Quicksand:400,500" rel="stylesheet"> | ||
+ | |||
+ | |||
+ | <script> | ||
+ | // makes sure the whole site is loaded | ||
+ | jQuery(window).load(function() { | ||
+ | // will first fade out the loading animation | ||
+ | jQuery("#status").fadeOut(); | ||
+ | // will fade out the whole DIV that covers the website. | ||
+ | jQuery("#preloader").delay(1000).fadeOut("slow"); | ||
+ | }) | ||
+ | |||
+ | </script> | ||
+ | <style> | ||
+ | #preloader { | ||
+ | position: fixed; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | bottom: 0; | ||
+ | background-color: white; | ||
+ | z-index: 99; | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | #status { | ||
+ | width: 200px; | ||
+ | height: 200px; | ||
+ | position: absolute; | ||
+ | left: 50%; | ||
+ | top: 50%; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2017/3/38/T--TECHNION-ISRAEL--preloader.gif); | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: center; | ||
+ | margin: -100px 0 0 -100px; | ||
+ | } | ||
+ | </style> | ||
+ | |||
<!--for hover and no on click----> | <!--for hover and no on click----> | ||
Line 62: | Line 99: | ||
<body> | <body> | ||
+ | <div id="preloader"> | ||
+ | <div id="status"></div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
<div class = "container-fluid"> | <div class = "container-fluid"> | ||
<div class= "row" style="background-color:white;" > | <div class= "row" style="background-color:white;" > |
Revision as of 22:07, 30 October 2017