Ladekreis html?
Hallo!
Ich möchte auf meiner Website einen Ladekreis einfügen, der sich dreht.
Ich habe bis jetzt ein paar Varianten mit Java und CSS gefunden, weiß aber nicht wo ich den CSS-Code hinschreiben muss.
2 Antworten
So erstellen Sie dieses Programm (Circle Loader mit Häkchen-Animation). Zuerst müssen Sie zwei Dateien erstellen, eine HTML-Datei und eine CSS-Datei. Nachdem Sie diese Dateien erstellt haben, fügen Sie einfach die folgenden Codes in Ihre Datei ein.
Erstellen Sie zunächst eine HTML-Datei mit dem Namen index.html und fügen Sie die angegebenen Codes in Ihre HTML-Datei ein. Denken Sie daran, dass Sie eine Datei mit der Erweiterung .html erstellen müssen.
<!DOCTYPE html>
<!-- Created By Narufumi -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Loader with Checkmark Animation | CodingNepal</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="checkbox" id="check">
<label for="check">
<div class="check-icon"></div>
</label>
</body>
</html>
Erstellen Sie zweitens eine CSS-Datei mit dem Namen style.css und fügen Sie die angegebenen Codes in Ihre CSS-Datei ein. Denken Sie daran, dass Sie eine Datei mit der Erweiterung .css erstellen müssen.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
place-items: center;
background: #000;
}
label{
position: relative;
height: 125px;
width: 125px;
display: inline-block;
border: 2px solid rgba(255,255,255,0.2);
border-radius: 50%;
border-left-color: #5cb85c;
animation: rotate 1.2s linear infinite;
}
@keyframes rotate {
50%{
border-left-color: #9b59b6;
}
75%{
border-left-color: #e67e22;
}
100%{
transform: rotate(360deg);
}
}
label .check-icon{
display: none;
}
label .check-icon:after{
position: absolute;
content: "";
top: 50%;
left: 28px;
transform: scaleX(-1) rotate(135deg);
height: 56px;
width: 28px;
border-top: 4px solid #5cb85c;
border-right: 4px solid #5cb85c;
transform-origin: left top;
animation: check-icon 0.8s ease;
}
@keyframes check-icon {
0%{
height: 0;
width: 0;
opacity: 1;
}
20%{
height: 0;
width: 28px;
opacity: 1;
}
40%{
height: 56px;
width: 28px;
opacity: 1;
}
100%{
height: 56px;
width: 28px;
opacity: 1;
}
}
input{
display: none;
}
input:checked ~ label .check-icon{
display: block;
}
input:checked ~ label{
animation: none;
border-color: #5cb85c;
transition: border 0.5s ease-out;
}
Das ist alles, jetzt haben Sie erfolgreich einen Circle Loader mit Häkchen-Animation nur mit HTML und CSS erstellt. Wenn Ihr Code nicht funktioniert Schreiben sie mir.
Ich hoffe ich konnte Helfen ~ Narufumi
Ich benutze einen Webeditor. Ich wollte bei der Stelle href="style.css" einfach den Link zu der Datei eingeben, die ich auf Google Drive hochgeladen habe, aber das funktioniert nicht. Wenn ich es als Datei auf meinem Computer öffne funktioniert es aber einwandfrei.
Ja! Einfach die Prozentzahl ändern.
@keyframes check-icon {
0%{
height: 0;
width: 0;
opacity: 1;
}
20%{
height: 0;
width: 28px;
opacity: 1;
}
40%{
height: 56px;
width: 28px;
opacity: 1;
}
100%{
height: 56px;
width: 28px;
opacity: 1;
}
Ich benutze einen Webeditor. Ich wollte bei der Stelle href="style.css" einfach den Link zu der Datei eingeben, die ich auf Google Drive hochgeladen habe, aber das funktioniert nicht. Wenn ich es als Datei auf meinem Computer öffne funktioniert es aber einwandfrei.
Erstelle ein Child Theme deines Themes und Füge dort den Code in "style" ein dann müsste es Funktionieren. Wenn nicht melde dich nocheinmal mfg.
Ich kann kein Child Theme erstellen. Ich habe keinen Zugriff auf den Server.
Der CSS Code kommt mitunter in deine .css Datei, falls du eine für deine Website nutzt. Falls nicht, pack ihn einfach zu deinen restlichen Styles in deinem <style>-Tag.
Wenn du weder-noch hast:
Erstelle eine Datei mit dem Namen "style.css". In diese Datei füge den Code einfach ein.
Dann im <head>-Tag deiner Website folgendes einfügen:
<link rel="stylesheet" href="style.css">
Dann wird die Datei als sogenannte Stylesheet geladen und angewendet. In der Zukunft kannst du dann dort alles andere an Styles mit reinschreiben.
Gibt es auch die Möglichkeit den Kreis etwas dicker zu machen?