使用教程

接下来设计达人网小编为大家讲解这个使用方法，其实是相当简单的。

STEP 1: 复制你想要的SVG加载动画代码到<body>里面，小编随意复制一个代码如下：
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="0" width="4" height="10" fill="#333" transform="translate(0 15.1665)">
<animateTransform attributeType="xml" attributeName="transform" type="translate" values="0 0; 0 20; 0 0" begin="0" dur="0.6s" repeatCount="indefinite"></animateTransform>
</rect>
<rect x="10" y="0" width="4" height="10" fill="#333" transform="translate(0 11.5002)">
<animateTransform attributeType="xml" attributeName="transform" type="translate" values="0 0; 0 20; 0 0" begin="0.2s" dur="0.6s" repeatCount="indefinite"></animateTransform>
</rect>
<rect x="20" y="0" width="4" height="10" fill="#333" transform="translate(0 1.83315)">
<animateTransform attributeType="xml" attributeName="transform" type="translate" values="0 0; 0 20; 0 0" begin="0.4s" dur="0.6s" repeatCount="indefinite"></animateTransform>
</rect>
</svg>

此时代码已经可以带动画了，但没颜色，请继续看STEP2添加颜色。

STEP 2 : 为SVG图像添加颜色

给你的样式表添加如下样式，里面的颜色代码换上你喜欢的即！
<style>
svg path,svg rect{fill: #FF6700;}
</style>

实例地址：http://codepen.io/aurer/pen/jEGbA

使用SVG图像作为loading加载 以保证图像高清不模糊的更多相关文章

  1. 不需要图片，css+svg绘制动态loading加载图标

    1.html 部分: <div id="refershDiv" class="refershDiv"> <svg xmlns="ht ...

  2. IOS 多于UIImageView 当加载较大的高清闪存管理

    当我们是一家人View  多于UIImageView,和UIImageView表明一个更大的HD,可能存在的存储器的警告的问题.假设第一次走进这个view,无记忆出现预警.当重新进入view,在那曾经 ...

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

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

  4. [js开源组件开发]loading加载效果

    loading加载效果 由于程序和网络的原因,常常我们需要在交互的时候,给用户一个正在加载中的动画,于是,loading组件横空出世.不需要复杂的代码,也能完成大多数业务,这就是我做组件的原则. 效果 ...

  5. 2款不同样式的CSS3 Loading加载动画 附源码

    原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...

  6. HTML5 五彩圆环Loading加载动画实现教程

    原文:HTML5 五彩圆环Loading加载动画实现教程 今天我们要来介绍一款效果很特别的HTML5 Loading加载动画,不像其他的Loading动画,这款Loading动画颜色很丰富,并且在转圈 ...

  7. 使用js加载图像和setDataXML()加载数据

    使用js加载图像和setDataXML()加载数据 前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<E ...

  8. 使用Dialog实现全局Loading加载框

    Dialog实现全局Loading加载框 很多人在实现Loading加载框的时候,都是在当前的页面隐藏一个Loading布局,需要加载的时候,显示出来,加载完再隐藏 使用Dialog实现Loading ...

  9. vue+elementUI+axios实现的全局loading加载动画

    在项目中,很多时候都需要loading加载动画来缓解用户的焦虑等待,比如说,我打开了一个页面,而这个页面有很多接口请求,但浏览器的请求并发数就那么几个,再加上如果网速不行的话,那么这时候,用户很可能就 ...

随机推荐

  1. String类

    字符串的功能          A:判断功能                  boolean equals(Object obj)//比较对象                  boolean eq ...

  2. Git 相关总结

    Git 优秀在线教程 廖雪峰-史上最浅显易懂的Git教程!

  3. 关于Java泛型的使用

    在目前我遇到的java项目中,泛型应用的最多的就属集合了.当要从数据库取出多个对象或者说是多条记录时,往往都要使用集合,那么为什么这么使用,或者使用时有什么要注意的地方,请关注以下内容. 感谢Wind ...

  4. Nginx配置文件nginx.conf中文详解（转）

    ######Nginx配置文件nginx.conf中文详解##### #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_ ...

  5. Using AlloyTouch to control three.js 3D model

    As you can see, the above cube rotation, acceleration, deceleration stop all through the AlloyTouch ...

  6. 【代码笔记】iOS-柱状图

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...

  7. seL4环境配置

      转载声明:希望大家能够从这里收获知识之外,也能够体会到博主撰写博客的辛苦.个人博客势单力薄,对于强转甚至转载博客访问量高于原文的例子不在少数. 希望能够得到大家关注的同时,也能够稍微体谅一下博主的 ...

  8. JAVA编程思想（第四版）学习笔记----11.10 Map

    之前学习的是Collection层次的List接口.List层次比较简单,除去与多线程安全相关的CoppyOnWriteArrayList<T>类,这一个类在集中涉及多线程相关知识时候再学 ...

  9. CSS3：RGBA的使用方法

    1.说明 此色彩模式与RGB相同,只是在RGB模式上新增了Alpha透明度. RGBA(R,G,B,A) 2.取值 R: 红色值,正整数值的取值范围为:0 - 255,百分数值的取值范围为:0.0% ...

  10. MySQL解压版配置步骤

    mysql-5.7.14-winx64\bin配置到Path中 在解压路径下复制my-default.ini,修改名称为my.ini 在my.ini添加如下 [mysqld] basedir=C:\\ ...