插件描述：使用 Ajax 加载页面时不希望用户看到 DOM Change 的过程，在部分机子上你会觉得页面“闪”了一下，所以就需要一个炫酷吊炸天的动画来掩盖它。
我这边用的是IE11，chrome 39.0.2171.95 m，做的测试没有问题
========以下内容由 Mr.li√ 提供====================
首先在网页上增加以下代码：
1 2 3 4 | <code style="-webkit-print-color-adjust: exact; font-family: Monaco, 'Andale Mono', 'Courier New', monospace; color: rgb(115, 115, 115); padding: 0px; font-size: 14px; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px;"><div <span class="hljs-variable" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">id=</span><span class="hljs-string" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);">"loader"</span> <span class="hljs-variable" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">style=</span><span class="hljs-string" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);">"z-index:99999;"</span> <span class="hljs-variable" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">class=</span><span class="hljs-string" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);">"pageload-overlay"</span> <span class="hljs-variable" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">data-opening=</span><span class="hljs-string" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);">"M 40 -21.875 C 11.356078 -21.875 -11.875 1.3560784 -11.875 30 C -11.875 58.643922 11.356078 81.875 40 81.875 C 68.643922 81.875 91.875 58.643922 91.875 30 C 91.875 1.3560784 68.643922 -21.875 40 -21.875 Z"</span>> <svg <span class="hljs-variable" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">xmlns=</span><span class="hljs-string" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);">"/"</span> <span class="hljs-variable" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">width=</span><span class="hljs-string" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);">"100%"</span> <span class="hljs-variable" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">height=</span><span class="hljs-string" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);">"100%"</span> <span class="hljs-variable" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">viewBox=</span><span class="hljs-string" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);">"0 0 80 60"</span> <span class="hljs-variable" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">preserveAspectRatio=</span><span class="hljs-string" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);">"xMidYMid slice"</span>> <path <span class="hljs-variable" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">d=</span><span class="hljs-string" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);">"M40,30 c 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 Z"</span>/></svg></div></code> |
SVG 用于描述二维矢量图形的一种图形格式，当然它的性能也是不错的。
在CSS文件中增加以下代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | <code style="-webkit-print-color-adjust: exact; font-family: Monaco, 'Andale Mono', 'Courier New', monospace; color: rgb(115, 115, 115); padding: 0px; font-size: 14px; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px;"><span class="hljs-comment" style="-webkit-print-color-adjust: exact; color: rgb(142, 144, 140);">/* 动画选项 */</span><span class="hljs-class" style="-webkit-print-color-adjust: exact;">.animated</span> <span class="hljs-rules" style="-webkit-print-color-adjust: exact;">{ <span class="hljs-rule" style="-webkit-print-color-adjust: exact;"><span class="hljs-attribute" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">-webkit-animation-duration</span>:<span class="hljs-value" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);"> .<span class="hljs-number" style="-webkit-print-color-adjust: exact; color: rgb(245, 135, 31);">5s</span></span></span>; <span class="hljs-rule" style="-webkit-print-color-adjust: exact;"><span class="hljs-attribute" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">-moz-animation-duration</span>:<span class="hljs-value" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);"> .<span class="hljs-number" style="-webkit-print-color-adjust: exact; color: rgb(245, 135, 31);">5s</span></span></span>; <span class="hljs-rule" style="-webkit-print-color-adjust: exact;"><span class="hljs-attribute" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">-o-animation-duration</span>:<span class="hljs-value" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);"> .<span class="hljs-number" style="-webkit-print-color-adjust: exact; color: rgb(245, 135, 31);">5s</span></span></span>; <span class="hljs-rule" style="-webkit-print-color-adjust: exact;"><span class="hljs-attribute" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">animation-duration</span>:<span class="hljs-value" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);"> .<span class="hljs-number" style="-webkit-print-color-adjust: exact; color: rgb(245, 135, 31);">5s</span></span></span>; <span class="hljs-rule" style="-webkit-print-color-adjust: exact;"><span class="hljs-attribute" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">-webkit-animation-fill-mode</span>:<span class="hljs-value" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);"> both</span></span>; <span class="hljs-rule" style="-webkit-print-color-adjust: exact;"><span class="hljs-attribute" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">-moz-animation-fill-mode</span>:<span class="hljs-value" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);"> both</span></span>; <span class="hljs-rule" style="-webkit-print-color-adjust: exact;"><span class="hljs-attribute" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">-o-animation-fill-mode</span>:<span class="hljs-value" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);"> both</span></span>; <span class="hljs-rule" style="-webkit-print-color-adjust: exact;"><span class="hljs-attribute" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">animation-fill-mode</span>:<span class="hljs-value" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);"> both</span></span></span>}<span class="hljs-class" style="-webkit-print-color-adjust: exact;">.container</span> <span class="hljs-rules" style="-webkit-print-color-adjust: exact;">{ <span class="hljs-rule" style="-webkit-print-color-adjust: exact;"><span class="hljs-attribute" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">display</span>:<span class="hljs-value" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);"> none</span></span>;<span class="hljs-rule" style="-webkit-print-color-adjust: exact;">}</span></span><span class="hljs-class" style="-webkit-print-color-adjust: exact;">.container</span><span class="hljs-class" style="-webkit-print-color-adjust: exact;">.show</span> <span class="hljs-rules" style="-webkit-print-color-adjust: exact;">{ <span class="hljs-rule" style="-webkit-print-color-adjust: exact;"><span class="hljs-attribute" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">display</span>:<span class="hljs-value" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);"> block</span></span>;<span class="hljs-rule" style="-webkit-print-color-adjust: exact;">}</span></span><span class="hljs-comment" style="-webkit-print-color-adjust: exact; color: rgb(142, 144, 140);">/* 覆盖页面 */</span><span class="hljs-class" style="-webkit-print-color-adjust: exact;">.pageload-overlay</span> <span class="hljs-rules" style="-webkit-print-color-adjust: exact;">{ <span class="hljs-rule" style="-webkit-print-color-adjust: exact;"><span class="hljs-attribute" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">position</span>:<span class="hljs-value" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);"> fixed</span></span>; <span class="hljs-rule" style="-webkit-print-color-adjust: exact;"><span class="hljs-attribute" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">width</span>:<span class="hljs-value" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);"> <span class="hljs-number" style="-webkit-print-color-adjust: exact; color: rgb(245, 135, 31);">100%</span></span></span>; <span class="hljs-rule" style="-webkit-print-color-adjust: exact;"><span class="hljs-attribute" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">height</span>:<span class="hljs-value" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);"> <span class="hljs-number" style="-webkit-print-color-adjust: exact; color: rgb(245, 135, 31);">100%</span></span></span>; <span class="hljs-rule" style="-webkit-print-color-adjust: exact;"><span class="hljs-attribute" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">top</span>:<span class="hljs-value" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);"> <span class="hljs-number" style="-webkit-print-color-adjust: exact; color: rgb(245, 135, 31);">0</span></span></span>; <span class="hljs-rule" style="-webkit-print-color-adjust: exact;"><span class="hljs-attribute" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">left</span>:<span class="hljs-value" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);"> <span class="hljs-number" style="-webkit-print-color-adjust: exact; color: rgb(245, 135, 31);">0</span></span></span>; <span class="hljs-rule" style="-webkit-print-color-adjust: exact;"><span class="hljs-attribute" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">visibility</span>:<span class="hljs-value" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);"> hidden</span></span>;<span class="hljs-rule" style="-webkit-print-color-adjust: exact;">}</span></span><span class="hljs-class" style="-webkit-print-color-adjust: exact;">.pageload-overlay</span><span class="hljs-class" style="-webkit-print-color-adjust: exact;">.show</span> <span class="hljs-rules" style="-webkit-print-color-adjust: exact;">{ <span class="hljs-rule" style="-webkit-print-color-adjust: exact;"><span class="hljs-attribute" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">visibility</span>:<span class="hljs-value" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);"> visible</span></span>;<span class="hljs-rule" style="-webkit-print-color-adjust: exact;">}</span></span><span class="hljs-class" style="-webkit-print-color-adjust: exact;">.pageload-overlay</span> <span class="hljs-tag" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">svg</span> <span class="hljs-rules" style="-webkit-print-color-adjust: exact;">{ <span class="hljs-rule" style="-webkit-print-color-adjust: exact;"><span class="hljs-attribute" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">position</span>:<span class="hljs-value" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);"> absolute</span></span>; <span class="hljs-rule" style="-webkit-print-color-adjust: exact;"><span class="hljs-attribute" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">top</span>:<span class="hljs-value" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);"> <span class="hljs-number" style="-webkit-print-color-adjust: exact; color: rgb(245, 135, 31);">0</span></span></span>; <span class="hljs-rule" style="-webkit-print-color-adjust: exact;"><span class="hljs-attribute" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">left</span>:<span class="hljs-value" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);"> <span class="hljs-number" style="-webkit-print-color-adjust: exact; color: rgb(245, 135, 31);">0</span></span></span>; <span class="hljs-rule" style="-webkit-print-color-adjust: exact;"><span class="hljs-attribute" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">pointer-events</span>:<span class="hljs-value" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);"> none</span></span>;<span class="hljs-rule" style="-webkit-print-color-adjust: exact;">}</span></span><span class="hljs-class" style="-webkit-print-color-adjust: exact;">.pageload-overlay</span> <span class="hljs-tag" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">svg</span> <span class="hljs-tag" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">path</span> <span class="hljs-rules" style="-webkit-print-color-adjust: exact;">{ <span class="hljs-rule" style="-webkit-print-color-adjust: exact;"><span class="hljs-attribute" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">fill</span>:<span class="hljs-value" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);"> <span class="hljs-hexcolor" style="-webkit-print-color-adjust: exact;">#fff</span></span></span>;<span class="hljs-rule" style="-webkit-print-color-adjust: exact;">}</span></span><span class="hljs-class" style="-webkit-print-color-adjust: exact;">.pageload-overlay</span><span class="hljs-pseudo" style="-webkit-print-color-adjust: exact;">::after</span>,<span class="hljs-class" style="-webkit-print-color-adjust: exact;">.pageload-overlay</span><span class="hljs-pseudo" style="-webkit-print-color-adjust: exact;">::before</span> <span class="hljs-rules" style="-webkit-print-color-adjust: exact;">{ <span class="hljs-rule" style="-webkit-print-color-adjust: exact;"><span class="hljs-attribute" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">content</span>:<span class="hljs-value" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);"> <span class="hljs-string" style="-webkit-print-color-adjust: exact;">''</span></span></span>; <span class="hljs-rule" style="-webkit-print-color-adjust: exact;"><span class="hljs-attribute" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">position</span>:<span class="hljs-value" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);"> fixed</span></span>; <span class="hljs-rule" style="-webkit-print-color-adjust: exact;"><span class="hljs-attribute" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">width</span>:<span class="hljs-value" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);"> <span class="hljs-number" style="-webkit-print-color-adjust: exact; color: rgb(245, 135, 31);">20px</span></span></span>; <span class="hljs-rule" style="-webkit-print-color-adjust: exact;"><span class="hljs-attribute" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">height</span>:<span class="hljs-value" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);"> <span class="hljs-number" style="-webkit-print-color-adjust: exact; color: rgb(245, 135, 31);">20px</span></span></span>; <span class="hljs-rule" style="-webkit-print-color-adjust: exact;"><span class="hljs-attribute" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">top</span>:<span class="hljs-value" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);"> <span class="hljs-number" style="-webkit-print-color-adjust: exact; color: rgb(245, 135, 31);">50%</span></span></span>; <span class="hljs-rule" style="-webkit-print-color-adjust: exact;"><span class="hljs-attribute" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">left</span>:<span class="hljs-value" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);"> <span class="hljs-number" style="-webkit-print-color-adjust: exact; color: rgb(245, 135, 31);">50%</span></span></span>; <span class="hljs-rule" style="-webkit-print-color-adjust: exact;"><span class="hljs-attribute" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">margin</span>:<span class="hljs-value" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);"> -<span class="hljs-number" style="-webkit-print-color-adjust: exact; color: rgb(245, 135, 31);">10px</span> <span class="hljs-number" style="-webkit-print-color-adjust: exact; color: rgb(245, 135, 31);">0</span> <span class="hljs-number" style="-webkit-print-color-adjust: exact; color: rgb(245, 135, 31);">0</span> -<span class="hljs-number" style="-webkit-print-color-adjust: exact; color: rgb(245, 135, 31);">10px</span></span></span>; <span class="hljs-rule" style="-webkit-print-color-adjust: exact;"><span class="hljs-attribute" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">border-radius</span>:<span class="hljs-value" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);"> <span class="hljs-number" style="-webkit-print-color-adjust: exact; color: rgb(245, 135, 31);">50%</span></span></span>; <span class="hljs-rule" style="-webkit-print-color-adjust: exact;"><span class="hljs-attribute" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">visibility</span>:<span class="hljs-value" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);"> hidden</span></span>; <span class="hljs-rule" style="-webkit-print-color-adjust: exact;"><span class="hljs-attribute" style="-webkit-print-color-adjust: exact; color: rgb(200, 40, 41);">opacity</span>:<span class="hljs-value" style="-webkit-print-color-adjust: exact; color: rgb(113, 140, 0);"> <span class="hljs-number" style="-webkit-print-color-adjust: exact; color: rgb(245, 135, 31);">0</span></span></span>; <span class="hljs-rule" style="-webkit-prin
|