added Animation to Connection-overlay
This commit is contained in:
parent
eac5dd243b
commit
d524b919fd
@ -24,7 +24,7 @@
|
|||||||
<div id="overlay">
|
<div id="overlay">
|
||||||
<div class="overlay-content">
|
<div class="overlay-content">
|
||||||
<p>Verbinde...</p>
|
<p>Verbinde...</p>
|
||||||
<!-- Hier können Sie eine einfache Animation hinzufügen -->
|
<span class="loader"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Connection-Overlay -->
|
<!-- Connection-Overlay -->
|
||||||
|
@ -41,4 +41,38 @@ hr {
|
|||||||
|
|
||||||
.overlay-content {
|
.overlay-content {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
font-size: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader {
|
||||||
|
width: 96px;
|
||||||
|
height: 96px;
|
||||||
|
border: 12px solid #FFF;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
animation: rotation 1s linear infinite;
|
||||||
|
}
|
||||||
|
.loader::after {
|
||||||
|
content: '';
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 12px solid transparent;
|
||||||
|
border-bottom-color: #FF3D00;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotation {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user