6种CSS3炫酷预加载Loading

插件描述：6种CSS3炫酷预加载Loading，非常酷的纯CSS3炫酷预加载Loading指示器动画特效。这组loading指示器共6种效果，都是使用:before和:after伪元素，以及CSS帧动画来完成各种不同的预加载指示器动画。

实现方法

这是一组效果非常酷的纯CSS3炫酷预加载Loading指示器动画特效。这组loading指示器共6种效果，都是使用:before和:after伪元素，以及CSS帧动画来完成各种不同的预加载指示器动画。

使用方法

 音频波形Loading动画

HTML结构

使用5个空的<span>元素，每一个代表一条波形柱子。

1

2

3

4

5

6

7

<div id="preloader_1">

    <span></span>

    <span></span>

    <span></span>

    <span></span>

    <span></span>

</div>

CSS样式

音频波形Loading动画效果通过使每一条音频波形柱子的高度从5像素变化到30像素来完成。每一个span元素都被沿Y轴向下移动15像素，使动画动中心开始。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

#preloader_1{

    position:relative;

}

#preloader_1 span{

    display:block;

    bottom:0px;

    width: 9px;

    height: 5px;

    background:#9b59b6;

    position:absolute;

    animation: preloader_1 1.5s  infinite ease-in-out;

}  

#preloader_1 span:nth-child(2){

    left:11px;

    animation-delay: .2s;  

}

#preloader_1 span:nth-child(3){

    left:22px;

    animation-delay: .4s;

}

#preloader_1 span:nth-child(4){

    left:33px;

    animation-delay: .6s;

}

#preloader_1 span:nth-child(5){

    left:44px;

    animation-delay: .8s;

}

@keyframes preloader_1 {

    0% {height:5px;transform:translateY(0px);background:#9b59b6;}

    25% {height:30px;transform:translateY(15px);background:#3498db;}

    50% {height:5px;transform:translateY(0px);background:#9b59b6;}

    100% {height:5px;transform:translateY(0px);background:#9b59b6;}

}

通过分别为每一个span元素设置0.2秒的animation-delay动画延迟时间，使它们依次产生高度变化的动画效果。

 圆形变矩形Loading动画

HTML结构

圆形变矩形Loading动画使用4个空的<span>元素，每一个代表一个圆形/矩形。

1

2

3

4

5

6

<div id="preloader_2">

    <span></span>

    <span></span>

    <span></span>

    <span></span>

</div>

CSS样式

该loading指示器动画通过修改border-radius属性来实现。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

#preloader_2 { position: relative; left: 50%; width: 40px; height: 40px; }

#preloader_2 span { display: block; bottom: 0px; width: 20px; height: 20px; background: #9b59b6; position: absolute; }

#preloader_2 span:nth-child(1) { animation: preloader_2_1 1.5s infinite ease-in-out; }

#preloader_2 span:nth-child(2) { left: 20px; animation: preloader_2_2 1.5s infinite ease-in-out; }

#preloader_2 span:nth-child(3) { top: 0px; animation: preloader_2_3 1.5s infinite ease-in-out; }

#preloader_2 span:nth-child(4) { top: 0px; left: 20px; animation: preloader_2_4 1.5s infinite ease-in-out; }

 @-keyframes preloader_2_1 {

 0% {

-transform: translateX(0px) translateY(0px) rotate(0deg);

border-radius:0px;

}

 50% {

-transform: translateX(-20px) translateY(-10px) rotate(-180deg);

border-radius:20px;

background:#3498db;

}

 80% {

-transform: translateX(0px) translateY(0px) rotate(-360deg);

border-radius:0px;

}

 100% {

-transform: translateX(0px) translateY(0px) rotate(-360deg);

border-radius:0px;

}

}

@-keyframes preloader_2_2 {

 0% {

-transform: translateX(0px) translateY(0px) rotate(0deg);

border-radius:0px;

}

 50% {

-transform: translateX(20px) translateY(-10px) rotate(180deg);

border-radius:20px;

background:#f1c40f;

}

 80% {

-transform: translateX(0px) translateY(0px) rotate(360deg);

border-radius:0px;

}

 100% {

-transform: translateX(0px) translateY(0px) rotate(360deg);

border-radius:0px;

}

}

@-keyframes preloader_2_3 {

 0% {

-transform: translateX(0px) translateY(0px) rotate(0deg);

border-radius:0px;

}

 50% {

-transform: translateX(-20px) translateY(10px) rotate(-180deg);

border-radius:20px;

background:#2ecc71;

}

 80% {

-transform: translateX(0px) translateY(0px) rotate(-360deg);

border-radius:0px;

}

 100% {

-transform: translateX(0px) translateY(0px) rotate(-360deg);

border-radius:0px;

}

}

 @-keyframes preloader_2_4 {

 0% {

-transform: translateX(0px) translateY(0px) rotate(0deg);

border-radius:0px;

}

 50% {

-transform: translateX(20px) translateY(10px) rotate(180deg);

border-radius:20px;

background:#e74c3c;

}

 80% {

-transform: translateX(0px) translateY(0px) rotate(360deg);

border-radius:0px;

}

 100% {

-transform: translateX(0px) translateY(0px) rotate(360deg);

border-radius:0px;

}

}

 交叉图形变换Loading动画

HTML结构

该loading动画使用div元素的:before和:after为元素来制作。圆形变方形的动画通用是通过修改border-radius属性来实现。

1

<div id="preloader_3"></div>

CSS样式

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

#preloader_3{

    position:relative;

}

#preloader_3:before{

    width:20px;

    height:20px;

    border-radius:20px;

    background:blue;

    content:'';

    position:absolute;

    background:#9b59b6;

    animation: preloader_3_before 1.5s infinite ease-in-out;

}

   

#preloader_3:after{

    width:20px;

    height:20px;

    border-radius:20px;

    background:blue;

    content:'';

    position:absolute;

    background:#2ecc71;

    left:22px;

    animation: preloader_3_after 1.5s infinite ease-in-out;

} 

@keyframes preloader_3_before {

    0% {transform: translateX(0px) rotate(0deg)}

    50% {transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;}

      100% {transform: translateX(0px) rotate(0deg)}

}

@keyframes preloader_3_after {

    0% {transform: translateX(0px)}

    50% {transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;}

    100% {transform: translateX(0px)}

}

 蛇形Loading动画

HTML结构

该loading动画使用div元素的:before和:after为元素来制作。圆形变方形的动画通用是通过修改border-radius属性来实现。

1

2

3

4

5

6

7

<div id="preloader_4">

    <span></span>

    <span></span>

    <span></span>

    <span></span>

    <span></span>

</div>

CSS样式

该动画通过修改每一个span元素的Y轴位置，使它们下移10个像素，并使它们的颜色从蓝色变为黄色。阴影效果则是修改box-shadow的尺寸来完成。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

#preloader_4{

    position:relative;

}

