CSS3炫酷预加载Loading指示器动画特效

PetitQ 其他代码 2019-3-09 1.79K 0 0

这是一组效果非常酷的纯 CSS3 炫酷预加载 Loading 指示器动画特效。这组 loading 指示器共 6 种效果，都是使用:before 和:after 伪元素，以及 CSS 帧动画来完成各种不同的预加载指示器动画。

音频波形 Loading 动画

使用 5 个空的元素，每一个代表一条波形柱子。

也想出现在这里？联系我们吧

```
<div id="preloader_1">
```
```
    <span></span>
```
```
    <span></span>
```
```
    <span></span>
```
```
    <span></span>
```
```
    <span></span>
```
```
</div>
```

音频波形 Loading 动画效果通过使每一条音频波形柱子的高度从 5 像素变化到 30 像素来完成。每一个 span 元素都被沿 Y 轴向下移动 15 像素，使动画动中心开始。

```
#preloader_1{
```
```
    position:relative;
```
```
}
```
```
#preloader_1 span{
```
```
    display:block;
```
```
    bottom:0px;
```
```
    width: 9px;
```
```
    height: 5px;
```
```
    background:#9b59b6;
```
```
    position:absolute;
```

    animation: preloader_1 1.5s  infinite ease-in-out;

```
}
```
```
 
```
```
#preloader_1 span:nth-child(2){
```
```
left:11px;
```
```
animation-delay: .2s;
```
```
 
```
```
}
```
```
#preloader_1 span:nth-child(3){
```
```
left:22px;
```
```
animation-delay: .4s;
```
```
}
```
```
#preloader_1 span:nth-child(4){
```
```
left:33px;
```
```
animation-delay: .6s;
```
```
}
```
```
#preloader_1 span:nth-child(5){
```
```
left:44px;
```
```
animation-delay: .8s;
```
```
}
```
```
@keyframes preloader_1 {
```

    0% {height:5px;transform:translateY(0px);background:#9b59b6;}

    25% {height:30px;transform:translateY(15px);background:#3498db;}

    50% {height:5px;transform:translateY(0px);background:#9b59b6;}

    100% {height:5px;transform:translateY(0px);background:#9b59b6;}

```
}
```

通过分别为每一个 span 元素设置 0.2 秒的 animation-delay 动画延迟时间，使它们依次产生高度变化的动画效果。

圆形变矩形 Loading 动画

圆形变矩形 Loading 动画使用 4 个空的元素，每一个代表一个圆形/矩形。

```
<div id="preloader_2">
```
```
    <span></span>
```
```
    <span></span>
```
```
    <span></span>
```
```
    <span></span>
```
```
</div>
```

该 loading 指示器动画通过修改 border-radius 属性来实现。

```
#preloader_2{
```
```
position: relative;
```
```
left: 50%;
```
```
width: 40px;
```
```
height: 40px;
```
```
}
```
```
#preloader_2 span{
```
```
    display:block;
```
```
    bottom:0px;
```
```
    width: 20px;
```
```
    height: 20px;
```
```
    background:#9b59b6;
```
```
    position:absolute;
```
```
}
```
```
#preloader_2 span:nth-child(1){
```

animation: preloader_2_1 1.5s infinite ease-in-out;

```
}
```
```
#preloader_2 span:nth-child(2){
```
```
left:20px;
```

animation: preloader_2_2 1.5s infinite ease-in-out;

```
 
```
```
}
```
```
#preloader_2 span:nth-child(3){
```
```
top:0px;
```

animation: preloader_2_3 1.5s infinite ease-in-out;

```
}
```
```
#preloader_2 span:nth-child(4){
```
```
top:0px;
```
```
left:20px;
```

animation: preloader_2_4 1.5s infinite ease-in-out;

```
}
```
```
 
```
```
@-keyframes preloader_2_1 {
```

  0% {-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}

  50% {-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px;background:#3498db;}

  80% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}

  100% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}

```
}
```
```
@-keyframes preloader_2_2 {
```

  0% {-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}

  50% {-transform: translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#f1c40f;}

  80% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}

  100% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}

```
}
```
```
@-keyframes preloader_2_3 {
```

  0% {-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}

  50% {-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px;background:#2ecc71;}

  80% {-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}

  100% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}

```
}
```
```
 
```
```
 
```
```
@-keyframes preloader_2_4 {
```

  0% {-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}

  50% {-transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px;background:#e74c3c;}

  80% {-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}

  100% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}

```
}
```

交叉图形变换 Loading 动画

该 loading 动画使用 div 元素的:before 和:after 为元素来制作。圆形变方形的动画通用是通过修改 border-radius 属性来实现。

```
<div id="preloader_3"></div>
```

CSS 样式

```
#preloader_3{
```
```
    position:relative;
```
```
}
```
```
#preloader_3:before{
```
```
    width:20px;
```
```
    height:20px;
```
```
    border-radius:20px;
```
```
    background:blue;
```
```
    content:'';
```
```
    position:absolute;
```
```
    background:#9b59b6;
```

    animation: preloader_3_before 1.5s infinite ease-in-out;

```
}
```
```
 
```
```
#preloader_3:after{
```
```
    width:20px;
```
```
    height:20px;
```
```
    border-radius:20px;
```
```
    background:blue;
```
```
    content:'';
```
```
    position:absolute;
```
```
    background:#2ecc71;
```
```
    left:22px;
```

    animation: preloader_3_after 1.5s infinite ease-in-out;

```
}
```
```
 
```
```
@keyframes preloader_3_before {
```

    0% {transform: translateX(0px) rotate(0deg)}

    50% {transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;}

      100% {transform: translateX(0px) rotate(0deg)}

```
}
```
```
@keyframes preloader_3_after {
```
```
    0% {transform: translateX(0px)}
```

    50% {transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;}

```
    100% {transform: translateX(0px)}
```
```
}
```

蛇形 Loading 动画

该 loading 动画使用 div 元素的:before 和:after 为元素来制作。圆形变方形的动画通用是通过修改 border-radius 属性来实现。

```
<div id="preloader_4">
```
```
    <span></span>
```
```
    <span></span>
```
```
    <span></span>
```
```
    <span></span>
```
```
    <span></span>
```
```
</div>
```

该动画通过修改每一个 span 元素的 Y 轴位置，使它们下移 10 个像素，并使它们的颜色从蓝色变为黄色。阴影效果则是修改 box-shadow 的尺寸来完成。

```
#preloader_4{
```
```
    position:relative;
```
```
}
```
```
#preloader_4 span{
```
```
    position:absolute;
```
```
    width:20px;
```
```
    height:20px;
```
```
    background:#3498db;
```
```
    opacity:0.5;
```
```
border-radius:20px;
```

    -animation: preloader_4 1s infinite ease-in-out;

```
 
```
```
}
```
```
#preloader_4 span:nth-child(2){
```
```
    left:20px;
```
```
    animation-delay: .2s;
```
```
}
```
```
#preloader_4 span:nth-child(3){
```
```
    left:40px;
```
```
    animation-delay: .4s;
```
```
}
```
```
#preloader_4 span:nth-child(4){
```
```
    left:60px;
```
```
    animation-delay: .6s;
```
```
}
```
```
#preloader_4 span:nth-child(5){
```
```
    left:80px;
```
```
    animation-delay: .8s;
```
```
}
```
```
@keyframes preloader_4 {
```
```
    0% {
```
```
      opacity: 0.3; 
```
```
      transform:translateY(0px);    
```

      box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}

```
    50% {
```
```
      opacity: 1; 
```
```
      transform: translateY(-10px); 
```
```
      background:#f1c40f;  
```

      box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}

