Loading加载动画.rar_Loading加载动画

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>超炫酷的CSS3 Loading加载动画DEMO演示</title> <link rel="stylesheet" href="css/main.min.css"> <link rel="stylesheet" href="dist/css-loader.css"> </head> <body> <div id="loader"></div> <div class="htmleaf-container"> <div class="container"> <div class="row row--flex"> <div class="box box--full"> <h3 class="box__title">Default</h3> <div class="box__item"> <button id="loader-default" class="button">default</button> </div> <div class="box__item"> <button id="loader-default-half" class="button">half</button> </div> <div class="box__item"> <button id="loader-default-inverse" class="button">inverse</button> </div> <div class="box__item"> <button id="loader-default-text" class="button">w/ text</button> </div> <div class="box__item"> <button id="loader-default-blink" class="button">blink</button> </div> <div class="box__item"> <input type="text" id="custom-text" class="input" placeholder="custom text here"> <button id="loader-default-custom-text" class="button">custom text</button> </div> </div> <div class="box box--full"> <h3 class="box__title">Bar</h3> <div class="box__item"> <button id="loader-bar" class="button">default</button> </div> <div class="box__item"> <button id="loader-bar-rounded" class="button">rounded</button> </div> <div class="box__item"> <button id="loader-bar-text" class="button">w/ text</button> </div> <div class="box__item"> <button id="loader-bar-blink" class="button">blink</button> </div> <div class="box__item"> <input type="text" id="bar-custom-text" class="input" placeholder="custom text here"> <button id="loader-bar-custom-text" class="button">custom text</button> </div> </div> <div class="box"> <h3 class="box__title">Border</h3> <div class="box__item"> <button id="loader-border" class="button">default</button> </div> <div class="box__item"> <button id="loader-border-text" class="button">w/ text</button> </div> <div class="box__item"> <button id="loader-border-blink" class="button">blink</button> </div> <div class="box__item"> <input type="text" id="border-custom-text" class="input" placeholder="custom text here"> <button id="loader-border-custom-text" class="button">custom-text</button> </div> </div> <div class="box"> <h3 class="box__title">Double</h3> <div class="box__item"> <button id="loader-double" class="button">default</button> </div> </div> <div class="box"> <h3 class="box__title">clock</h3> <div class="box__item"> <button id="loader-clock" class="button">default</button> </div> </div> <div class="box"> <h3 class="box__title">Ball</h3> <div class="box__item"> <button id="loader-ball" class="button">default</button> </div> <div class="box__item"> <button id="loader-ball-shadow" class="button">shadow</button> </div> </div> <div class="box"> <h3 class="box__title">Smartphone</h3> <div class="box__item"> <button id="loader-smartphone" class="button">default</button> </div> <div class="box__item"> <button id="loader-smartphone-text" class="button">w/ text</button> </div> <div class="box__item"> <input type="text" id="smartphone-custom-text" class="input" placeholder="custom text here"> <button id="loader-smartphone-custom-text" class="button">custom text</button> </div> </div> </div> </div> </div> <script src="js/main.min.js"></script> <div style="text-align:center;clear:both;"> <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script> <script src="/follow.js" type="text/javascript"></script> </div> </body> </html>