纯html+css实现Element loading效果


Posted in HTML / CSS onAugust 02, 2021

这是 Element UI loading 组件的效果图,看起来很酷,我们来实现一下!

纯html+css实现Element loading效果

分析

动画由两部分组成:

蓝色的弧线由点伸展成一个圆,又从圆收缩成一个点。

纯html+css实现Element loading效果

圆的父节点带着圆旋转

代码
html

<svg viewBox="25 25 50 50" class="box">
    <circle cx="50" cy="50" r="20" fill="none" class="circle"></circle>
</svg>

css
默认样式

.box {
    height: 200px;
    width: 200px;
    background: wheat;
}
.box .circle {
    stroke-width: 2;
    stroke: #409eff;
    stroke-linecap: round;
}

添加动画效果

/* 旋转动画 */
@keyframes rotate {
    to {
        transform: rotate(1turn)
    }
}
/* 弧线动画 */
/* 125 是圆的周长 */
@keyframes circle {
    0% {
 /* 状态1: 点 */
        stroke-dasharray: 1 125;
        stroke-dashoffset: 0;
    }
    50% {
 /* 状态2: 圆 */
        stroke-dasharray: 120, 125;
        stroke-dashoffset: 0;
    }
    to {
 /* 状态3: 点(向旋转的方向收缩) */
        stroke-dasharray: 120 125;
        stroke-dashoffset: -125px;
    }
}
.box {
  /* ...同上 */
  animation: rotate 2s linear infinite;
}
.circle {
  /* ...同上 */
  animation: circle 2s infinite;
}

纯html+css实现Element loading效果

最后把背景去掉

 纯html+css实现Element loading效果

在线代码演示 https://jsbin.com/yarufoy/edit?html,css,output

到此这篇关于纯html+css实现Element loading效果的文章就介绍到这了,更多相关html+css实现 loading内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
利用CSS3的线性渐变linear-gradient制作边框的示例
Jun 02 HTML / CSS
CSS3模拟IOS滑动开关效果
Sep 28 HTML / CSS
详解HTML5新增标签
Nov 27 HTML / CSS
html5仿支付宝密码框的实现代码
Sep 06 HTML / CSS
前端canvas动画如何转成mp4视频的方法
Jun 17 HTML / CSS
HTML5的download属性详细介绍和使用实例
Apr 23 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
Jan 12 HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
Apr 10 HTML / CSS
canvas画图被放大且模糊的解决方法
Aug 11 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
Nov 10 HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 21 HTML / CSS
纯html+css实现奥运五环的示例代码
HTML+CSS实现导航条下拉菜单的示例代码
Aug 02 #HTML / CSS
CSS实现两列布局的N种方法
Aug 02 #HTML / CSS
html+css实现滚动到元素位置显示加载动画效果
Aug 02 #HTML / CSS
纯html+css实现打字效果
html form表单基础入门案例讲解
Jul 21 #HTML / CSS
带你了解CSS基础知识,样式
Jul 21 #HTML / CSS
You might like
PHP CURL CURLOPT参数说明(curl_setopt)
2013/09/30 PHP
PHP的全局错误处理详解
2016/04/25 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
php实现页面纯静态的实例代码
2017/06/21 PHP
jquery validate使用攻略 第四步
2010/07/01 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
js中使用使用原型(prototype)定义方法的好处详解
2016/07/04 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
前端常见跨域解决方案(全)
2017/09/19 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
[00:31]DOTA2荣耀之路7:Miracle-空血无敌斩
2018/05/31 DOTA
python转换摩斯密码示例
2014/02/16 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
python3 flask实现文件上传功能
2020/03/20 Python
使用python判断你是青少年还是老年人
2018/11/29 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
用pandas划分数据集实现训练集和测试集
2020/07/20 Python
夏威夷咖啡公司:Hawaii Coffee Company
2019/09/19 全球购物
为什么group by 和order by会使查询变慢
2014/05/16 面试题
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
实习教师自我鉴定
2013/09/27 职场文书
大学生水文观测实习自我鉴定
2013/09/29 职场文书
后勤主管岗位职责
2014/03/01 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
行政复议答复书
2015/07/01 职场文书
初中团委工作总结
2015/08/13 职场文书
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android