```
    100%  {
```
```
      opacity: 0.3; 
```
```
      transform:translateY(0px); 
```

      box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}

```
}
```

旋转轮盘 Loading 动画

该 loading 动画使用 div 元素来制作中心的圆形，并使用 div 元素的:after 伪元素来制作两条旋转线效果。

```
<div id="preloader_5"></div>
```

两条旋转线使用:after 伪元素来制作，通过给它设置 50 像素的顶部和底部 border-radius 俩创建这两条线。动画效果添加在 div 元素上，修改它的颜色以及通过 transform: rotate()来使它进行旋转。

```
#preloader5{
```
```
    position:relative;
```
```
    width:30px;
```
```
    height:30px;
```
```
    background:#3498db;
```
```
    border-radius:50px;
```

    animation: preloader_5 1.5s infinite linear;

```
}
```
```
#preloader5:after{
```
```
    position:absolute;
```
```
    width:50px;
```
```
    height:50px;
```
```
    border-top:10px solid #9b59b6;
```
```
    border-bottom:10px solid #9b59b6;
```
```
    border-left:10px solid transparent;
```

    border-right:10px solid transparent;

```
    border-radius:50px;
```
```
    content:'';
```
```
    top:-20px;
```
```
    left:-20px;
```

    animation: preloader_5_after 1.5s infinite linear;

