1
Ich benutze CSS Loaders aber innerhalb einer div ausgerichteten Mitte mit transform: translate(-50%, -50%).CSS-Lader | Transform & Box-Schattenanimation Bug
Beachten Sie, dass die Animation Box-Shadow verwendet.
Problem: Die Animationskreise werden von unten abgeschnitten, wenn sie sich ausdehnen.
ich versucht: Wenn ich die Größe der Kreise erhöhen durch font-size Erhöhung der Cutoff d.h reduziert, wenn ich die Schriftgröße auf 15 Pixel zu ändern fast verschwindet der cuttoff.
Wenn ich den gleichen Code von JS Fiddle in Stackoverflow Code versucht Schnipsel der Fehler nicht aufgetreten war, wie Sie unten sehen können!
.center {
position: absolute;
top: 50%;
left: 50%;
display: block;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.loader:before,
.loader:after,
.loader {
border-radius: 50%;
width: 2.5em;
height: 2.5em;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: load7 1.8s infinite ease-in-out;
animation: load7 1.8s infinite ease-in-out;
}
.loader {
color: #f00;
font-size: 2px;
margin: 20px auto;
position: relative;
text-indent: -9999em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before {
left: -3.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 3.5em;
}
.loader:before,
.loader:after {
content: '';
position: absolute;
top: 0;
}
@-webkit-keyframes load7 {
0%, 80%, 100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
@keyframes load7 {
0%, 80%, 100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}<div class="center">
<div class="loader">Loading...</div>
</div>