Im heutigen Tutorial zeige ich euch wie man mit CSS ein cooles Pre-Load Ladesymbol macht das sogar noch animiert ist.
Video / Anleitung
HTML / CSS
Hier der HTML Teil
1 | <div class="rainbow"></div> |
Hier der CSS Teil
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
Background:#000;
}
::before, ::after {
box-sizing: border-box;
}
@keyframes rotate {
100% {
transform: rotate(1turn);
}
}
.rainbow {
position: relative;
z-index: 0;
width: 400px;
height: 400px;
border-radius: 50%;
overflow: hidden;
padding: 2rem;
}
.rainbow::before {
content: '';
position: absolute;
z-index: -2;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
background-color: #399953;
background-repeat: no-repeat;
background-size: 50% 50%, 50% 50%;
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
animation: rotate 4s linear infinite;
}
.rainbow::after {
content: '';
position: absolute;
z-index: -1;
left: 12;
top: 12;
width: calc(100% - 100px);
height: calc(100% - 100px);
} |
0 Kommentare