纯css手写loading效果

最新推荐文章于 2024-08-19 18:43:19 发布
最新推荐文章于 2024-08-19 18:43:19 发布
阅读量1k 收藏 10
点赞数 3
分类专栏： 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. 欢迎留言一起制作有趣的动画吧
手写的loading动画效果
m0_57454052的博客
04-27 333
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/styles.css" /> </head> <style type="text/css"> #loader { margin: 100p
手写原生代码专题 | 三角板 Loading 效果和骨架屏图片卡片预加载效果（三）
前端达人
08-11 443
大家好，本篇文章小编将和大家一起完成两个案例效果：三角板 Loading 效果和骨架屏图片卡片预加载效果，一起动手实践吧！一、三角板 Loading 效果如下动图所示，两个三角板相差90度...
CSS手写loading
Geek-Haoyu
11-27 1371
几行CSS搞定loading！
12个纯css loading效果，值得收藏
最新发布
weixin_43952318的博客
08-19 1216
12个纯css实现的loading动画效果，超级值得收藏，总有一款适合你，总有一款能满足需求，点击查看详情
纯 CSS 实现十个还不错的 Loading 效果
那片枫叶~
04-14 673
为保证运行正常，咱先规定下： * { 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
手写极简 css3 loading
掘金安东尼
06-28 281
.loading { width: 3px; height:3px; border-radius: 100%; /* 圆角 */ box-shadow: 0 -10px 0 1px #333, /* 上, 1px 扩展 */ 10px 0px #333, /* 右 */ 0 10px #333, /* 下 *
纯CSS实现的Loading效果
webdev
02-18 278
纯CSS实现的Loading效果，CSS3试验场重点实验CSS3的动画属性。大家可以到我的codepen看看效果。效果下载链接文章下面。 先来看看实现过程，先看html文件，div.container为效果容器，里面有二十个div,circle。 &lt;div class="container"&gt; &lt;div class="circle"&gt;&lt;/div&gt;...
css-spinner：小巧，优雅的纯css微调器，用于ajax或加载动画
01-30
12个优雅的小型纯css微调器集合，用于您的网站加载动画。 产品特点 香草-无需外部依赖，也不需要其他库。 独立-单独使用它们中的任何一个。 可自定义-使用手写笔变量快速自定义它们以满足您的需求。 易于使用-...
html+css好玩的案例(源码-纯手写)
preserveXing的博客
02-21 2492
小块爬坡的的loading页面 效果图 css *{ margin: 0; padding: 0; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #333; } .cbody{ display: flex; width: 100%; height: 100%;
纯css制作loading效果
徐同保的专栏
09-29 686
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;纯css制作loading效果&lt;/title&gt; &lt;style type="text/css"&am
使用svg做一个简单loading效果
weixin_45692478的博客
05-07 535
前言 在管理系统通常会用到loading加载，模仿elmement-ui里面的loading,自己用svg简单写了一个。 样式展示 代码 js 代码 <!-- svg 动态loading --> <div class="loading"> <svg class="loading-outer"> <circle class="loading-inner" cx="
手写实现loading效果
weixin_54938190的博客
12-30 243
手写实现loading效果
【css3动画】分享几组手写Loading...加载中...样式
一位前行者的博客
07-24 746
在网页开发中，加载动画是提升用户体验的重要元素之一。本文将分享三种不同的Loading…加载中…样式，每种样式都具有独特的视觉效果和动画表现。你可以根据自己的项目需求选择合适的样式，或者将它们作为灵感来创建自己的加载动画。
手写一个炫酷的loading效果
inticaler的博客
10-11 341
手写一个炫酷的loading效果。
纯css实现 loading（加载）
weixin_55472979的博客
11-25 699
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; }
纯CSS3实现各种loading效果
热门推荐
qq_39025670的博客
07-26 1万+
通过CSS3实现一些炫酷的loading动画效果...
Css3 手写超炫酷商用Loading加载动画
Lln0903的博客
06-11 234
Loading 动画效果一
loading加载效果（纯css）
m0_61004873的博客
09-20 1985
页面loading加载效果
纯css实现loading效果
岁月如歌去，十年弹指间
09-17 261
【代码】纯css实现loading效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值