纯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 圆角效果
Jul 15 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
Jun 10 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
W3C公布最新的HTML5标准草案
Oct 17 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
Jun 03 HTML / CSS
HTML5如何使用SVG的方法示例
Jan 11 HTML / CSS
前端水印的简单实现代码示例
Dec 02 HTML / CSS
css position fixed 左右双定位的实现代码
Apr 29 HTML / CSS
详解CSS不定宽溢出文本适配滚动
May 24 HTML / CSS
CSS布局之浮动(float)和定位(position)属性的区别
Sep 25 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
discuz7 phpMysql操作类
2009/06/21 PHP
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
解析php中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
PHP中串行化用法示例
2016/11/16 PHP
PHP如何获取当前主机、域名、网址、路径、端口等参数
2017/06/09 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
django中嵌套的try-except实例
2020/05/21 Python
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
服装设计专业毕业生推荐信
2013/11/09 职场文书
上课打牌的检讨书
2014/02/15 职场文书
销售助理岗位职责
2014/02/21 职场文书
大学同学十年聚会感言
2014/02/21 职场文书
超市创业计划书
2014/04/24 职场文书
2015年维修工作总结
2015/04/25 职场文书
传单、海报早OUT了,另类传单营销方案送给你!
2019/07/15 职场文书
基于Golang 高并发问题的解决方案
2021/05/08 Golang
java设计模式--建造者模式详解
2021/07/21 Java/Android