18种CSS3loading效果完整版

      今天把之前分享的两篇博客《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：转载请注明出处，谢谢合作！