- Container mit der Größe 200x200 und je 50% abgerundeten Ecken -> rund */
.circle-container {
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
}
/*
- Container der das Bild in den Circle einfügt */
.circle-image {
width: 100%;
height: 100%;
object-fit: cover;
display: flex;
justify-content: center;
align-items: center;
}
/*
![]()
- Klasse für das als Kreis darzustellende Bild */
.circle-image img {
max-width: 100%;
max-height: 100%;
}
/* ENDE - Userfotos rund darstellen */
/* Loader */
/* Verwendung:
--> direkt nach -Tag */
/* Center the loader */
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 120px;
height: 120px;
margin: -76px 0 0 -76px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #008143;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
@-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
@keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
#seiteninhalt {
display: none;
}
/* ENDE - Loader */
