纯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 相关文章推荐
表单button的outline在firefox浏览器下的问题
Dec 24 HTML / CSS
css3实现一款模仿iphone样式的注册表单
Mar 20 HTML / CSS
一款利用纯css3实现的360度翻转按钮的实例教程
Nov 05 HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 HTML / CSS
html5新增的属性和废除的属性简要概述
Feb 20 HTML / CSS
html5 input属性使用示例
Jun 28 HTML / CSS
HTML5 embed 标签使用方法介绍
Aug 13 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
Jan 24 HTML / CSS
详解HTML5中的元素与元素
Aug 17 HTML / CSS
如何避免常见的6种HTML5错误用法
Nov 06 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 HTML / CSS
什么是css原子化,有什么用?
Apr 24 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
Discuz!下Memcache缓存实现方法
2010/05/28 PHP
ThinkPHP数据操作方法总结
2015/09/28 PHP
php构造函数与析构函数
2016/04/23 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
2011/01/19 Javascript
Three.js学习之网格
2016/08/10 Javascript
Vue.js每天必学之表单控件绑定
2016/09/05 Javascript
AngularJS 所有版本下载地址
2016/09/14 Javascript
jQuery表单设置值的方法
2017/06/30 jQuery
vue2.0 实现页面导航提示引导的方法
2018/03/13 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
2019/07/25 Javascript
微信小程序如何获取用户头像和昵称
2019/09/23 Javascript
小程序点击图片实现png转jpg
2019/10/22 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
Python中字符串的常见操作技巧总结
2016/07/28 Python
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
python导入模块交叉引用的方法
2019/01/19 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
Django中和时区相关的安全问题详解
2020/10/12 Python
PyCharm最新激活码(2020/10/27全网最新)
2020/10/27 Python
AmazeUI 折叠面板的实现代码
2020/08/17 HTML / CSS
联想瑞士官方网站:Lenovo Switzerland
2017/11/19 全球购物
英文版网络工程师求职信
2013/10/28 职场文书
交通安全教育制度
2014/02/02 职场文书
村干部任职承诺书
2015/01/21 职场文书
董事长年会致辞
2015/07/29 职场文书
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs