前言
现在web上线后首次加载会很慢，要5秒以上，并且在加载的过程中界面是白屏。因此想在白屏的时候放一个加载动画
实现步骤
1.添加以下<style>标签内容到<head>标签中
<style>.loading {display: flex;justify-content: center;align-items: center;margin: 0;position: absolute;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}.loader {border: 16px solid #f3f3f3;border-radius: 50%;border: 15px solid ;border-top: 16px solid blue;border-right: 16px solid white;border-bottom: 16px solid blue;border-left: 16px solid white;width: 120px;height: 120px;-webkit-animation: spin 2s linear infinite;animation: spin 2s linear infinite;}@-webkit-keyframes spin {0% {-webkit-transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);}}@keyframes spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}</style> |
2.添加动画到界面
添加以下代码到jjs代码前面
<div class="loading"><div class="loader"></div> </div> |
