Sanduhr anzeigen bis PDF geladen ist
Hallo,
ich habe folgendes Problem:
Ich will auf meiner Homepage ein PDF laden, das allerdings sehr groß ist und deshalb die Seite, wo das PDF geladen wird für ca. 10 bis 15 sec. leer bleibt.
In dieser Ladezeit möchte ich eine Sanduhr, Hinweis oder irgendwas anzeigen, das darauf hinweist, dass geladen wird.
Ich habe keinen blassen Schimmer, wie ich das machen könnte, ich hab mir die beiden Beiträge hier schon angesehen, halfen mir aber nicht weiter, auch der Google konnte mir nicht helfen.
Jetzt hoffe ich auf Euch ;)
Grüße und schon mal Danke
Rainer
Der hier verwendete Code
<!doctype html>
<html lang="de">
<head>
<style>
#logs{
color:white;
text-align: center;
font-size:25px;
}
body {
background-color: #353535;
background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/%D0%A2%D0%B5%D0%BA%D1%81%D1%82%D1%83%D1%80%D0%B0_%D1%86%D0%B8%D1%84%D1%80%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D1%88%D1%83%D0%BC%D0%B0_%D0%BD%D0%B0_%D1%87%D0%B5%D1%80%D0%BD%D0%BE%D0%BC_%D1%84%D0%BE%D0%BD%D0%B5.jpg/1920px-%D0%A2%D0%B5%D0%BA%D1%81%D1%82%D1%83%D1%80%D0%B0_%D1%86%D0%B8%D1%84%D1%80%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D1%88%D1%83%D0%BC%D0%B0_%D0%BD%D0%B0_%D1%87%D0%B5%D1%80%D0%BD%D0%BE%D0%BC_%D1%84%D0%BE%D0%BD%D0%B5.jpg)
}
h1,label {
color:#d7d7d7;
width:100%;
display:block;
text-align:center;font-family:monospace;text-shadow:1px 1px 3px rgb(0,0,0)}
.turningClock {
height: 200px;
width: 100px;
display:flex;
flex-direction:column;
animation: 5s turnClock infinite;
border-bottom: 10px solid #c99;
border-top: 10px solid #c99;
}
.turningTop {
background: rgba(116, 227, 255, 0.75);
width: 100%;
height: 100%;
border-radius: 0 0 50% 50%;
box-shadow: 0 -40px 0px #ff9 inset;
animation: 5s topSand infinite;
}
.turningBottom {
animation: 5s bottomSand infinite;
background: rgba(116, 227, 255, 0.75);
width: 100%;
height: 100%;
border-radius: 50% 50% 0 0;
box-shadow: 0 120px 0 #ff9 inset;
}
.clockWrap {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@keyframes turnClock {
0% {
transform: rotate(0deg)
}
5% {
transform: rotate(0deg)
}
45% {
transform: rotate(180deg)
}
50% {
transform: rotate(180deg)
}
95% {
transform: rotate(360deg)
}
100% {
transform: rotate(360deg)
}
}
@keyframes topSand {
5% {
box-shadow: 0 -40px 1px #ff9 inset;
}
45% {
box-shadow: 0 -120px 1px #ff9 inset;
}
55% {
box-shadow: 0 -120px 1px #ff9 inset;
}
95% {
box-shadow: 0 -40px 1px #ff9 inset;
}
}
@keyframes bottomSand {
5% {
box-shadow: 0 120px 0 #ff9 inset;
}
45% {
box-shadow: 0 40px 0px #ff9 inset;
}
55% {
box-shadow: 0 40px 0px #ff9 inset;
}
95% {
box-shadow: 0 120px 0 #ff9 inset;
}
}
embed{
width:90%;
border:2px solid white;
min-height:70vh;
display:block;
margin:0 auto;
}
#time_to_end ,#time_end{
color: white;
text-align: center;
}
#elepro{
color: white;
text-align: center;
display: flex;
flex-wrap: nowrap;
justify-content: center;
}
progress{
width:60vw;
height:30px;
}
span#progress-text {
font-size: 24px;
}
form *{
font-size:30px;
padding:5px 10px;
}
</style>
</head>
<body>
<h1>Uhr verschwindet beim fertigen laden</h1>
<form method="POST">
<label>PDF Datei auswählen um Datei vorzuladen</label><br>
<select name="filename">
<option value="/daten_webseite/kurzanleitungen_pdfa.pdf">kurzanleitungen_pdfa 0.43 Mb</option>
<option value="/daten_webseite/A17_FlightPlan.pdf">A17_FlightPlan 20.00 Mb</option>
<option value="/daten_webseite/1961_1970.pdf">1961_1970 100.72 MB</option>
</select>
<input type="submit" value="Auswahl bestätigen">
</form>
<embed id="pdf" width="90%" height="100" data="" type="application/pdf" src="">
<?php
if(isset($_POST['filename'])){
?>
<div id="clock" class="clockWrap">
<div class="turningClock">
<div class="turningTop"></div>
<div class="turningBottom"></div>
</div>
</div>
<?php
}
?>
</embed>
<?php
if(isset($_POST['filename'])){
?>
<div id="alles">
<div id="logs"></div>
<div id="elepro">
<progress id="progress" value="0"></progress>
<span id="progress-text"></span>
</div>
<div id="time_to_end"></div>
<div id="time_end"></div>
</div>
<?php
}
if(isset($_POST['filename'])){
?>
<script>
var uhr=document.getElementById('clock');
var pd=document.getElementById('pdf');
var progress = document.getElementById("progress");
var progressText = document.getElementById("progress-text");
var ele_log=document.getElementById('logs');
var downlod_rest_timer=document.getElementById('time_to_end');
var time_end_ele=document.getElementById('time_end');
let xhr = new XMLHttpRequest();
xhr.open ( "GET", "<?php echo htmlspecialchars($_POST['filename']); ?>", true );
//xhr.open ( "GET", "/daten_webseite/kurzanleitungen_pdfa.pdf", true );
var startTime = new Date().getTime();
xhr.responseType = 'arraybuffer';
xhr.onreadystatechange = function () {
xhr.onprogress = function(e) {
var duration = ( new Date().getTime() - startTime ) / 1000;
var kbps = Math.floor((e.loaded / duration)/1024);
downlod_rest_timer.innerHTML ="Downloadspeed: "+ kbps + " KB / sek";
time_end_ele.innerHTML='Noch '+(((e.total-e.loaded)/kbps)/1000).toFixed(0)+' Sekunden';
ele_log.innerHTML=(e.loaded/1000000).toFixed(3)+' von '+(e.total/1000000).toFixed(3)+' Mb geladen<br>';
progress.max = e.total;
progress.value = e.loaded;
progressText.innerHTML = Math.floor((e.loaded / e.total) * 100) + "%";
}
if (xhr.readyState == 4 && xhr.status == 200) {
var blobSrc = window.URL.createObjectURL(new Blob([this.response], { type: 'application/pdf' }));
pd.src=blobSrc;
uhr.style.display='none';
var alle=document.getElementById('alles');
alle.innerHTML='Download Komplett';
alle.style='text-align:center;font-size:30px;color:green;opacity:0;transition:1s opacity 2s';
}
}
xhr.send ();
</script>
<?php
}
?>
</body>
</html>