Newsblog Artikel

14.12.2016

Neues Loading-Symbol

Name:
Neues Loading-Symbol
Datum:
14.12.2016
Länge:
2342
Zuletzt überarbeitet:
01.06.2017
Kommentieren (0)
Zurück

Das Loading-Symbol auf dieser Seite ist nun komplett mit CSS geschrieben.
Startseite mit statischem Loading-Symbol anzeigen: Hier klicken

Hier der Code:

Der Code kann vollkommen frei verwendet werden. Die Urheberrechte sind hiermit für das folgende Skript aufgehoben:

HTML:

<div id="loading" class="loadingUpper"><div id="loading" class="loading"></div><div id="loading" class="loading2"></div></div>

JAVA-SCRIPT:

function loading () { document.getElementById("loading").style.display = "none"; }

CSS:

.loadingUpper { position: fixed; top: 180px; left: 37%; width: 80px; height: 80px; z-index: 2000; border-radius: 100%; display: block; } .loading { width: 80px; height: 80px; background-color: rgba(68, 106, 177, 0.36); border-radius: 100%; border-top: solid 12px #789adb; border-bottom: solid 12px rgba(255, 255, 255, 0); border-left: solid 12px rgba(255, 255, 255, 0); border-right: solid 12px rgba(255, 255, 255, 0); animation-name: loading; animation-duration: 1.5s; animation-iteration-count: infinite; animation-timing-function: linear; display: block; } @keyframes loading { from {transform: rotateZ(0deg);} to {transform: rotateZ(360deg);} } .loading2 { width: 60px; height: 60px; position: relative; bottom: 70px; left: 10px; background-color: rgba(139, 180, 255, 0.58); border-radius: 100%; border-top: solid 12px #acbddd; border-bottom: solid 12px rgba(255, 255, 255, 0); border-left: solid 12px rgba(255, 255, 255, 0); border-right: solid 12px rgba(255, 255, 255, 0); animation-name: loading2; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: linear; display: block; } @keyframes loading2 { from {transform: rotateZ(360deg);} to {transform: rotateZ(0deg);} } @media (min-width: 768px) { .loadingUpper { position: fixed; top: 200px; left: 45%; } } @media (min-width: 992px) { .loadingUpper { position: fixed; top: 300px; left: 47%; } }



Bei Fragen oder Problemen bei der Anwendung mich einfach kontaktieren.




Alle Artikel mit diesem Thema anzeigen

Artikel kommentieren:

Kommentare