```
}
```
```
@keyframes preloader_5 {
```
```
    0% {transform: rotate(0deg);}
```

    50% {transform: rotate(180deg);background:#2ecc71;}

```
    100% {transform: rotate(360deg);}
```
```
}
```
```
@keyframes preloader_5_after {
```

    0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}

    50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}

    100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}

```
}
```

windows 标志 Loading 动画

每一个 span 代表一个方块。

```
<div id="preloader_6">
```
```
    <span></span>
```
```
    <span></span>
```
```
    <span></span>
```
```
    <span></span>
```
```
</div>
```

所有的方块以网格进行布局。动画添加在主 div 元素上，使它产生旋转。另外 i 一个动画是使各个 span 元素不断的从 100%缩放到 50%。并通过 animation-delay 来控制各个 span 的动画延迟时间。

```
#preloader_6{
```
```
    position:relative;
```
```
    width: 42px;
```
```
    height: 42px;
```

    animation: preloader_6 5s infinite linear;

```
}
```
```
#preloader_6 span{
```
```
    width:20px;
```
```
    height:20px;
```
```
    position:absolute;
```
```
    background:red;
```
```
    display:block;
```

    animation: preloader_6_span 1s infinite linear;

```
}
```
```
#preloader_6 span:nth-child(1){
```
```
  background:#2ecc71;
```
```
}
```
```
#preloader_6 span:nth-child(2){
```
```
  left:22px;
```
```
  background:#9b59b6;
```
```
  animation-delay: .2s;
```
```
}
```
```
#preloader_6 span:nth-child(3){
```
```
  top:22px;
```
```
  background:#3498db;
```
```
  animation-delay: .4s;
```
```
}
```
```
#preloader_6 span:nth-child(4){
```
```
  top:22px;
```
```
  left:22px;
```
```
  background:#f1c40f;
```
```
  animation-delay: .6s;
```
```
}
```
```
@keyframes preloader_6 {
```
```
    from {-ms-transform: rotate(0deg);}
```
```
    to {-ms-transform: rotate(360deg);}
```
```
}
```
```
@keyframes preloader_6_span {
```
```
   0% { transform:scale(1); }
```
```
   50% { transform:scale(0.5); }
```
```
   100% { transform:scale(1); }
```
```
}
```

CSS3 炫酷预加载 Loading 指示器动画特效

已有 447 人购买

永久更新：
演示数据：
提取码：c77l

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

其他代码

CSS3炫酷预加载Loading指示器动画特效

音频波形 Loading 动画

圆形变矩形 Loading 动画

交叉图形变换 Loading 动画

蛇形 Loading 动画

旋转轮盘 Loading 动画

windows 标志 Loading 动画

CSS3 炫酷预加载 Loading 指示器动画特效

相关文章

PenCutout 钢笔抠图插件

超炫酷UI效果的jQuery滑块插件

micron - 生成炫酷CSS3动画插件

发表回复取消回复

热销模板

其他代码

音频波形 Loading 动画

圆形变矩形 Loading 动画

交叉图形变换 Loading 动画

蛇形 Loading 动画

旋转轮盘 Loading 动画

windows 标志 Loading 动画

CSS3 炫酷预加载 Loading 指示器动画特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复