纯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 相关文章推荐
纯HTML5+CSS3制作图片旋转
Jan 12 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 HTML / CSS
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
Nov 16 HTML / CSS
html5 application cache遇到的严重问题
Dec 26 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 HTML / CSS
使用canvas绘制贝塞尔曲线
Dec 17 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
Jun 25 HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
Jan 07 HTML / CSS
HTML5 localStorage使用总结
Feb 22 HTML / CSS
AmazeUI中各种的导航式菜单与解决方法
Aug 19 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
Mar 31 HTML / CSS
关于CSS浮动与取消浮动的问题
Jun 28 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
递归列出所有文件和目录
2006/10/09 PHP
初学CAKEPHP 基础教程
2009/11/02 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
Zend Framework教程之前端控制器Zend_Controller_Front用法详解
2016/03/07 PHP
php微信开发自定义菜单
2016/08/27 PHP
Yii2框架自定义验证规则操作示例
2019/02/08 PHP
使用focus方法让光标默认停留在INPUT框
2014/07/29 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
node.js通过axios实现网络请求的方法
2018/03/05 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
详解vue中router-link标签所必备了解的属性
2019/04/15 Javascript
python使用urlparse分析网址中域名的方法
2015/04/15 Python
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
Python学习笔记之解析json的方法分析
2017/04/21 Python
python sys,os,time模块的使用(包括时间格式的各种转换)
2018/04/27 Python
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2018/06/26 Python
Python3单行定义多个变量或赋值方法
2018/07/12 Python
python实现的发邮件功能示例
2019/09/11 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
复古服装:RetroStage
2019/05/10 全球购物
英国门销售网站:Green Tree Doors
2020/01/07 全球购物
家长会主持词开场白
2014/03/18 职场文书
给校长的建议书200字
2014/05/16 职场文书
党员个人剖析材料
2014/09/30 职场文书
MySQL基础(一)
2021/04/05 MySQL
如何用threejs实现实时多边形折射
2021/05/07 Javascript
为什么你写的height:100%不起作用
2021/05/10 HTML / CSS