1、html 部分：
<div id="refershDiv" class="refershDiv">

     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">

                    <rect transform="rotate(0 50 50) translate(0 -25)">

                        <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0s" repeatCount="indefinite"></animate>

                    </rect>

                    <rect transform="rotate(30 50 50) translate(0 -25)">

                        <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.083s" repeatCount="indefinite"></animate>

                    </rect>

                    <rect transform="rotate(60 50 50) translate(0 -25)">

                        <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.166s" repeatCount="indefinite"></animate>

                    </rect>

                    <rect transform="rotate(90 50 50) translate(0 -25)">

                        <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.25s" repeatCount="indefinite"></animate>

                    </rect>

                    <rect transform="rotate(120 50 50) translate(0 -25)">

                        <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.333s" repeatCount="indefinite"></animate>

                    </rect>

                    <rect transform="rotate(150 50 50) translate(0 -25)">

                        <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.416s" repeatCount="indefinite"></animate>

                    </rect>

                    <rect transform="rotate(180 50 50) translate(0 -25)">

                        <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.5s" repeatCount="indefinite"></animate>

                    </rect>

                    <rect transform="rotate(210 50 50) translate(0 -25)">

                        <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.583s" repeatCount="indefinite"></animate>

                    </rect>

                    <rect transform="rotate(240 50 50) translate(0 -25)">

                        <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.666s" repeatCount="indefinite"></animate>

                    </rect>

                    <rect transform="rotate(270 50 50) translate(0 -25)">

                        <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.75s" repeatCount="indefinite"></animate>

                    </rect>

                    <rect transform="rotate(300 50 50) translate(0 -25)">

                        <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.833s" repeatCount="indefinite"></animate>

                    </rect>

                    <rect transform="rotate(330 50 50) translate(0 -25)">

                        <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.916s" repeatCount="indefinite"></animate>

                    </rect>

    </svg>

</div>

2、css部分：

#refershDiv{text-align: center;position: absolute;width: 100%;left:;top: 45%;}

        .refershDiv svg {

            fill: #a0a0a0;

            width: 80px;

            height: 80px;

        }

        .refershDiv svg rect {

            x: 47.5;

            y:;

            rx:;

            ry:;

            width: 5px;

            height: 18px;

        }

不需要图片，css+svg绘制动态loading加载图标的更多相关文章

  1. CSS动画实例：Loading加载动画效果（一）

    一些网站或者APP在加载新东西的时候,往往会给出一个好看有趣的Loading图,大部分的Loading样式都可以使用CSS3制作出来,它不仅比直接使用gif图简单方便,还能节省加载时间和空间.下面介绍 ...

  2. CSS动画实例：Loading加载动画效果（三）

    3．小圆型Loading 这类Loading动画的基本思想是:在呈现容器中定义1个或多个子层,再对每个子层进行样式定义,使得其均显示为一个实心圆形,最后编写关键帧动画控制,使得各个实心圆或者大小发生改 ...

  3. 使用SVG图像作为loading加载 以保证图像高清不模糊

    使用教程 接下来设计达人网小编为大家讲解这个使用方法,其实是相当简单的. STEP 1: 复制你想要的SVG加载动画代码到<body>里面,小编随意复制一个代码如下:<svg ver ...

  4. css 动态导入css文件 @import 动态js加载 都是静态的

    @import "http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css" /*-防止各大cdn公共库加载地址失效 ...

  5. JS获取图片的缩略图,并且动态的加载多张图片

    找了好多资料也没有找到该死的ie的解决办法,最后放弃了ie <!DOCTYPE html> <html> <head> <meta charset=" ...

  6. 判断脚本，图片，CSS，iframe等是否加载完成

    1.图片 <img id="MyImg" src="src"/>jquery实现:$("#MyImg").load(functi ...

  7. QT自定义控件系列(二) --- Loading加载动画控件

    本系列主要使用Qt painter来实现一些基础控件.主要是对平时自行编写的一些自定义控件的总结. 为了简洁.低耦合,我们尽量不使用图片,qrc,ui等文件,而只使用c++的.h和.cpp文件. 由于 ...

  8. jquery加载数据时显示loading加载动画特效

    插件下载:http://www.htmleaf.com/jQuery/Layout-Interface/201505061788.html 插件使用: 使用该loading加载插件首先要引入jQuer ...

  9. loading加载和layer.js

    layer.js中的loading加载 l本篇主要介绍layerjs中的loading加载在实际项目中的应用 1.使用的技术 前端:HTML5+CSS3+JS+layer.js 后端:.net 2.遇 ...

随机推荐

  1. ASP.NET 模型验证2--验证部分属性

    在开发MVC时,模型验证非常常见,平常我们用的应该都是全验证 if(ModelState.IsValid){ //验证成功要做的事 .....} 但是有时候我们需要部分验证,比如修改用户信息时,因为更 ...

  2. cc.progressFromTo cc.progressTo（action 在duration中ProgressTimer的Percentage变化)

    let progressTimer= new cc.ProgressTimer(new cc.Sprite(fileName));this.addChild(progressTimer);progre ...

  3. php设计模式之策略模式实例代码

    html <html> <head> <meta charset="UTF-8"> <title>简单计算器</title&g ...

  4. Linux - Shell - 算术表达式 - 算数运算

    概述 shell 中基于 $(()) 的 算数运算 背景 复习 shell 脚本 凑数吧 准备 环境 os centos7 1. 算数运算 代码 #!/bin/bash # $(()) 的数学运算, ...

  5. [POI2000] 公共串 - 后缀数组,二分

    [POI2000] 公共串 Description 给出几个由小写字母构成的单词,求它们最长的公共子串的长度. Solution 预处理出后缀数组和高度数组,二分答案 \(k\) ,对于每一个连续的 ...

  6. AD转化器分类及特点和选用

    1. AD转换器的分类 下面简要介绍常用的几种类型的基本原理及特点:积分型.逐次逼近型.并行比较型/串并行型.∑-Δ调制型.电容阵列逐次比较型及压频变换型. 1)积分型(如TLC7135)积分型AD工 ...

  7. C++ 中字符串查找、字符串截取、字符串替换

    参照:C++基础-string截取.替换.查找子串函数 1.字符串查找 s.find(s1) //查找s中第一次出现s1的位置,并返回(包括0) s.rfind(s1) //查找s中最后次出现s1的位 ...

  8. ubuntu查看系统负载和程序运行状况

    1,没有图形化界面 纯文字:top 美化的文字界面:htop 2,图形界面查看系统状态: gnome-system-monitor(或者在搜索界面中搜索system monitor) 3,jetson ...

  9. c数据结构 -- 链表的理解

    链表是结构体变量与结构体变量链接在一起,怎么链接在一起?通过指针 #include <stdio.h> struct Node{ int data; struct Node* next; ...

  10. Having用法以及其和Where区别

    例如,进行分组语句: select year,count(id) num from tblPlantProduce group by year 在这条语句中若要筛选出年份>2005年的有两种方式 ...