给博客网站添加loading加载中动画代码

只需添加几行代码，就可以加强浏览者的体验,不在等待页面加载时感到枯燥，从而关闭网页，很多网站都会制作一个“网页正在加载中”的提示效果或显示加载进程，加载完成后提示消失，大部分都应用在网站的首页。当然网上很多教程这个只是参考！
html内的代码：

1. <div class=“loading”></div>

css代码：

1. .loading{
2. width: 300px;
3. height: 300px;
4. border:1px solid black;
5. position: relative;
6. }
7. .loading::before,.loading::after{
8. content: ”;
9. position: absolute;
10. width: 0px;
11. height: 0px;
12. background: black;
13. border-radius: 50%;
14. top:0;
15. bottom: 0;
16. left: 0;
17. right: 0;
18. margin: auto; /*上下左右都为0，再加上margin:auto; 就是自动居中*/
19. animation: s 1.5s linear infinite; /*加上s状态，状态开始到结束为1.5s*/
20. }
21. .loading::after{
22. animation-delay: 0.75s; /*第二个圆出现的时间*/
23. }
24. @keyframes s{
25. 0%{ /*初始状态*/
26. width: 0px;
27. height: 0px;
28. opacity: 1; /*透明度*/
29. }
30. 100%{ /*结束状态*/
31. width: 100px;
32. height: 100px;
33. opacity: 0;
34. }
35. }