前端如何实现后端运行进度_前端网页加载进度条的实现

1

2

3

4

5

6

7

css3动画进度条

8

9 .loading{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#fff;}

10 .pic{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:100px;height:40px;}

11 .pic i{float:left;margin:0 2px;width:6px;height:30px;background-color:indigo;transform:scaleY(0.4);animation:load 1.2s infinite;}

12 .pic i:nth-child(2){-webkit-animation-delay:0.1s;animation-delay:0.1s;}

13 .pic i:nth-child(3){-webkit-animation-delay:0.2s;animation-delay:0.2s;}

14 .pic i:nth-child(4){-webkit-animation-delay:0.3s;animation-delay:0.3s;}

15 .pic i:nth-child(5){-webkit-animation-delay:0.4s;animation-delay:0.4s;}

16 .pic i:nth-child(6){-webkit-animation-delay:0.5s;animation-delay:0.5s;}

17 @-webkit-keyframes load{

18 0%,40%,100%{-webkit-transform:scaleY(0.4);transform:scaleY(0.4)}

19 20%{-webkit-transform:scaleY(1);transform:scaleY(1)}

20 }21 @keyframes load{

22 0%,40%,100%{-webkit-transform:scaleY(0.4);transform:scaleY(0.4)}

23 20%{-webkit-transform:scaleY(1);transform:scaleY(1)}

24 }25

26

27

28 document.onreadystatechange= function() {//页面状态发生改变时触发

29 if(document.readyState== "complete") {//页面加载完成时隐藏

30 $(".loading").fadeOut();31 }32 }33

34

35

36

37

38

39

40

41

42

43

44