HTML: Wie kann man erst nach 5 Sekunden auf Seite weiterleiten?
Also man klickt auf eine Schaltfläche und erst läuft noch eine Animation ab und dann wird man auf die andere Seite geleitet
1 Antwort
Ave!
Habe gerade einmal etwas kleines zusammengebastelt und werde es nachfolgend erklären (Kein JavaScript nötig!):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="5; URL=http://google.de">
<style>
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(17, 15, 15);
}
.spinner {
animation: spin 1s linear infinite;
width: 50px;
height: 50px;
border: 5px solid rgb(84, 84, 87);
border-top: 5px solid rgb(77, 12, 241);
border-radius: 100%;
margin: auto;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div>
<div class="spinner"></div>
<h2 style="color: rgb(57, 19, 151)">Please wait you will be redirected...</h2>
</div>
</body>
</html>
Weiterleitung:
Eine Weiterleitung nach 5 Sekunden ist sehr simpel. Dazu musst du nur den meta-tag im head-Bereich mit dem Wert "refresh" für das http-equiv-Attribut nutzen. In das content-Attribut kommt dann deine Zeit in Sekunden, die gewartet werden soll, gefolgt von einem Semikolon und der spezifizierten URL:
<meta http-equiv="refresh" content="5; URL=http://google.de">
Weiterleitung nach 5 Sekunden an die URL http://google.de
Der Rest definiert nur den Style für einen Spinner und die Meldung.
Aktuell dreht sich mit meinem Code einfach ein Ladesymbol und darunter steht "Please wait you will be redirected..."
Du kannst einfach ein bisschen am Style herumspielen oder es so übernehmen. Wenn ich das auch erklären soll, schreib mir einen Kommentar :)
Also man klickt auf eine Schaltfläche und erst läuft noch eine Animation ab und dann wird man auf die andere Seite geleitet
Hab es überlesen, daher Ergänzung:
Hierfür ist tatsächlich JavaScript nötig und das ist um einiges komplizierter, da dafür die Seite bekannt sein muss und man sich überlegen muss, wie man die Ladeanimation einpflegt.
Grundsätzlich:
Einem Element im onclick-Attribut eine Funktion übergeben:
<button onclick="submit()">Submit</button>
Wir übergeben hier die submit-Funktion, die die Ladesequenz und Weiterleitung einleiten soll:
function submit(){
document.getElementById("load").style.display="block"; // Hier blenden wir das Element mit der ID "load" ein, welches wir irgendwo definiert und standardmäßig mit "display: none;" ausgeblendet haben
setTimeout(()=>{
window.location.href="http://google.de"; // Wir leiten an http://google.de weiter
}, 5000); // Und zwar nach 5000 Millisekunden = 5 Sekunden
Einmal angepasst auf oben vorgeschlagenes Beispiel mit Kommentaren:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(17, 15, 15);
}
.spinner {
animation: spin 1s linear infinite;
width: 50px;
height: 50px;
border: 5px solid rgb(84, 84, 87);
border-top: 5px solid rgb(77, 12, 241);
border-radius: 100%;
margin: auto;
}
#btn {
background-color: rgb(84,84,87);
border: 2px solid rgb(77, 12, 241);
border-radius: 8px;
font-size: 24px;
padding: 5px;
color: rgb(17, 15, 15);
font-weight: bold;
}
#btn:hover {
cursor: pointer;
background-color: rgb(17, 15, 15);
color: rgb(77, 12, 241);
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
<script>
function submit(){
document.getElementById("btn").style.display="none"; // Button ausblenden
document.getElementById("load").style.display="block"; // Container mit der Ladesequenz einblenden
setTimeout(()=>{ // Nach 5 Sekunden weiter leiten
window.location.href = "http://google.de";
}, 5000);
}
</script>
</head>
<body>
<button id="btn" onclick="submit()">Submit</button> <!-- Unser Button, der vorerst alleine angezeigt wird. Er besitzt die id "btn" und ruft beim Click die Funktion "submit" auf, die wir oben als Script definiert haben -->
<div id="load" style="display: none;"> <!-- Container mit der Ladesequenz, der standardmäßig mit "display: none;" im Style ausgeblendet ist. Er besitzt die id "load" -->
<div class="spinner"></div>
<h2 style="color: rgb(57, 19, 151)">Please wait you will be redirected...</h2>
</div>
</body>
</html>