Creates a pulse effect loader animation using the animation-delay
property.
- Use
@keyframes
to define an animation at two points in the cycle, start (0%
), where the two<div>
elements have nowidth
orheight
and are positioned at the center and end (100%
), where both<div>
elements have increasedwidth
andheight
, but theirposition
is reset to0
. - Use
opacity
to transition from1
to0
when animating to give the<div>
elements a disappearing effect as they expand. .ripple-loader
, which is the parent container, has a predefinedwidth
andheight
. It usesposition: relative
to position its children.- Use
animation-delay
on the second<div>
element, so that each element starts its animation at a different time.
预览
HTML
<div class="ripple-loader">
<div></div>
<div></div>
</div>
CSS
.ripple-loader {
position: relative;
width: 64px;
height: 64px;
}
.ripple-loader div {
position: absolute;
border: 4px solid #454ADE;
border-radius: 50%;
animation: ripple-loader 1s ease-out infinite;
}
.ripple-loader div:nth-child(2) {
animation-delay: -0.5s;
}
@keyframes ripple-loader {
0% {
top: 32px;
left: 32px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: 0;
left: 0;
width: 64px;
height: 64px;
opacity: 0;
}
}