纯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动画和opacity透明度实现呼吸灯效果
Aug 09 HTML / CSS
用纯css3实现的图片放大镜特效效果非常不错
Sep 02 HTML / CSS
详解CSS3浏览器兼容
Dec 14 HTML / CSS
css3 利用transform打造走动的2D时钟
Oct 20 HTML / CSS
CSS3 真的会替代 SCSS 吗
Mar 09 HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
Sep 05 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 HTML / CSS
html5中的input新属性range使用记录
Sep 05 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 HTML / CSS
HTML5拍照和摄像机功能实战详解
Jan 24 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
Aug 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
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
社区(php&amp;&amp;mysql)三
2006/10/09 PHP
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
php按单词截取字符串的方法
2015/04/07 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
JS解密入门 最终变量劫持
2008/06/25 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
2015/12/03 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
JS图片等比例缩放方法完整示例
2016/08/03 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
基于JavaScript实现随机颜色输入框
2016/12/10 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
JavaScript大数相加相乘的实现方法实例
2020/10/18 Javascript
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
给Python入门者的一些编程建议
2015/06/15 Python
Python列表和元组的定义与使用操作示例
2017/07/26 Python
Python动态导入模块的方法实例分析
2018/06/28 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
庆元旦广播稿
2014/02/10 职场文书
2014年人力资源部工作总结
2014/11/19 职场文书
工程服务质量承诺书
2015/04/29 职场文书
MySQL 可扩展设计的基本原则
2021/05/14 MySQL
浅谈sql_@SelectProvider及使用注意说明
2021/08/04 Java/Android
Spring Boot实现文件上传下载
2022/08/14 Java/Android