纯css手写loading效果

最新推荐文章于 2024-05-17 03:22:11 发布
最新推荐文章于 2024-05-17 03:22:11 发布
阅读量982 收藏 10
点赞数 2
分类专栏： Html + Css + JavaScript 文章标签： css 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CSDN_gmm/article/details/121996713
版权 
最近项目上的开发需求比较多，加上没有遇到什么难点，就没有整理相关的问题分享给大家，抽空的时候看到了
项目手写的loading效果觉得很好玩（不是我开发的），就想着自己是不也能动手写几个常见的loadig效果。
该文主要把自己在写的过程中一些思路和想法分享出来，也是对自己掌握的东西做个记录。

第一种：圆的加载

首先我们用svg画一个圆

html:
<svg height="50" width="50" viewBox="0 0 50 50">
    <circle cx="25" cy="25" r="20"/>
</svg>

style：
circle {
  fill: none; // 圆内填充
  stroke: #9bf99b; // 圆周颜色
  stroke-width: 2; // 圆周宽度
}

如何使圆由短变长再消失的效果，这样的话我们是不是需要先实现非整圆的效果

使用了虚线stroke-dasharray和stroke-dashoffset

确定该圆的周长2πr=2x3.14x20 约等于 125.6

style：半圆
circle {
  fill: none; // 圆内填充
  stroke: #9bf99b; // 圆周颜色
  stroke-width: 2; // 圆周宽度
  stroke-dasharray: 63px; // 虚线长63px，间距63px，重复
}

21638363157_.pic.jpg

style：少10px周长的圆
circle {
  fill: none; // 圆内填充
  stroke: #9bf99b; // 圆周颜色
  stroke-width: 2; // 圆周宽度
  stroke-dasharray: 63px 10px; // 虚线长63px，间距10px，重复
}

31638363303_.pic.jpg

style：圆
circle {
  fill: none; // 圆内填充
  stroke: #9bf99b; // 圆周颜色
  stroke-width: 2; // 圆周宽度
  stroke-dasharray: 126px; // 虚线长126px，间距126px，重复
}

41638363395_.pic.jpg

效果1

Dec-06-2021 20-21-48.gif

先画一个圆，让这个圆由短变长然后逐渐消失。

  • stroke-dasharray让圆的周长从1px到100px
  • stroke-dashoffset让圆偏移他的可视长度从0px-15px-200px

效果2

Dec-06-2021 20-12-03.gif

接下来，让这个圆有一个旋转的效果

  • transform有2d或者3d的转换，比如放大缩小，旋转，倾斜

最终实现的代码：

html:
<div class="circle-loading-svg">
  <svg height="50" width="50" viewBox="0 0 50 50">
    <circle id="circle" cx="25" cy="25" r="20"/>
  </svg>
</div>

style：
#circle{
  animation: loading-circle 1.4s ease-in-out infinite;
  /* 圆内填充 */
  fill: none; 
  /* 圆周颜色 */
  stroke: #9bf99b;
  /* 圆周宽度 */
  stroke-width: 2;
}

@keyframes loading-circle {
  0% {
    stroke-dasharray: 1px 200px;
    stroke-dashoffset: 0;
  }
  30% {
    stroke-dasharray: 100px 200px;
    stroke-dashoffset: -15px;
    stroke: green;
  }
  100% {
    stroke-dasharray: 100px 200px;
    stroke-dashoffset: -120px;
  }
}

.circle-loading-svg {
  animation: loading-rotate 1.4s linear infinite;
  display: flex;
  align-items: center;
  justify-content: center;

}

@keyframes loading-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(1turn);
  }
}

第二种：线条加载

确定你加载的线条多少，我这里是用到了8个

WeChat29327163f3924d1102d0f5deea8a7a25.png

html:
<svg height="80" width="80" viewBox="0 0 80 80">
    <line id="lineRx" x1="40" y1="40" x2="75" y2="40"/>
    <line id="lineFx" x1="40" y1="40" x2="65" y2="65"/>
    <line id="lineSx" x1="40" y1="40" x2="40" y2="75"/>
    <line id="lineTx" x1="40" y1="40" x2="15" y2="65"/>
    <line id="lineR" x1="5" y1="40" x2="40" y2="40"/>
    <line id="lineF" x1="15" y1="15" x2="40" y2="40"/>
    <line id="lineS" x1="40" y1="5" x2="40" y2="40"/>
    <line id="lineT" x1="65" y1="15" x2="40" y2="40"/>
    <circle cx="40" cy="40" r="15" fill="#ffffff"/>
