CSS加载Loading动画代码 | 专业CSS加载动画生成工具

动画效果示例

选择你喜欢的加载动画效果，点击预览查看详情

圆形加载动画

经典的圆形旋转加载效果，适用于各种应用场景

简单

条形加载动画

垂直条形加载效果，节奏明快，视觉冲击力强

中等

圆点加载动画

简约的圆点加载效果，占用空间小，适合移动端

简单

环形加载动画

流畅的环形进度加载，直观显示加载状态

中等

旋转加载动画

3D旋转效果，立体感强，视觉效果突出

复杂

波浪加载动画

流畅的波浪动画效果，适合媒体加载场景

中等

CSS加载动画代码生成器

自定义动画效果，生成可直接使用的CSS代码

动画设置

动画类型

动画颜色

动画大小

48px

动画速度

1.5s

背景选项

无背景半透明背景纯色背景

生成的代码

loader.css

.loader-circle {

  display: flex;

  justify-content: center;

  align-items: center;

}



.loader-circle .circle {

  width: 12px;

  height: 12px;

  margin: 0 4px;

  border-radius: 50%;

  background-color: #165DFF;

  animation: circle-loading 1.4s infinite ease-in-out both;

}



.loader-circle .circle:nth-child(1) {

  animation-delay: -0.32s;

}



.loader-circle .circle:nth-child(2) {

  animation-delay: -0.16s;

}



@keyframes circle-loading {

  0%, 80%, 100% {

    transform: scale(0);

  }

  40% {

    transform: scale(1);

  }

}