<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"> <script type="text/javascript" src="js/jquery-1.9.1.js" ></script> <link rel="stylesheet" href="css/loadDodui.css" /> </head> <body> <script src="js/loadingDodui.js"></script> </body> </html>
loadDodui.css：
.loadDodui { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, .4); } .spinner { font-size: 20px; width: 1.5em; height: 1.5em; border-radius: 50%; box-shadow: inset 0 0 0 .1em rgba(234, 70, 142, .2); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .spinner i { position: absolute; clip: rect(0, 1.5em, 1.5em, 1em); width: 1.5em; height: 1.5em; animation: spinner-circle-clipper 1s ease-in-out infinite; } @keyframes spinner-circle-clipper { 0% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } } .spinner i:after { position: absolute; clip: rect(0, 1.5em, 1.5em, 1em); width: 1.5em; height: 1.5em; content: ''; animation: spinner-circle 1s ease-in-out infinite; border-radius: 50%; box-shadow: inset 0 0 0 .1em #ea468e; } @keyframes spinner-circle { 0% { transform: rotate(-180deg); } 100% { transform: rotate(180deg); } }
loadingDodui.js：
function loadingDodui(){ var htmlDodui=document.createElement("div"); var html2Dodui=document.createElement("div"); var chlidHtml=document.createElement("i"); htmlDodui.classList.add("loadDodui"); htmlDodui.appendChild(html2Dodui); html2Dodui.appendChild(chlidHtml); html2Dodui.classList.add("spinner"); htmlDodui.appendChild(html2Dodui); document.getElementsByTagName("body")[0].appendChild(htmlDodui) } loadingDodui()
实现的效果：静态图，我真的很想放gif，但我用手机录制效果时，视觉效果很模糊
