CSS Loading 加载效果

已于 2022-10-17 10:58:10 修改
阅读量384 收藏 3
点赞数
分类专栏： 前端类 文章标签： css
于 2022-10-17 10:36:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AdminGuan/article/details/127358611
版权

平滑加载

/* 平滑加载 */
.progress-1 {
  width: 120px;
  height: 20px;
  background: linear-gradient(#000 0 0) 0/0% no-repeat #ddd;
  animation: p1 2s infinite linear;
}
@keyframes p1 {
  100% {
    background-size: 100%
  }
}
<div class="progress-1"></div>

按步加载

/* 按步加载 */
.progress-2 {
  width: 120px;
  height: 20px;
  border-radius: 20px;
  background: linear-gradient(orange 0 0) 0/0% no-repeat lightblue;
  animation: p2 2s infinite steps(10);
}
@keyframes p2 {
  100% {
    background-size: 110%
  }
}
<div class="progress-2"></div>

条纹加载

/* 条纹加载 */
.progress-3 {
  width: 120px;
  height: 20px;
  border-radius: 20px;
  background: repeating-linear-gradient(135deg, #f03355 0 10px, #ffa516 0 20px) 0/0% no-repeat,
    repeating-linear-gradient(135deg, #ddd 0 10px, #eee 0 20px) 0/100%;
  animation: p3 2s infinite;
}
@keyframes p3 {
  100% {
    background-size: 100%
  }
}
<div class="progress-3"></div>

虚线加载

/* 虚线加载 */
.progress-4 {
  width: 120px;
  height: 20px;
  -webkit-mask: linear-gradient(90deg, #000 70%, #0000 0) 0/20%;
  background: linear-gradient(#000 0 0) 0/0% no-repeat #ddd;
  animation: p4 2s infinite steps(6);
}
@keyframes p4 {
  100% {
    background-size: 120%
  }
}
<div class="progress-4"></div>

电池加载

/* 电池加载 */
.progress-5 {
  width: 80px;
  height: 40px;
  border: 2px solid #000;
  padding: 3px;
  background: repeating-linear-gradient(90deg, #000 0 10px, #0000 0 16px) 0/0% no-repeat content-box content-box;
  position: relative;
  animation: p5 2s infinite steps(6);
}
.progress-5::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border: 2px solid #000;
}
@keyframes p5 {
  100% {
    background-size: 120%
  }
}
<div class="progress-5"></div>

内嵌加载

/* 内嵌加载 */
.progress-6 {
  width: 120px;
  height: 22px;
  border-radius: 20px;
  color: #514b82;
  border: 2px solid;
  position: relative;
}
.progress-6::before {
  content: "";
  position: absolute;
  margin: 2px;
  inset: 0 100% 0 0;
  border-radius: inherit;
  background: #514b82;
  animation: p6 2s infinite;
}
@keyframes p6 {
  100% {
    inset: 0
  }
}
<div class="progress-6"></div>

珠链加载

/* 珠链加载 */
.progress-7 {
  width: 120px;
  height: 24px;
  -webkit-mask: radial-gradient(circle closest-side, #000 94%, #0000) 0 0/25% 100%,
    linear-gradient(#000 0 0) center/calc(100% - 12px) calc(100% - 12px) no-repeat;
  background: linear-gradient(#25b09b 0 0) 0/0% no-repeat #ddd;
  animation: p7 2s infinite linear;
}
@keyframes p7 {
  100% {
    background-size: 100%
  }
}
<div class="progress-7"></div>

斑马线加载

/* 斑马线加载 */
.progress-8 {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  -webkit-mask: linear-gradient(0deg, #000 55%, #0000 0) bottom/100% 18.18%;
  background: linear-gradient(#f03355 0 0) bottom/100% 0% no-repeat #ddd;
  animation: p8 2s infinite steps(7);
}
@keyframes p8 {
  100% {
    background-size: 100% 115%
  }
}
<div class="progress-8"></div>

水柱加载

/* 水柱加载 */
.progress-9 {
  --r1: 154%;
  --r2: 68.5%;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background:
    radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, #269af2 80%) center left,
    radial-gradient(var(--r1) var(--r2) at bottom, #269af2 79.5%, #0000 80%) center center,
    radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, #269af2 80%) center right,
    #ccc;
  background-size: 50.5% 220%;
  background-position: -100% 0%, 0% 0%, 100% 0%;
  background-repeat: no-repeat;
  animation: p9 2s infinite linear;
}
@keyframes p9 {
  33% {
    background-position: 0% 33%, 100% 33%, 200% 33%
  }
  66% {
    background-position: -100% 66%, 0% 66%, 100% 66%
  }
  100% {
    background-position: 0% 100%, 100% 100%, 200% 100%
  }
}
<div class="progress-9"></div>

信号加载

/* 信号加载 */
.progress-10 {
  width: 120px;
  height: 60px;
  border-radius: 200px 200px 0 0;
  -webkit-mask: repeating-radial-gradient(farthest-side at bottom, #0000 0, #000 1px 12%, #0000 calc(12% + 1px) 20%);
  background: radial-gradient(farthest-side at bottom, #514b82 0 95%, #0000 0) bottom/0% 0% no-repeat #ddd;
  animation: p10 2s infinite steps(6);
}
@keyframes p10 {
  100% {
    background-size: 120% 120%
  }
}
<div class="progress-10"></div>

HTML完整代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS Loading 加载效果</title>
  </head>
  <style type="text/css">
    * {
      box-sizing: border-box;
    }

    div {
      margin-top: 20px;
    }

    /* 垂直水平居中 */
    .flex-center {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* 平滑加载 */
    .progress-1 {
      width: 120px;
      height: 20px;
      background: linear-gradient(#000 0 0) 0/0% no-repeat #ddd;
      animation: p1 2s infinite linear;
    }
    @keyframes p1 {
      100% {
        background-size: 100%
      }
    }

    /* 按步加载 */
    .progress-2 {
      width: 120px;
      height: 20px;
      border-radius: 20px;
      background: linear-gradient(orange 0 0) 0/0% no-repeat lightblue;
      animation: p2 2s infinite steps(10);
    }
    @keyframes p2 {
      100% {
        background-size: 110%
      }
    }

    /* 条纹加载 */
    .progress-3 {
      width: 120px;
      height: 20px;
      border-radius: 20px;
      background: repeating-linear-gradient(135deg, #f03355 0 10px, #ffa516 0 20px) 0/0% no-repeat,
        repeating-linear-gradient(135deg, #ddd 0 10px, #eee 0 20px) 0/100%;
      animation: p3 2s infinite;
    }
    @keyframes p3 {
      100% {
        background-size: 100%
      }
    }

    /* 虚线加载 */
    .progress-4 {
      width: 120px;
      height: 20px;
      -webkit-mask: linear-gradient(90deg, #000 70%, #0000 0) 0/20%;
      background: linear-gradient(#000 0 0) 0/0% no-repeat #ddd;
      animation: p4 2s infinite steps(6);
    }
    @keyframes p4 {
      100% {
        background-size: 120%
      }
    }

    /* 电池加载 */
    .progress-5 {
      width: 80px;
      height: 40px;
      border: 2px solid #000;
      padding: 3px;
      background: repeating-linear-gradient(90deg, #000 0 10px, #0000 0 16px) 0/0% no-repeat content-box content-box;
      position: relative;
      animation: p5 2s infinite steps(6);
    }
    .progress-5::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 100%;
      transform: translateY(-50%);
      width: 10px;
      height: 10px;
      border: 2px solid #000;
    }
    @keyframes p5 {
      100% {
        background-size: 120%
      }
    }

    /* 内嵌加载 */
    .progress-6 {
      width: 120px;
      height: 22px;
      border-radius: 20px;
      color: #514b82;
      border: 2px solid;
      position: relative;
    }
    .progress-6::before {
      content: "";
      position: absolute;
      margin: 2px;
      inset: 0 100% 0 0;
      border-radius: inherit;
      background: #514b82;
      animation: p6 2s infinite;
    }
    @keyframes p6 {
      100% {
        inset: 0
      }
    }

    /* 珠链加载 */
    .progress-7 {
      width: 120px;
      height: 24px;
      -webkit-mask: radial-gradient(circle closest-side, #000 94%, #0000) 0 0/25% 100%,
        linear-gradient(#000 0 0) center/calc(100% - 12px) calc(100% - 12px) no-repeat;
      background: linear-gradient(#25b09b 0 0) 0/0% no-repeat #ddd;
      animation: p7 2s infinite linear;
    }
    @keyframes p7 {
      100% {
        background-size: 100%
      }
    }

    /* 斑马线加载 */
    .progress-8 {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      -webkit-mask: linear-gradient(0deg, #000 55%, #0000 0) bottom/100% 18.18%;
      background: linear-gradient(#f03355 0 0) bottom/100% 0% no-repeat #ddd;
      animation: p8 2s infinite steps(7);
    }
    @keyframes p8 {
      100% {
        background-size: 100% 115%
      }
    }

    /* 水柱加载 */
    .progress-9 {
      --r1: 154%;
      --r2: 68.5%;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background:
        radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, #269af2 80%) center left,
        radial-gradient(var(--r1) var(--r2) at bottom, #269af2 79.5%, #0000 80%) center center,
        radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, #269af2 80%) center right,
        #ccc;
      background-size: 50.5% 220%;
      background-position: -100% 0%, 0% 0%, 100% 0%;
      background-repeat: no-repeat;
      animation: p9 2s infinite linear;
    }
    @keyframes p9 {
      33% {
        background-position: 0% 33%, 100% 33%, 200% 33%
      }
      66% {
        background-position: -100% 66%, 0% 66%, 100% 66%
      }
      100% {
        background-position: 0% 100%, 100% 100%, 200% 100%
      }
    }

    /* 信号加载 */
    .progress-10 {
      width: 120px;
      height: 60px;
      border-radius: 200px 200px 0 0;
      -webkit-mask: repeating-radial-gradient(farthest-side at bottom, #0000 0, #000 1px 12%, #0000 calc(12% + 1px) 20%);
      background: radial-gradient(farthest-side at bottom, #514b82 0 95%, #0000 0) bottom/0% 0% no-repeat #ddd;
      animation: p10 2s infinite steps(6);
    }
    @keyframes p10 {
      100% {
        background-size: 120% 120%
      }
    }
  </style>
  <body>
    <div class="flex-center" style="flex-direction: column">
      <div class="flex-center">
        <div>平滑加载：</div>
        <div class="progress-1"></div>
      </div>
      <div class="flex-center">
        <div>按步加载：</div>
        <div class="progress-2"></div>
      </div>
      <div class="flex-center">
        <div>条纹加载：</div>
        <div class="progress-3"></div>
      </div>
      <div class="flex-center">
        <div>虚线加载：</div>
        <div class="progress-4"></div>
      </div>
      <div class="flex-center">
        <div>电池加载：</div>
        <div class="progress-5"></div>
      </div>
      <div class="flex-center">
        <div>内嵌加载：</div>
        <div class="progress-6"></div>
      </div>
      <div class="flex-center">
        <div>珠链加载：</div>
        <div class="progress-7"></div>
      </div>
      <div class="flex-center">
        <div>斑马线加载：</div>
        <div class="progress-8"></div>
      </div>
      <div class="flex-center">
        <div>水柱加载：</div>
        <div class="progress-9"></div>
      </div>
      <div class="flex-center">
        <div>信号加载：</div>
        <div class="progress-10"></div>
      </div>
    </div>
  </body>
</html>

UserGuan
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3实现加载loading特效小动画效果
06-12
CSS3的引入为开发者提供了更多创建动态和交互式元素的工具，其中之一就是制作加载（loading）动画效果。本文将深入探讨如何利用CSS3来实现吸引人的加载特效小动画效果。 首先，CSS3中的关键帧动画（@keyframes）是...
别用图片了，CSS 遮罩合成实现带圆角的环形 loading 动画
Jack, what else can you do besides holding your little darling?
04-10 900
上面的实现虽然很好的满足了需求，但是，还是有些CSS设计问题。比如，我如果需要改变 loading 的颜色，需要改变两个地方。很明显，这样的实现不太符合 DRY（Don't Repeat Yourself）原则。有一个比较简单思路可以用 CSS 变量来传递。loading{这样每次都只需要改变一个变量就行了。除了这种方式以外，其实还有一点需要考虑，为啥背景不能干净一点、纯粹一点呢？换个说法，现在的背景实现对于不了解的同学来讲，可能会很费劲，能否将这些细节隐藏起来，更直观地去自定义颜色呢？
加载中特效
mfxcyh的博客
09-06 298
加载中特效
CSS3实现8种Loading效果
最新发布
coldriversnow的专栏
06-25 224
【代码】CSS3实现8种Loading效果。
8种CSS实现loading加载特效的小技巧（分享）
qq_43067585的博客
05-27 4878
本篇文章给大家分享8种CSS实现loading加载特效的小技巧，希望对大家有所帮助！ 为什么会写这种文章呢？平时开发的时候，我们遇到加载，要么是UI框架中自带，要么就是百度，然后CV到项目中？但是，自己实现的时候，又会没有思路。久而久之，变成了CV工程师。本文针对不同的加载方式，讲解其中的思路，希望大家不只是会用，更要是会写。实践才能出真知。（学习视频分享：css视频教程、web前端） 本文只介绍圈形加载。其他的会在其他文章中介绍。 loader-1 这应该是最简单的CSS加载了。在圆圈上有
loading加载效果（纯css）
m0_61004873的博客
09-20 1921
页面loading加载效果
【CSS加载动画特效】28种纯CSS实现的加载loading动态特效（附源码）
热门推荐
赏樱看雪撸代码
07-11 1万+
CSS3实现多种load加载效果，纯CSS3实现多种加载中效果，纯CSS3实现28种加载动态效果，页面实现loading效果，好看的loading动态特效，animation与transform的灵活应用。
使用css3实现超炫的loading加载动画效果
09-25
总结起来，使用CSS3实现超炫的loading加载动画效果，开发者可以通过创建自定义的关键帧动画和利用变换属性来实现各种动态效果。这不仅可以提升网站或应用的视觉吸引力，还能为用户提供反馈，让他们知道内容正在加载...
纯css3音阶波浪loading加载动画特效
09-04
【纯CSS3音阶波浪加载动画特效】是一种利用现代浏览器对CSS3特性的支持，创建出具有音乐旋律感和动态视觉效果的加载指示器。这个加载动画通过纯CSS3技术，无需JavaScript或其他编程语言，就能实现优雅且引人入胜的...
css3 loading等待加载代码
06-24
本资源“css3 loading等待加载代码”正是这样一款利用CSS3技术实现的优秀加载动画特效。 首先，CSS3中的关键帧动画（@keyframes）是创建加载动画的核心。通过定义动画的不同阶段，我们可以控制元素在加载过程中的...
加载效果Loading
12-20
在前端开发中，加载效果（Loading）是一种至关重要的用户体验设计元素。它通常出现在网页或应用程序内容正在加载时，为用户提供视觉反馈，表明系统正在进行后台处理，让用户知道他们需要等待一段时间才能看到完整的...
纯css实现 loading（加载）
weixin_55472979的博客
11-25 657
html： <div class="container"> <span class="dots-loader hourglass">Loading…</span> </div> css： .container { width:100%; height:100%; display:block; position:fixed; top:0px; left:0px; z-index:9; background:#ffffff; }
手把手实现 CSS 加载动画（一）
p1967914901的博客
08-07 4456
接下来便是旋转这三个圆，最方便的做法便是将容器进行旋转，但有一个地方需要注意，我们是要等三个圆移动到最远的位置后开始旋转。既然是加载动画，我们不可能让他在角落展示吧，我们当然需要将它水平垂直居中，水平垂直居中的方式有很多，这里就不再赘述了。现在你已经看到了三个黑乎乎的圆已经重合在容器中间（为了方便观察，我们给容器加了一个背景颜色）。好了，到现在我们已经完成了初始状态，接下来我们要为它们分别定义动画。接下来我们来绘制三个圆，首先一开始三个圆是在容器中间。，这就是动画开始时一个圆分裂成三个圆的停顿时刻；...
CSS3实现loading（加载）动画效果
Mr_qiao
10-12 3827
CSS3实现loading（加载）动画效果 .spinner { margin: 100px auto; width: 50px; height: 60px; text-align: center; font-size: 10px; } .spinner > div { background-color: #f00; height: 100%; width
【技巧】css loading 加载中动画特效39种
zuncle的博客
03-17 7006
演示效果如下图： HTML代码如下：<h1> CSS LOADERS </h1> <div class="box"> loader-01 <div class="loader-01"> </div> </div> <div class="box"> loader-02 <div class="loader-02"> </div> </div> <div class=
CSS Loaders - 纯 CSS 实现的各种动画加载效果，代码简洁，全都只需要用一个元素
那些免费的砖
11-09 3027
这个网站收集了很多 CSS 加载动画，代码很简单，效果很好，可以收藏以后查阅用。
纯 CSS 实现十个还不错的 Loading 效果
那片枫叶~
04-14 616
为保证运行正常，咱先规定下： * { box-sizing: border-box; } 1. 平滑加载 <div class="progress-1"></div> .progress-1 { width:120px; height:20px; background: linear-gradient(#000 0 0) 0/0% no-repeat #ddd; animation:p1 2s infinite linear; } @keyfram
css实现loading,CSS3实现10种Loading效果
weixin_42115074的博客
08-03 3349
很适合菜鸟，果断搬过来了。第1种效果：代码如下：htmlcss.loading{width: 80px;height: 40px;margin: 0 auto;margin-top:100px;}.loading span{display: inline-block;width: 8px;height: 100%;border-radius: 4px;background: lightgreen;...
纯 CSS 实现几个 Loading 效果
老电影故事的博客
04-26 909
radial-gradient 画出水平面的波动，就三个圆。var(–r1) 直接调用定义好的属性值。看了这么多骚操作，你学废了吗？反正我是没学明白 😥😥😥😥。
css loading加载动画
08-26
CSS loading加载动画可以使用单个元素来完成。这意味着你只需要一个div元素，而不需要复制大量代码。你可以向这个div元素中添加一个类，以启动loading效果。 在选择加载提示动画时，你可以考虑使用一些经典的款式，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值