纯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 :default伪类选择器使用简介
Mar 15 HTML / CSS
CSS3 真的会替代 SCSS 吗
Mar 09 HTML / CSS
HTML5 Canvas 起步(2) - 路径
May 12 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
Apr 24 HTML / CSS
html5 乒乓球(碰撞检测)实例二
Jul 25 HTML / CSS
HTML5中drawImage用法分析
Dec 01 HTML / CSS
详解HTML5中div和section以及article的区别
Jul 14 HTML / CSS
HTML5实现可缩放时钟代码
Aug 28 HTML / CSS
基于html5 canvas做批改作业的小插件
May 20 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
Jun 10 HTML / CSS
萌新的HTML5 入门指南
Nov 06 HTML / CSS
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
Apr 19 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 strtr() 函数使用说明
2008/11/21 PHP
PHP中soap的用法实例
2014/10/24 PHP
PHP网络操作函数汇总
2015/05/18 PHP
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
Referer原理与图片防盗链实现方法详解
2019/07/03 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
js日历功能对象
2012/01/12 Javascript
js对象与打印对象分析比较
2013/04/23 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
2018/10/10 jQuery
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
vue商城中商品“筛选器”功能的实现代码
2020/07/01 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
Python中list初始化方法示例
2016/09/18 Python
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
django-初始配置(纯手写)详解
2019/07/30 Python
解决Jupyter NoteBook输出的图表太小看不清问题
2020/04/16 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
解决python图像处理图像赋值后变为白色的问题
2020/06/04 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
廉洁家庭事迹材料
2014/05/15 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
大学生活感想
2015/08/10 职场文书
Hive HQL支持2种查询语句风格
2022/06/25 数据库