1 效果

2 实现原理

原理很简单：

1 设置100px宽高的div，再设置成圆形border-radius：50%；

2 设置border一定宽度和颜色，再设置border-left为同样宽度和另一种颜色；

3 设置animation动画，让div旋转起来就可以；通过from和to设置旋转角度即可

3 全部代码:

<!DOCTYPE html>
<html>
<head><title>css实现加载中loading动画效果</title><style type="text/css">html,body {width: 100%;height: 100%;margin: 0;padding: 0;display: flex;flex-flow: column;align-items: center;justify-content: center;}.loading {width: 100px;height: 100px;border-radius: 50%;border: 15px solid #BEBEBE;border-left: 15px solid orange;animation: loading 1s linear infinite;}@keyframes loading {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}</style>
</head><body><div class="loading"></div>
</body></html>

css实现加载中loading动画效果相关推荐

CSS3制作加载中loading动画效果
常见的loading加载中通常是使用一个gif来实现动画效果,实际上我们可以使用css3的特性来制作,本文介绍了一种线性加载效果的css3制作方法. 在web开发中经常遇到ajax的加载,那个加载中的 ...
通过JS和CSS，实现网页加载中的动画效果
需要材料: 一张loading动画的gif图片基本逻辑: 模态框遮罩 + loading.gif动图, 默认隐藏模态框页面开始发送Ajax请求数据时,显示模态框请求完成,隐藏模态框下面我们通过 ...
css3加载中动画效果,CSS3实现加载中的动画效果
Loading 的菊花图形组合的不太好,基本上实现这个功能了动画解析这个动画用到的 CSS3 特性: transform 主要使用 transform 属性的 rotate,将线条组合成 Load ...
html怎么帮图片占位,css+html实现Skeleton Screen 加载占位图动画效果（带动画）
效果自上而下渐隐渐现源码 html,用的angular语法,只要做简单的修改就可以成为你需要的语法 css .skeletonItem { padding: 16px; border-bottom ...
CSS3超酷网页Loading加载进度条动画效果
在jQuery之家上发现的一款css3效果. CSS3 animation超酷网页Loading加载进度条动画效果 >>查看演示 > ...
css3加载中loading代码js特效大全
下载地址 css3加载中loading代码特效大全,非常多的预加载动画特效代码. dd:
html 载入中,用纯CSS实现加载中动画效果
今天要介绍的是用简单的CSS--只用CSS,不用Gif--制作"加载中-"动画效果.先看看效果: 上面的这个加载中效果,以前是用gif动图实现的,但随着CSS的进步,CSS动画功能 ...
activity中fragment 返回键不退出_优雅地处理加载中(loading)，重试(retry)和无数据(empty)等...
LoadSir是一个高效易用,低碳环保,扩展性良好的加载反馈页管理框架,在加载网络或其他数据时候,根据需求切换状态页面,可添加自定义状态页面,如加载中,加载失败,无数据,网络超时,占位图,登录失效等常 ...
js页面加载实现loading提示效果
由于页面在加载过程中请求了很多资源,导致打开过慢,且页面无提示,对用户不友好,测试人员希望增加loading效果. 参考如下步骤可行. 实际项目展示动态loading图有自有的方法,不便贴代码,以下用 ...

css实现加载中loading动画效果

1 效果

2 实现原理

3 全部代码:

css实现加载中loading动画效果相关推荐

最新文章

热门文章