</svg>

style：
line {
  stroke: #9bf99b;
  stroke-width: 2;
}

按照我们平时见到的加载样式，有规律的改变每条线条的颜色就可以实现加载的效果。那我们就要写上动画，每条线都需要变色，并且前一个线条变色消失完 后一条接着变色，依次类推。

Dec-06-2021 20-50-32.gif

html:
<svg height="80" width="80" viewBox="0 0 80 80">
    <line id="lineRx" x1="40" y1="40" x2="75" y2="40"/>
    <line id="lineFx" x1="40" y1="40" x2="65" y2="65"/>
    <line id="lineSx" x1="40" y1="40" x2="40" y2="75"/>
    <line id="lineTx" x1="40" y1="40" x2="15" y2="65"/>
    <line id="lineR" x1="5" y1="40" x2="40" y2="40"/>
    <line id="lineF" x1="15" y1="15" x2="40" y2="40"/>
    <line id="lineS" x1="40" y1="5" x2="40" y2="40"/>
    <line id="lineT" x1="65" y1="15" x2="40" y2="40"/>
    <circle cx="40" cy="40" r="15" fill="#ffffff"/>
</svg>

style：
line {
  animation: loading-line 0.8s linear infinite;
  stroke: #9bf99b;
  stroke-width: 2;
}

@keyframes loading-line {
  0% {
    stroke: green;
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#lineRx {
  animation-delay: 0s;
}

#lineFx {
  animation-delay: 0.11s;
}

#lineSx {
  animation-delay: 0.22s;
}

#lineTx {
  animation-delay: 0.33s;
}

#lineR {
  animation-delay: 0.44s;
}

#lineF {
  animation-delay: 0.55s;
}

#lineS {
  animation-delay: 0.66s;
}

#lineT {
  animation-delay: 0.77s;
}

第三种：水滴加载

画几个水滴

image.png

html:
<svg height="20" width="20" viewBox="0 0 20 20">
    <circle class="circle cF" cx="10" cy="10" r="5"/>
</svg>
<svg height="20" width="20" viewBox="0 0 20 20">
    <circle class="circle cS" cx="10" cy="10" r="5"/>
</svg>
<svg height="20" width="20" viewBox="0 0 20 20">
    <circle class="circle cT" cx="10" cy="10" r="5"/>
</svg>
<svg height="20" width="20" viewBox="0 0 20 20">
    <circle class="circle cX" cx="10" cy="10" r="5"/>
</svg>
<svg height="20" width="20" viewBox="0 0 20 20">
    <circle class="circle cY" cx="10" cy="10" r="5"/>
</svg>

style：
.circle {
  fill: #9bf99b;
}

有放大缩小的效果，前一个水滴和后一个水滴有时间延迟

Dec-06-2021 21-03-45.gif

html:
<svg height="20" width="20" viewBox="0 0 20 20">
    <circle class="circle cF" cx="10" cy="10" r="5"/>
</svg>
<svg height="20" width="20" viewBox="0 0 20 20">
    <circle class="circle cS" cx="10" cy="10" r="5"/>
</svg>
<svg height="20" width="20" viewBox="0 0 20 20">
    <circle class="circle cT" cx="10" cy="10" r="5"/>
</svg>
<svg height="20" width="20" viewBox="0 0 20 20">
    <circle class="circle cX" cx="10" cy="10" r="5"/>
</svg>
<svg height="20" width="20" viewBox="0 0 20 20">
    <circle class="circle cY" cx="10" cy="10" r="5"/>
</svg>

style：
.circle {
  animation: loading-big 0.8s linear infinite;
  fill: #9bf99b;
}

.cF {
  animation-delay: 0.11s;
}
.cS {
  animation-delay: 0.22s;
}
.cT {
  animation-delay: 0.33s;
}
.cX {
  animation-delay: 0.44s;
}
.cY {
  animation-delay: 0.55s;
}

@keyframes loading-big {
  0% {
    fill: green;
    r: 10px;
  }
  100% {
    fill: #9bf99b;
    r: 2px;
  }
}

第四种：矩形加载