#preloader_4 span{

    position:absolute;

    width:20px;

    height:20px;

    background:#3498db;

    opacity:0.5;

border-radius:20px;

    -animation: preloader_4 1s infinite ease-in-out;

   

}

#preloader_4 span:nth-child(2){

    left:20px;

    animation-delay: .2s;

}

#preloader_4 span:nth-child(3){

    left:40px;

    animation-delay: .4s;

}

#preloader_4 span:nth-child(4){

    left:60px;

    animation-delay: .6s;

}

#preloader_4 span:nth-child(5){

    left:80px;

    animation-delay: .8s;

}

@keyframes preloader_4 {

    0% {

      opacity: 0.3; 

      transform:translateY(0px);    

      box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}

    50% {

      opacity: 1; 

      transform: translateY(-10px); 

      background:#f1c40f;  

      box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}

    100%  {

      opacity: 0.3; 

      transform:translateY(0px); 

      box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}

}

 旋转轮盘Loading动画

HTML结构

该loading动画使用div元素来制作中心的圆形，并使用div元素的:after伪元素来制作两条旋转线效果。

1

<div id="preloader_5"></div>

CSS样式

两条旋转线使用:after伪元素来制作，通过给它设置50像素的顶部和底部border-radius俩创建这两条线。动画效果添加在div元素上，修改它的颜色以及通过transform: rotate()来使它进行旋转。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

#preloader5{

    position:relative;

    width:30px;

    height:30px;

    background:#3498db;

    border-radius:50px;

    animation: preloader_5 1.5s infinite linear;

}

#preloader5:after{

    position:absolute;

    width:50px;

    height:50px;

    border-top:10px solid #9b59b6;

    border-bottom:10px solid #9b59b6;

    border-left:10px solid transparent;

    border-right:10px solid transparent;

    border-radius:50px;

    content:'';

    top:-20px;

    left:-20px;

    animation: preloader_5_after 1.5s infinite linear;

}

@keyframes preloader_5 {

    0% {transform: rotate(0deg);}

    50% {transform: rotate(180deg);background:#2ecc71;}

    100% {transform: rotate(360deg);}

}

@keyframes preloader_5_after {

    0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}

    50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}

    100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}

}

 windows标志Loading动画

HTML结构

每一个span代表一个方块。

1

2

3

4

5

6

<div id="preloader_6">

    <span></span>

    <span></span>

    <span></span>

    <span></span>

</div>

CSS样式

所有的方块以网格进行布局。动画添加在主div元素上，使它产生旋转。另外i一个动画是使各个span元素不断的从100%缩放到50%。并通过animation-delay来控制各个span的动画延迟时间。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

#preloader_6{

    position:relative;

    width: 42px;

    height: 42px;

    animation: preloader_6 5s infinite linear;

}

#preloader_6 span{

    width:20px;

    height:20px;

    position:absolute;

    background:red;

    display:block;

    animation: preloader_6_span 1s infinite linear;

}

#preloader_6 span:nth-child(1){

  background:#2ecc71;

}

#preloader_6 span:nth-child(2){

  left:22px;

  background:#9b59b6;

  animation-delay: .2s;

}

#preloader_6 span:nth-child(3){

  top:22px;

  background:#3498db;

  animation-delay: .4s;

}

#preloader_6 span:nth-child(4){

  top:22px;

  left:22px;

  background:#f1c40f;

  animation-delay: .6s;

}

@keyframes preloader_6 {

    from {-ms-transform: rotate(0deg);}

    to {-ms-transform: rotate(360deg);}

}

@keyframes preloader_6_span {

   0% { transform:scale(1); }

   50% { transform:scale(0.5); }

   100% { transform:scale(1); }

}