css3-loading效果
阿新 • • 發佈：2018-11-07
loading效果：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>純CSS3 Loading載入動畫DEMO演示</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="content"> <h3>CSS3 Spinner & Loader animations</h3><div class="wrapp"> <div class="load-1"> <p>Loader 1a</p> <div class="k-line k-line1-1"></div> <div class="k-line k-line1-2"></div> <div class="k-line k-line1-3"></div> </div> </div> <div class="wrapp"> <div class="load-1"><p>Loader 1b</p> <div class="k-line k-line2-1" ></div> <div class="k-line k-line2-2" ></div> <div class="k-line k-line2-3" ></div> </div> </div> <div class="wrapp"> <div class="load-1"> <p>Loader 1c</p> <div class="k-line k-line3-1"></div> <div class="k-line k-line3-2" ></div> <div class="k-line k-line3-3" ></div> <div class="k-line k-line3-4" ></div> <div class="k-line k-line3-5" ></div> </div> </div> <div class="wrapp"> <div class="load-1"> <p>Loader 1d</p> <div class="k-line k-line4-1" ></div> <div class="k-line k-line4-2" ></div> <div class="k-line k-line4-3" ></div> <div class="k-line k-line4-4" ></div> <div class="k-line k-line4-5 "></div> </div> </div> <div class="wrapp"> <div class="load-2"> <p>Loader 2a</p> <div class="k-line k-line5-1" ></div> <div class="k-line k-line5-2" ></div> <div class="k-line k-line5-3" ></div> </div> </div> <div class="wrapp" style="width:250px"> <div class="load-2"> <p>Loader 2b</p> <div class="k-line k-line6-1" ></div> <div class="k-line k-line6-2" ></div> <div class="k-line k-line6-3" ></div> <div class="k-line k-line6-4" ></div> <div class="k-line k-line6-5" ></div> </div> </div> <div class="wrapp" style="width:250px"> <div class="load-2"> <p>Loader 2c</p> <div class="k-line k-line6b-1" ></div> <div class="k-line k-line6b-2" ></div> <div class="k-line k-line6b-3" ></div> <div class="k-line k-line6b-4" ></div> <div class="k-line k-line6b-5" ></div> </div> </div> <div class="wrapp"> <div class="load-3"> <p>Loader 3a</p> <div class="k-line k-line7-1" ></div> <div class="k-line k-line7-2" ></div> <div class="k-line k-line7-3" ></div> </div> </div> <div class="wrapp"> <div class="load-3"> <p>Loader 3b</p> <div class="k-line k-line8-1" ></div> <div class="k-line k-line8-2" ></div> <div class="k-line k-line8-3" ></div> </div> </div> <div class="wrapp"> <div class="load-3"> <p>Loader 3c</p> <div class="k-line k-line9-1" ></div> <div class="k-line k-line9-2" ></div> <div class="k-line k-line9-3" ></div> <div class="k-line k-line9-4" ></div> </div> </div> <div class="wrapp"> <div class="load-3"> <p>Loader 3d</p> <div class="k-line k-line9b-1" ></div> <div class="k-line k-line9b-2" ></div> <div class="k-line k-line9b-3" ></div> <div class="k-line k-line9b-4" ></div> <div class="k-line k-line9b-5" ></div> </div> </div> <div class="wrapp"> <div class="load-3"> <p>Loader 3e</p> <div class="k-line k-line11-1" ></div> <div class="k-line k-line11-2" ></div> <div class="k-line k-line11-3" ></div> <div class="k-line k-line11-4" ></div> <div class="k-line k-line11-5" ></div> </div> </div> <div class="wrapp" style="width:700px"> <div class="load-3"> <p>Loader 3f</p> <div class="k-line2 k-line12-1" ></div> <div class="k-line2 k-line12-2" ></div> <div class="k-line2 k-line12-3" ></div> <div class="k-line2 k-line12-4" ></div> <div class="k-line2 k-line12-5" ></div> <div class="k-line2 k-line12-6" ></div> <div class="k-line2 k-line12-7" ></div> <div class="k-line2 k-line12-8" ></div> </div> </div> <div class="wrapp"> <!-- Loader 4 don't work on firefox because of the border-radius and the "dashed" style. --> <div class="load-4"> <p>Loader 4</p> <div class="k-ring-1" ></div> </div> </div> <div class="wrapp"> <div class="load-5"> <p>Loader 5a</p> <div class="k-ring-2" > <div class="k-ball-holder"> <div class="k-ball1a" ></div> </div> </div> </div> </div> <div class="wrapp"> <div class="load-5"> <p>Loader 5b</p> <div class="k-ring-2" style="border-color:#FFFFFF;"> <div class="k-ball-holder"> <div class="k-ball1b" ></div> <div class="k-ball2a" ></div> </div> </div> </div> </div> <div class="wrapp"> <div class="load-5"> <p>Loader 5c</p> <div class="k-ring-2" style="border-color:#3F51B5;"> <div class="k-ball-holder2"> <div class="k-ball1c" ></div> <div class="k-ball3" ></div> <div class="k-ball4" ></div> </div> </div> </div> </div> <div class="wrapp"> <div class="load-5"> <p>Loader 5d</p> <div class="k-ring-2" style="border-color:#000000;"> <div class="k-ball-holder2"> <div class="k-ball1d" ></div> <div class="k-ball2b" ></div> <div class="k-ball5a" ></div> <div class="k-ball6a" ></div> </div> </div> </div> </div> <div class="wrapp"> <div class="load-5"> <p>Loader 5e</p> <div class="k-ring-2" style="border:hidden;"> <div class="k-ball-holder2"> <div class="k-ball1e" ></div> <div class="k-ball2c" ></div> <div class="k-ball5b" ></div> <div class="k-ball6b" ></div> </div> </div> </div> </div> <div class="wrapp"> <div class="load-5"> <p>Loader 5f</p> <div class="k-ball-holder3"> <div class="k-ball7a" ></div> <div class="k-ball7b" ></div> <div class="k-ball7c" ></div> <div class="k-ball7d" ></div> </div> </div> </div> <div class="wrapp"> <div class="load-6"> <p>Loader 6</p> <div class="k-letter-holder"> <div class="k-letter-1 k-letter">L</div> <div class="k-letter-2 k-letter">o</div> <div class="k-letter-3 k-letter">a</div> <div class="k-letter-4 k-letter">d</div> <div class="k-letter-5 k-letter">i</div> <div class="k-letter-6 k-letter">n</div> <div class="k-letter-7 k-letter">g</div> <div class="k-letter-8 k-letter">.</div> <div class="k-letter-9 k-letter">.</div> <div class="k-letter-10 k-letter">.</div> </div> </div> </div> <div class="wrapp"> <div class="load-6"> <p>Loader 6</p> <div class="k-letter-holder"> <div class="k-letter-1b k-letter">L</div> <div class="k-letter-2b k-letter">o</div> <div class="k-letter-3b k-letter">a</div> <div class="k-letter-4b k-letter">d</div> <div class="k-letter-5b k-letter">i</div> <div class="k-letter-6b k-letter">n</div> <div class="k-letter-7b k-letter">g</div> <div class="k-letter-8b k-letter">.</div> <div class="k-letter-9b k-letter">.</div> <div class="k-letter-10b k-letter">.</div> </div> </div> </div> <div class="wrapp"> <div class="load-7"> <p>Loader 7a</p> <div class="k-square-holder"> <div class="k-square"></div> </div> </div> </div> <div class="wrapp"> <div class="load-7"> <p>Loader 7b</p> <div class="k-square-holder"> <div class="k-square"></div> </div> <div class="k-square-holder"> <div class="k-square2"></div> </div> </div> </div> <div class="wrapp"> <div class="load-7"> <p>Loader 7c</p> <div class='k-square-holder2'> <div class='k-square3 k-square3a'></div> <div class='k-square3 k-square3b'></div> <div class='k-square3 k-square3c'></div> <div class='k-square3 k-square3d'></div> </div> </div> </div> <div class="wrapp"> <div class="load-7"> <p>Loader 7d</p> <div class='k-square-holder2'> <div class='k-square4 k-square4a'></div> <div class='k-square4 k-square4b'></div> <div class='k-square4 k-square4c'></div> <div class='k-square4 k-square4d'></div> </div> </div> </div> <div class="wrapp"> <div class="load-8"> <p>Loader 8a</p> <div class="k-line k-line10" ></div> </div> </div> <div class="wrapp"> <div class="load-8"> <p>Loader 8b</p> <div class="k-line k-line10b"></div> </div> </div> <div class="wrapp"> <div class="load-9"> <p>Loader 9</p> <div class="k-spinner"> <div class="k-bubble-1"></div> <div class="k-bubble-2"></div> </div> </div> </div> <div class="wrapp"> <div class="load-10"> <p>Loader 10</p> <div class="k-bar"></div> </div> </div> <div class="wrapp"> <div class="load-11"> <p>Loader 11a</p> <div class="k-loader k-small"></div> </div> </div> <div class="wrapp"> <div class="load-12"> <p>Loader 11b</p> <div class="k-loader"></div> </div> </div> <div class="wrapp"> <div class="load-13"> <p>Loader 11c</p> <div class="k-loader k-circle-before"></div> </div> </div> <div class="wrapp"> <div class="load-14"> <p>Loader 11d</p> <div class="k-loader k-circle-after"></div> </div> </div> <div class="wrapp"> <div class="load-15"> <p>Loader 11e</p> <div class="k-loader k-circle"></div> </div> </div> </div> <div class="clear"></div> </body> </html>