画几个矩形

image.png

html:
<svg width="120" height="200" viewBox="0 0 70 200">
    <rect class="cF" x="0" y="20" width="10" height="20"/>
    <rect class="cS" x="20" y="20" width="10" height="20"/>
    <rect class="cT" x="40" y="20" width="10" height="20"/>
    <rect class="cX" x="60" y="20" width="10" height="20"/>
    <rect class="cY" x="80" y="20" width="10" height="20"/>
</svg>

style：
rect {
  fill: #9bf99b;
}

我们需要在开始和结尾缩小矩形的高度，中间段放大矩形的高度，不需要变化宽度。

Dec-06-2021 21-14-23.gif

html:
<svg width="120" height="200" viewBox="0 0 70 200">
    <rect class="cF" x="0" y="20" width="10" height="20"/>
    <rect class="cS" x="20" y="20" width="10" height="20"/>
    <rect class="cT" x="40" y="20" width="10" height="20"/>
    <rect class="cX" x="60" y="20" width="10" height="20"/>
    <rect class="cY" x="80" y="20" width="10" height="20"/>
</svg>

style：
rect {
  animation: loading-rect 0.8s linear infinite;
  fill: #9bf99b;
}

.cF {
  animation-delay: 0.11s;
}
.cS {
  animation-delay: 0.22s;
}
.cT {
  animation-delay: 0.33s;
}
.cX {
  animation-delay: 0.44s;
}
.cY {
  animation-delay: 0.55s;
}

@keyframes loading-rect {
  0%,100% {
    fill: #9bf99b;
    height: 10px;
  }
  50%{
    fill: green;
    height: 60px;
  }
}

但是这个不是我们想要的效果，我们希望的是矩形向上和上下放大缩小，如何修改呢？是不是可以想当放大该矩形的时候，让矩形的位置往上移动一下，就是这种感觉

  • y: -15px;

Dec-06-2021 21-19-28.gif

html:
<svg width="120" height="200" viewBox="0 0 70 200">
    <rect class="cF" x="0" y="20" width="10" height="20"/>
    <rect class="cS" x="20" y="20" width="10" height="20"/>
    <rect class="cT" x="40" y="20" width="10" height="20"/>
    <rect class="cX" x="60" y="20" width="10" height="20"/>
    <rect class="cY" x="80" y="20" width="10" height="20"/>
</svg>

style：
rect {
  animation: loading-rect 0.8s linear infinite;
  fill: #9bf99b;
}

.cF {
  animation-delay: 0.11s;
}
.cS {
  animation-delay: 0.22s;
}
.cT {
  animation-delay: 0.33s;
}
.cX {
  animation-delay: 0.44s;
}
.cY {
  animation-delay: 0.55s;
}

@keyframes loading-rect {
  0%,100% {
    fill: #9bf99b;
    height: 10px;
  }
  50%{
    fill: green;
    height: 60px;
    y: -15px;
  }
}
思考
  1. 在实际开发的过程中，肯定会遇到客户想要的各种各样的加载效果，我们能做的就是去拆分这个动画，怎么让静态的动起来。
  2. 什么时候用纯css实现动画？什么时候用js实现的动画？
  3. 欢迎留言一起制作有趣的动画吧
