纯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教程:新增加的结构伪类
Apr 02 HTML / CSS
使用css3实现的tab选项卡代码分享
Dec 09 HTML / CSS
CSS中的字体大小设置属性总结
May 24 HTML / CSS
谈谈对css属性box-sizing的了解
Jan 04 HTML / CSS
css3编写浏览器背景渐变背景色的方法
Mar 05 HTML / CSS
CSS3田字格列表的样式编写方法
Nov 22 HTML / CSS
HTML5新增的标签和属性归纳总结
May 02 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 HTML / CSS
html5 实现客户端验证上传文件的大小(简单实例)
May 15 HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 HTML / CSS
html5 canvas绘制网络字体的常用方法
Aug 26 HTML / CSS
详解HTML5布局和HTML5标签
Oct 26 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
关于shopex同步ucenter的redirect问题,导致script不运行
2013/04/10 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
PHP分页类集锦
2014/11/18 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
JQuery之拖拽插件实现代码
2011/04/14 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
2013/05/27 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
2016/07/28 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
详解JavaScript RegExp对象
2017/02/04 Javascript
js获取指定时间的前几秒
2017/04/05 Javascript
Vue中组件之间数据的传递的示例代码
2017/09/08 Javascript
jQuery实现form表单序列化转换为json对象功能示例
2018/05/23 jQuery
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
javascript function(函数类型)使用与注意事项小结
2019/06/10 Javascript
ptyhon实现sitemap生成示例
2014/03/30 Python
Python中的XML库4Suite Server的介绍
2015/04/14 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
python 调试冷知识(小结)
2019/11/11 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
俄罗斯玩具、儿童用品、儿童服装和鞋子网上商店:MyToys.ru
2019/10/14 全球购物
利用指针变量实现队列的入队操作
2012/04/07 面试题
大学生党课思想汇报
2013/12/29 职场文书
家居饰品店创业计划书
2014/01/31 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
高校师德师风自我剖析材料
2014/09/29 职场文书
高三英语教学反思
2016/03/03 职场文书
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python