SVG实现loading

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.loading-container {display: flex;align-items: center;justify-content: center;width: 200px;height: 80px;background: #fff;border-radius: 2px;box-shadow: 0 0 4px #c6c6c6;}svg {position: relative;width: 46px;height: 46px;animation: rotate 1s linear infinite;}circle {width: 100%;height: 100%;fill: none;stroke-width: 3;/* Stroke属性定义一条线，文本或元素轮廓颜色： */stroke: #00a1ff;/* 尾部形状 */stroke-linecap: round;/* 平衡旋转造成的偏移量 */transform: translate(5px, 5px);/* 虚线长度 */stroke-dasharray: 113;/* 偏移量 */stroke-dashoffset: 113;animation: animate 2s linear infinite;}loading-container-text {margin-left: 12px;}@keyframes animate {0%,100% {stroke-dashoffset: 113;}50% {stroke-dashoffset: 0;}50.1% {stroke-dashoffset: 226;}}@keyframes rotate {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}</style></head><body><div class="loading-container"><div class="loading-container-svg"><svg><circle cx="18" cy="18" r="18"></circle></svg></div><div class="loading-container-text"><span>加载中...</span></div></div></body>
</html>

SVG实现loading相关推荐

svg实现loading效果
今天可以购买 9 月 30 号的火车票,十一大家都记得抢票回家呀!不要忘记工作的同时,常回家看看. 我们都知道 SVG 是一种基于 XML 语法的图像格式,其他图像格式都是基于像素处理的.我们绘制 s ...
android 载入svg动画,实例讲解使用SVG制作loading加载动画的方法
今天和大家分享一个以SVG图像为主的loading加载动画,现在移动端网页使用比较多,若还用GIF做loading图片的话,可能会影响图像的质量,所以使用SVG是一个不错的方式. 这次展示的代码由 A ...
loading动画_超干货 CSS3/SVG Loading动画集合
随着css3实现各种炫酷动画效果越来越流行.今天给大家推荐一些css3和SVG实现loading加载动画效果. 先上一波令人愉悦的动画效果. 怎么样,是不是感觉很nice,那就继续往下看吧.这里为大家 ...
分享web前端七款HTML5 Loading动画特效集锦
以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动 ...
loading窗口动画 web_分享web前端七款HTML5 Loading动画特效集锦
以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动 ...
html 载入效果,HTML5 Loading动画特效集锦
本文作者html5tricks,转载请注明出处以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为 1.HTML5 Canvas发光 ...
animation停留_这些Animation动画技巧与细节你知道么
引言- 在 web 应用中,前端同学在实现动画效果时往往常用的几种方案: css3 transition / animation - 实现过渡动画 setInterval / setTimeout - ...
HTML 元素内部添加预加载
CSS: /*元素内部加载loading*/.innerLoading {height: 100%;width: 100%;display: flex;justify-content: center; ...
axios传数组到后台_我是如何让公司后台管理系统焕然一新的
作者:yeyan1996 https://juejin.im/post/5c76843af265da2ddd4a6dd0 写在前面马上到了金三银四的时间,很多公司开启了今年第一轮招聘的热潮,虽说今年 ...

SVG实现loading

SVG实现loading

SVG实现loading相关推荐

最新文章

热门文章