CSDN_gmm
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
纯CSS3实现各种loading效果
qq_39025670的博客
07-26 9357
通过CSS3实现一些炫酷的loading动画效果...
利用css完成圆形loading动画
qq_67519713的博客
06-06 744
今天用css完成一个仿微信小程序圆形loading动画
前端技巧：三种 Loading 制作方案(1)
最新发布
2401_84091742的博客
05-17 734
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
手写极简 css3 loading
掘金安东尼
06-28 214
.loading { width: 3px; height:3px; border-radius: 100%; /* 圆角 */ box-shadow: 0 -10px 0 1px #333, /* 上, 1px 扩展 */ 10px 0px #333, /* 右 */ 0 10px #333, /* 下 *
手写一个Vue Loading通过自定义api控制显示与关闭 记录
pixle的博客
08-23 510
实现目标调用方法（类似element的loading）： this.loading.show()显示this.loading.show() 显示 this.loading.show()显示this.loading.hide()关闭 应用vue知识点：extend函数，use函数 简单分析，this.loading的实现通过use使用插件方式把loading的实现通过use使用插件方式把loading的实现通过use使用插件方式把loading属性绑定到Vue原型 show()和hide()实现通过exten
28种纯CSS3炫酷loading加载动画特效
12-13
这是一组效果非常炫酷的纯CSS3 Loading加载动画特效。这组loading动画共有27种不同的效果。每一种loading动画都是通过CSS3的keyframes帧动画来完成的，每一个加载动画都构思新颖，效果非常的酷。
轻松掌握 CSS，实现 loading 加载中的多种形式
Shids_的博客
02-08 6055
轻松掌握 CSS，实现 loading 加载中的多种形式
纯css loading动画
11-08
纯CSS Loading动画是一种在网页加载过程中展示的交互元素，它使用CSS（层叠样式表）技术来创建动态效果，向用户表明页面正在加载。这种动画通常由简单的几何形状和过渡效果组成，不需要JavaScript或者额外的图像资源...
纯CSS3文字Loading动画特效
06-24
纯CSS3文字Loading动画特效是一种利用CSS3特性实现的创新加载效果，它将普通的加载指示器与文字结合，为用户提供了更加生动且富有个性化的等待体验。这种动画效果无需JavaScript或者其他复杂的编程语言，只需通过CSS...
CSS3实现10种Loading效果
09-24
主要为大家详细介绍了CSS3实现10种Loading效果，效果实现简单新颖，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
各种css3 loading效果
10-25
通过这个名为“cssLoading”的压缩包，开发者可以获取多种预设的CSS3加载效果，为自己的项目增添更多视觉魅力。结合实际需求，适当修改和创新，将这些效果应用到网页中，可以显著提升用户的浏览体验。
纯CSS3实现的8种Loading动画效果
09-25
主要介绍了纯CSS3实现的8种Loading动画效果,效果简洁、超酷、符合当前前端的流行风格,需要的朋友可以参考下
纯css实现 loading（加载）
weixin_55472979的博客
11-25 655
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; }
loading加载效果（纯css）
m0_61004873的博客
09-20 1909
页面loading加载效果
Css3 手写超炫酷商用Loading加载动画
Lln0903的博客
06-11 207
Loading 动画效果一
css纯加载动画,纯CSS实现loading动画加载效果
weixin_42641869的博客
08-03 1696
原标题：纯CSS实现loading动画加载效果loading动画图标的做法有很多。一般不想麻烦的人直接嵌入一张gif的动态图标即可实现！虽然该方法方便快捷，但是对网站的加载速度优化方面还不是最好，制作的GIF图片很难控制它们的大小！今天我就来说说如何用CSS来制作一个loading动画效果，供大家参考，感兴趣的小伙伴可以看看！常见的加载动画有以下2中： 第一种：周围的圆圈围着在转，即等待加载 第二...
CSS3实现8种Loading效果
fanyanjiang的博客
04-01 1414
第1种效果： html <div class="loading"> <span></span> <span></span> <span></span> <span></span> <span>&lt...
css实现loading,CSS3实现10种Loading效果
weixin_42115074的博客
08-03 3342
很适合菜鸟，果断搬过来了。第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;...
8种CSS实现loading加载特效的小技巧（分享）
qq_43067585的博客
05-27 4850
本篇文章给大家分享8种CSS实现loading加载特效的小技巧，希望对大家有所帮助！ 为什么会写这种文章呢？平时开发的时候，我们遇到加载，要么是UI框架中自带，要么就是百度，然后CV到项目中？但是，自己实现的时候，又会没有思路。久而久之，变成了CV工程师。本文针对不同的加载方式，讲解其中的思路，希望大家不只是会用，更要是会写。实践才能出真知。（学习视频分享：css视频教程、web前端） 本文只介绍圈形加载。其他的会在其他文章中介绍。 loader-1 这应该是最简单的CSS加载了。在圆圈上有
css生成loading效果
04-05
以下是一种基于CSS的loading效果的实现方式： HTML代码： ``` <div class="loading"> <div class="loading-inner"></div> </div> ``` CSS代码： ``` .loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; } .loading-inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; border: 5px solid #fff; border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } ``` 这段代码将在页面中生成一个全屏的黑色半透明遮罩层，并在其中心位置添加一个旋转的loading图标。可以通过修改样式来调整loading图标的大小、颜色和旋转速度等属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值