今天把之前分享的两篇博客《CSS3实现10种Loading效果》和 《CSS3实现8种Loading效果【二】》整理了一下。因为之前所分享的各种loading效果都只是做了webkit内核浏览器的兼容性而已,但初衷还是想做成PC端的效果,所以就统一把所有效果都收集起来,并兼容各主流浏览器。最重要的是,我为了方便分享给大家使用,做了一个简单的网页小工具,通过这个小工具,大家可以根据自己需要的loading效果直接获取相应的html和css代码。在线小工具地址为:http://www.jr93.top/css3-loadingEffect.html

同时也提供github下载地址:https://github.com/JR93/css3-loadingEffect

接下来简单介绍一下我这个很挫的小工具,先看一下图:

其实就是把所有效果整理了一下,相比之前直接粘代码到博文里,现在这种方式可能更加适合大家,这也是我做这个小工具的出发点和动力。可以看到,18种效果都呈现在这个页面里,同时每种效果下方还有一个获取代码的按钮,点击可以获取相应效果的html和css代码,试一下吧!

OK,只要是现代主流浏览器,体验应该不会有太大的差异,不过今天也有发现一个问题,就是第十种效果在webkit内核浏览器有差异:

谷歌浏览器下,绿条移动进来时父元素overflow:hidden对它失效了:

而在360浏览器极速模式下是正常的:

所以鉴于这种效果不怎么常用而且还有点小的渲染问题,大家尽量避免使用就是了,其他效果显示正常。

至于点击按钮获取相应的代码,我用了最笨的办法:

通过一个全局对象CODE:

window.CODE = {
style_1 : '',
style_2 : '',
...
}

把每种效果的代码拼接成字符串,然后存到该对象的对应属性里。然后通过点击按钮,获取当前按钮的id去获取到该对象的属性的值,然后添加到弹出层的id为code的div里,这里我用了html5的新的全局属性contenteditable,让该div元素可以被编辑:

<div id='code' contenteditable='true'></div>

所以说,只有用现代浏览器才不会影响页面的布局和体验。

最后,希望这个小工具可以帮助到大家,谢谢!

PS:转载请注明出处,谢谢合作!

18种CSS3loading效果完整版的更多相关文章

  1. 18种CSS3loading效果完整版,兼容各大主流浏览器,提供在线小工具使用

    今天把之前分享的两篇博客<CSS3实现10种Loading效果>和 <CSS3实现8种Loading效果[二]>整理了一下.因为之前所分享的各种loading效果都只是做了we ...

  2. 《JS高程》实现继承的6种方式(完整版)

    许多OO语言都支持 两种继承方式: (1)接口继承:只继承方法签名: (2)实现继承:继承实际的方法. ECMAScript 由于函数没有签名,无法实现接口继承,因此只支持实现继承,而且主要是依靠原型 ...

  3. 《JS高程》创建对象的7种方式(完整版)

    一.理解对象 ECMA-262定义对象:无序属性的集合,其属性可以包含基本值.对象或者属性. 我们可以把 ECMAScript 的对象想象成 散列表:无非就是一组 名值对,其中值可以是数据或函数. 创 ...

  4. 常用经典SQL语句大全完整版--详解+实例 (存)

    常用经典SQL语句大全完整版--详解+实例 转 傻豆儿的博客 http://blog.sina.com.cn/shadou2012  http://blog.sina.com.cn/s/blog_84 ...

  5. 常用经典SQL语句大全完整版--详解+实例 《来自网络,很全没整理,寄存与此》

    常用经典SQL语句大全完整版--详解+实例 下列语句部分是Mssql语句,不可以在access中使用. SQL分类: DDL—数据定义语言(CREATE,ALTER,DROP,DECLARE) DML ...

  6. Linux学习总结(1)——Linux命令大全完整版

    Linux命令大全完整版 目    录I 1. linux系统管理命令1 adduser1 chfn(change finger information)1 chsh(change shell)1 d ...

  7. sed实例精解--例说sed完整版

    原文地址:sed实例精解--例说sed完整版 作者:xiaozhenggang 最近在学习shell,怕学了后面忘了前面的就把学习和实验的过程记录下来了.这里是关于sed的,前面有三四篇分开的,现在都 ...

  8. Asp.NET Core2.0 项目实战入门视频课程_完整版

    END OR START? 看到这个标题,你开不开心,激不激动呢? 没错,.net core的入门课程已经完毕了.52ABP.School项目从11月19日,第一章视频的试录制,到今天完整版出炉,离不 ...

  9. 【ELK】4.spring boot 2.X集成ES spring-data-ES 进行CRUD操作 完整版+kibana管理ES的index操作

    spring boot 2.X集成ES 进行CRUD操作  完整版 内容包括: ============================================================ ...

随机推荐

  1. 图像中的stride含义

    这个不是卷积中的步长stride 是另外一个含义, stride = 每个像素所占字节数 * width input stride为我们正常进行卷积时候设置的stride值,output stride ...

  2. 原生js实现图片轮播效果

    思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: <!DOCTYPE html> ...

  3. hdu5064 DLX可重复覆盖+二分

    这题题意是 给了n个城市 在其中小于等于k个城市建立机场然后 使得最远的那个离机场的城市距离最短 二分答案 ,我们对于每次的mid 重新建图然后再来一次DLX,每个点可以覆盖的点建立一条联系就ok了 ...

  4. Maven的配置指南

    Maven的配置指南  配置Maven Maven配置发生在3个级别: 项目 - 大多数静态配置发生在pom.xml中 安装 - 这是Maven安装时发生的一次性的配置过程 用户 - 这是Maven提 ...

  5. jQuery选择器--:first和:last

       :first 概述 获取匹配的第一个元素    :last 概述 获取匹配的最后个元素 <!DOCTYPE html> <html> <head> <m ...

  6. 从js中提取数据

    <script language="JavaScript" type="text/javascript+gk-onload"> SKART = (S ...

  7. uvalive 11865 Stream My Contest

    题意: 有一个网络中心,和许多个城市,网络中心以及城市之间有若干条边,这些边有两个属性,最大带宽和修建费用. 现在要用最多不超过C的费用修建网络,使得每个城市都有网络连接,最大化最小带宽. 带宽限制是 ...

  8. python os.path.join()

    >>> import os >>> path = '/Users/beazley/Data/data.csv' >>> # Get the las ...

  9. Jmeter分布式压力测试

    有时候,一台机器无法支持很多个虚拟用户并发,这时就会使用分布式测试来实现这个功能,jmeter是有提供这个功能的.要实现分布式测试,得在主从(agent和controler)机器的jmeter安装目录 ...

  10. Thread(26)

    1.进程:进程指正在运行的程序.确切的来说,当一个程序进入内存运行,即变成一个进程,进程是处于运行过程中的程序,并且具有一定独立功能. 2.线程:线程是进程中的一个执行单元,负责当前进程中程序的执行, ...