Line 109: | Line 109: | ||
</div> | </div> | ||
</nav> | </nav> | ||
− | <div class="container"><div class="waiteranimationdiv"><img class="spinner" src="https://static.igem.org/mediawiki/2018/c/cc/T--GO_Paris-Saclay--mascotte_spinner.png"> Loading, please wait</div></div> | + | <div class="container"><div class="waiteranimationdiv"><img class="spinner" src="https://static.igem.org/mediawiki/2018/c/cc/T--GO_Paris-Saclay--mascotte_spinner.png"> Loading, please wait <progress id="progress" value="0"></progress><span id="progdisplay"></span></div></div> |
</div> | </div> | ||
Line 154: | Line 154: | ||
<script> | <script> | ||
$('#top_title').remove(); | $('#top_title').remove(); | ||
+ | var progressBar = document.getElementById("progress"); | ||
+ | var display = document.getElementById("display"); | ||
function reqListener () { | function reqListener () { | ||
Line 172: | Line 174: | ||
req.open('GET', 'https://static.igem.org/mediawiki/2018/e/ee/T--GO_Paris-Saclay--mainscript.txt', false); | req.open('GET', 'https://static.igem.org/mediawiki/2018/e/ee/T--GO_Paris-Saclay--mainscript.txt', false); | ||
console.log("Sending JS XHR..."); | console.log("Sending JS XHR..."); | ||
+ | req.onprogress = function(e) { | ||
+ | if (e.lengthComputable) { | ||
+ | progressBar.max = e.total; | ||
+ | progressBar.value = e.loaded; | ||
+ | display.innerText = Math.floor((e.loaded / e.total) * 100) + '%'; | ||
+ | } | ||
+ | }; | ||
req.send(null); | req.send(null); | ||
console.log("Received JS results"); | console.log("Received JS results"); |
Revision as of 15:29, 10 October 2018
![](https://static.igem.org/mediawiki/2018/c/cc/T--GO_Paris-Saclay--mascotte_spinner.png)