结合Font Awesome字体图标自定义loading效果
Font Awesome字体图标地址:http://www.fontawesome.com.cn/faicons/
使用javascript DOM操作动态添加loading HTML结构,通过JavaScript方法控制loading的显示与隐藏。
效果:
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>loading</title> <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"> <style> #mask-wrap { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.2); z-index: 10000; } #loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; color: #0066FF; text-align: center; } </style> </head> <body> <script src="js/jquery-1.10.2.min.js"></script> <script> $(function() { var $loading = ""; $loading = `<div id="mask-wrap"> <div id="loading"> <i class="fa fa-spinner fa-spin fa-3x"></i> <p>正在加载中...</p> </div> </div>` $("body").prepend($loading); // 显示 showLoading(true); }) // loading的显示与隐藏 function showLoading(open) { if (open == null) { open = true; } if (open) { $("#mask-wrap").show(); } else { $("#mask-wrap").hide(); } } </script> </body> </html>