使用教程

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

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. C# async/await 使用总结

    今天搞这两个关键字搞得有点晕,主要还是没有彻底理解其中的原理. 混淆了一个调用异步方法的概念: 在调用异步方法时,虽然方法返回一个 Task,但是其中的代码已经开始执行.该方法在调用时,即刻执行了一部 ...

  2. 前端开发：面向对象与javascript中的面向对象实现（一）

    前端开发:面向对象与javascript中的面向对象实现(一) 前言: 人生在世,这找不到对象是万万不行的.咱们生活中,找不到对象要挨骂,代码里也一样.朋友问我说:“嘿,在干嘛呢......”,我:“ ...

  3. C#限速下载网络文件

    代码: using System; using System.Collections.Concurrent; using System.Collections.Generic; using Syste ...

  4. 第三篇 Entity Framework Plus 之 Query Cache

    离上一篇博客,快一周,工作太忙,只能利用休息日来写一些跟大家分享,Entity Framework Plus 组件系列文章,之前已经写过两篇 第一篇 Entity Framework Plus 之 A ...

  5. Contents

    Contents 占位 ---------------------------------- Python3中的字符串函数学习总结

  6. GJM : 常用网站收集 【不断更新中... ... ... 】

    感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...

  7. 批量处理sql 数据存入xml类型列

    个人记录 需求:当表T1 ItemCode和表T2 ItemName的数据相等时,将表T2所对应的ID和ItemName列的数据分别存入表T1 CAOZUO字段的id元素和text元素的文本中. 下面 ...

  8. 配置eclipse J2EE环境

    早已习惯使用eclipse做Java相关的开发,因为之前安装的是RCP版本,今天发现对于J2EE的开发,在perference中居然没有Axis2的支持,需要添加J2EE的支持插件,特在此说明安装方式 ...

  9. html如何和CSS联系起来

    CSS  <Cascading Style  Sheet>层叠样式表 .级联样式表,用于控制Web页面的外观: Html中使用CSS下面讲述2种常用方法: 1.连接式:可以实现CSS和Ht ...

  10. id，clientid 和 uniqueid 的区别

    一. ID是设计的时候所指定的ID. ClientID是当这个控件生成到客户端页面时候,需要在客户端访问时候用的. UniqueID是当需要参与服务端回传的时候用的. 备注:当控件是子控件的时候(例如 ...