Table of Contents
Let’s show it
" >1. A "scrolling" loading
" >2. A "Block Vanishing Technique" loading
" >3. An "Invincible Wind and Fire Scythe" is loaded
" >4. A "padding" load
" >5. A "Yinlang" load
" >6. A "Sound Wave" is loaded
" >7. An "Invincible Wind and Fire Circle" loaded with
" >9. A "glue" loading
" >10. A "block against collision" loading
" >11. A "Switch" loading
Home Web Front-end CSS Tutorial 10+ CSS loading effects to make your project shine, come and collect them! !

10+ CSS loading effects to make your project shine, come and collect them! !

Oct 19, 2021 am 11:27 AM
css loading load

This article will share with you 10 loading loading effects, guaranteed to make your project shine. I hope it will be helpful to everyone, come and collect it! !

10+ CSS loading effects to make your project shine, come and collect them! !

#I believe that everyone often uses loading animation, but the loading style of most component libraries is too simple.

This time I collected 10 high-end loading animation effects for the front-end workers! ! Just copy it and use it directly! !

Let’s show it

1. A "scrolling" loading

The jumping and rotating blocks plus the gradient The shadow simply forms a picture of an object rolling

10+ CSS loading effects to make your project shine, come and collect them! !##

1

2

<!-- loading.html -->

<div class="boxLoading"></div>

Copy after login

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

/* loading.css */

.boxLoading { 

  width: 50px;

  height: 50px;

  margin: auto;

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

}

.boxLoading:before {

  content: &#39;&#39;;

  width: 50px;

  height: 5px;

  background: #fff;

  opacity: 0.7;

  position: absolute;

  top: 59px;

  left: 0;

  border-radius: 50%;

  animation: shadow .5s linear infinite;

}

.boxLoading:after {

  content: &#39;&#39;;

  width: 50px;

  height: 50px;

  background: #e04960;

  animation: animate .5s linear infinite;

  position: absolute;

  top: 0;

  left: 0;

  border-radius: 3px;

}

@keyframes animate {

  17% {

    border-bottom-right-radius: 3px;

  }

  25% {

    transform: translateY(9px) rotate(22.5deg);

  }

  50% {

    transform: translateY(18px) scale(1, .9) rotate(45deg);

    border-bottom-right-radius: 40px;

  }

  75% {

    transform: translateY(9px) rotate(67.5deg);

  }

  100% {

    transform: translateY(0) rotate(90deg);

  }

}

@keyframes shadow {

  0%, 100% {

    transform: scale(1, 1);

  }

  50% {

    transform: scale(1.2, 1);

  }

}

Copy after login

Author: Dicson

2. A "Block Vanishing Technique" loading

#What will happen when each disappearing block is integrated and different disappearing times are set?

10+ CSS loading effects to make your project shine, come and collect them! !

1

2

3

4

5

6

7

8

9

10

11

12

<!-- loading.html -->

<div class="sk-cube-grid">

    <div class="sk-cube sk-cube-1"></div>

    <div class="sk-cube sk-cube-2"></div>

    <div class="sk-cube sk-cube-3"></div>

    <div class="sk-cube sk-cube-4"></div>

    <div class="sk-cube sk-cube-5"></div>

    <div class="sk-cube sk-cube-6"></div>

    <div class="sk-cube sk-cube-7"></div>

    <div class="sk-cube sk-cube-8"></div>

    <div class="sk-cube sk-cube-9"></div>

  </div>

Copy after login

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

/* loading.css */

.sk-cube-grid {

  width: 4em;

  height: 4em;

  margin: auto;

}

.sk-cube {

  width: 33%;

  height: 33%;

  background-color: #e04960;

  float: left;

  animation: sk-cube-grid-scale-delay 1.3s infinite ease-in-out;

}

.sk-cube-1 {

  animation-delay: 0.2s;

}

.sk-cube-2 {

  animation-delay: 0.3s;

}

.sk-cube-3 {

  animation-delay: 0.4s;

}

.sk-cube-4 {

  animation-delay: 0.1s;

}

.sk-cube-5 {

  animation-delay: 0.2s;

}

.sk-cube-6 {

  animation-delay: 0.3s;

}

.sk-cube-7 {

  animation-delay: 0s;

}

.sk-cube-8 {

  animation-delay: 0.1s;

}

.sk-cube-9 {

  animation-delay: 0.2s;

}

@keyframes sk-cube-grid-scale-delay {

  0%, 70%, 100% {

    transform: scale3D(1,1,1);

  }

  35%           {

    transform: scale3D(0,0,1);

  }

}

Copy after login

Author: Nicola Pressi

3. An "Invincible Wind and Fire Scythe" is loaded

What phenomenon will occur if four sickles are slashed back and forth?

10+ CSS loading effects to make your project shine, come and collect them! !

1

2

3

4

5

6

7

8

9

<!-- loading.html -->

<div class="spinner">

  <div class="outer">

    <div class="inner tl"></div>

    <div class="inner tr"></div>

    <div class="inner br"></div>

    <div class="inner bl"></div>

  </div>

</div>

Copy after login

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

/* loading.css */

.spinner {

  position: absolute;

  width: 128px;

  height: 128px;

  top: calc(50% - 64px);

  left: calc(50% - 64px);

  transform: perspective(206px) rotateX(45deg);

}

 

.outer {

  box-sizing: border-box;

  animation: spin 3s linear infinite;

  height: 100%;

}

 

.inner {

  position: absolute;

  border-radius: 50%;

  width: 64px;

  height: 64px;

  animation: spin 1.8s ease-in-out infinite;

}

.inner.tl {

  top: 0;

  left: 0;

  border-top: 2px solid #531430;

  border-left: 4px solid #531430;

}

.inner.tr {

  top: 0;

  right: 0;

  border-top: 2px solid #e04960;

  border-right: 4px solid #e04960;

}

.inner.br {

  bottom: 0;

  right: 0;

  border-bottom: 2px solid #531430;

  border-right: 4px solid #531430;

}

.inner.bl {

  bottom: 0;

  left: 0;

  border-bottom: 2px solid #e04960;

  border-left: 4px solid #e04960;

}

@keyframes spin {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

}

Copy after login

Author: Martin van Driel

4. A "padding" load

Simple square rotation and internal height control can achieve the filling effect~

10+ CSS loading effects to make your project shine, come and collect them! !

1

2

3

4

<!-- loading.html -->

<span class="loading">

  <span class="loading-inner"></span>

</span>

Copy after login

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

/* loading.css */

.loading {

  display: inline-block;

  width: 30px;

  height: 30px;

  position: relative;

  border: 4px solid #e04960;

  animation: loader 4s infinite ease;

}

.loading-inner {

  vertical-align: top;

  display: inline-block;

  width: 100%;

  background-color: #e04960;

  animation: loader-inner 4s infinite ease-in;

}

@keyframes loader {

  0% {

    transform: rotate(0deg);

  }

  25% {

    transform: rotate(180deg);

  }

  50% {

    transform: rotate(180deg);

  }

  75% {

    transform: rotate(360deg);

  }

  100% {

    transform: rotate(360deg);

  }

}

@keyframes loader-inner {

  0% {

    height: 0%;

  

  25% {

    height: 0%;

  }

  50% {

    height: 100%;

  }

  75% {

    height: 100%;

  }

  100% {

    height: 0%;

  }

}

Copy after login

Author: Josh

5. A "Yinlang" load

1 element scaling is very simple, what will happen to the 15?

10+ CSS loading effects to make your project shine, come and collect them! !

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!-- loading.html -->

<div class="loader">

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  <span></span>

</div>

Copy after login

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

83

/* loading.css */

.loader {

  position: absolute;

  top: 0px;

  bottom: 0px;

  left: 0px;

  right: 0px;

  margin: auto;

  width: 175px;

  height: 100px;

}

.loader span {

  display: block;

  background: #e04960;

  width: 7px;

  height: 100%;

  border-radius: 14px;

  margin-right: 5px;

  float: left;

}

.loader span:last-child {

  margin-right: 0px;

}

.loader span:nth-child(1) {

  animation: load 2.5s 1.4s infinite linear;

}

.loader span:nth-child(2) {

  animation: load 2.5s 1.2s infinite linear;

}

.loader span:nth-child(3) {

  animation: load 2.5s 1s infinite linear;

}

.loader span:nth-child(4) {

  animation: load 2.5s 0.8s infinite linear;

}

.loader span:nth-child(5) {

  animation: load 2.5s 0.6s infinite linear;

}

.loader span:nth-child(6) {

  animation: load 2.5s 0.4s infinite linear;

}

.loader span:nth-child(7) {

  animation: load 2.5s 0.2s infinite linear;

}

.loader span:nth-child(8) {

  animation: load 2.5s 0s infinite linear;

}

.loader span:nth-child(9) {

  animation: load 2.5s 0.2s infinite linear;

}

.loader span:nth-child(10) {

  animation: load 2.5s 0.4s infinite linear;

}

.loader span:nth-child(11) {

  animation: load 2.5s 0.6s infinite linear;

}

.loader span:nth-child(12) {

  animation: load 2.5s 0.8s infinite linear;

}

.loader span:nth-child(13) {

  animation: load 2.5s 1s infinite linear;

}

.loader span:nth-child(14) {

  animation: load 2.5s 1.2s infinite linear;

}

.loader span:nth-child(15) {

  animation: load 2.5s 1.4s infinite linear;

}

@keyframes load {

  0% {

    background: #531430;

    transform: scaleY(0.08);

  }

  50% {

    background: #e04960;

         

   transform: scaleY(1);

  }

  100% {

    background: #531430;   

    transform: scaleY(0.08);

  }

}

Copy after login

Author: Dicson

6. A "Sound Wave" is loaded

The combination of element transparency and height can also create unique effects

10+ CSS loading effects to make your project shine, come and collect them! !

1

2

3

4

5

6

7

8

9

10

11

12

13

<!-- loading.html -->

<div class="bars">

  <div class="bar"></div>

  <div class="bar"></div>

  <div class="bar"></div>

  <div class="bar"></div>

  <div class="bar"></div>

  <div class="bar"></div>

  <div class="bar"></div>

  <div class="bar"></div>

  <div class="bar"></div>

  <div class="bar"></div>

</div>

Copy after login

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

/* loading.css */

.bars {

  height: 30px;

  left: 50%;

  margin: -30px 0 0 -20px;

  position: absolute;

  top: 60%;

  width: 40px;

}

.bar {

 background: #e04960;

  bottom: 1px;

  height: 3px;

  position: absolute;

  width: 3px;     

  animation: sound 0ms -800ms linear infinite alternate;

}

@keyframes sound {

  0% {

     opacity: .35;

      height: 3px;

  }

  100% {

      opacity: 1;      

      height: 28px;       

  }

}

.bar:nth-child(1)  { left: 1px; animation-duration: 474ms; }

.bar:nth-child(2)  { left: 5px; animation-duration: 433ms; }

.bar:nth-child(3)  { left: 9px; animation-duration: 407ms; }

.bar:nth-child(4)  { left: 13px; animation-duration: 458ms; }

.bar:nth-child(5)  { left: 17px; animation-duration: 400ms; }

.bar:nth-child(6)  { left: 21px; animation-duration: 427ms; }

.bar:nth-child(7)  { left: 25px; animation-duration: 441ms; }

.bar:nth-child(8)  { left: 29px; animation-duration: 419ms; }

.bar:nth-child(9)  { left: 33px; animation-duration: 487ms; }

.bar:nth-child(10) { left: 37px; animation-duration: 442ms; }

Copy after login

Author: El Alemaño

7. An "Invincible Wind and Fire Circle" loaded with

4 circles can actually produce a relatively repulsive effect?

10+ CSS loading effects to make your project shine, come and collect them! !

1

2

3

4

5

6

7

<!-- loading.html -->

<div class="loading">

  <div class="inner one"></div>

  <div class="inner two"></div>

  <div class="inner three"></div>

  <div class="inner four"></div>

</div>

Copy after login

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

/* loading.css */

.loading {

  position: absolute;

  top: calc(50% - 24px);

  left: calc(50% - 24px);

  width: 48px;

  height: 48px;

  border-radius: 50%;

  transform: perspective( 128px ) rotateX( 30deg );

}

.inner {

  position: absolute;

  box-sizing: border-box;

  width: 16px;

  height: 16px;

  background-color: #e04960;

  border-radius: 50%;

}

.inner.one {

  left: 0%;

  top: 0%;

  animation: move-right 1s ease-out infinite;

}

.inner.two {

  right: 0%;

  top: 0%;

  animation: move-down 1s ease-in-out infinite;

}

.inner.three {

  right: 0%;

  bottom: 0%;

  animation: move-left 1s ease-in-out infinite;

}

.inner.four {

  left: 0%;

  bottom: 0%;

  animation: move-up 1s ease-out infinite;

}

@keyframes move-right {

  0% {

    transform: translateX(0);

  }

  100% {

    transform: translateX(32px);

  }

}

@keyframes move-down {

  0% {

    transform: translateY();

  }

  100% {

    transform: translateY(32px);

  }

}

@keyframes move-left {

  0% {

    transform: translateX(0);

  }

  100% {

    transform: translateX(-32px);

  }

}

@keyframes move-up {

  0% {

    transform: translateY(0);

  }

  100% {

    transform: translateY(-32px);

  }

}

Copy after login

Author: Martin van Driel

8. A "marble" loading

The small marbles moving back and forth one by one can actually paint such a wonderful picture

10+ CSS loading effects to make your project shine, come and collect them! !

1

2

3

4

5

6

7

8

9

10

<!-- loading.html -->

<div class="container">

  <div class="ball"></div>

  <div class="ball"></div>

  <div class="ball"></div>

  <div class="ball"></div>

  <div class="ball"></div>

  <div class="ball"></div>

  <div class="ball"></div>

</div>

Copy after login

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

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

/* loading.css */

.container {

    width: 200px;

    height: 100px;

    margin: 0 auto;

}

.ball {

    width: 10px;

    height: 10px;

    margin: 10px auto;

    border-radius: 50px;

}

.ball:nth-child(1) {

    background: #e04960;

    -webkit-animation: right 1s infinite ease-in-out;

    -moz-animation: right 1s infinite ease-in-out;

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

}

.ball:nth-child(2) {

    background: #e04960;

    -webkit-animation: left 1.1s infinite ease-in-out;

    -moz-animation: left 1.1s infinite ease-in-out;

    animation: left 1.1s infinite ease-in-out;

}

.ball:nth-child(3) {

    background: #e04960;

    -webkit-animation: right 1.05s infinite ease-in-out;

    -moz-animation: right 1.05s infinite ease-in-out;

    animation: right 1.05s infinite ease-in-out;

}

.ball:nth-child(4) {

    background: #e04960;

    -webkit-animation: left 1.15s infinite ease-in-out;

    -moz-animation: left 1.15s infinite ease-in-out;

    animation: left 1.15s infinite ease-in-out;

}

.ball:nth-child(5) {

    background: #e04960;

    -webkit-animation: right 1.1s infinite ease-in-out;

    -moz-animation: right 1.1s infinite ease-in-out;

    animation: right 1.1s infinite ease-in-out;

}

.ball:nth-child(6) {

    background: #e04960;

    -webkit-animation: left 1.05s infinite ease-in-out;

    -moz-animation: left 1.05s infinite ease-in-out;

    animation: left 1.05s infinite ease-in-out;

}

.ball:nth-child(7) {

    background: #e04960;

    -webkit-animation: right 1s infinite ease-in-out;

    -moz-animation: right 1s infinite ease-in-out;

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

}

@-webkit-keyframes right {

    0% {

            -webkit-transform: translate(-15px);

    }

    50% {

            -webkit-transform: translate(15px);

    }

    100% {

            -webkit-transform: translate(-15px);

    }

}

@-webkit-keyframes left {

    0% {

            -webkit-transform: translate(15px);

    }

    50% {

            -webkit-transform: translate(-15px);

    }

    100% {

            -webkit-transform: translate(15px);

    }

}

@-moz-keyframes right {

    0% {

            -moz-transform: translate(-15px);

    }

    50% {

            -moz-transform: translate(15px);

    }

    100% {

            -moz-transform: translate(-15px);

    }

}

@-moz-keyframes left {

    0% {

            -moz-transform: translate(15px);

    }

    50% {

            -moz-transform: translate(-15px);

    }

    100% {

            -moz-transform: translate(15px);

    }

}

@keyframes right {

    0% {

            transform: translate(-15px);

    }

    50% {

            transform: translate(15px);

    }

    100% {

            transform: translate(-15px);

    }

}

@keyframes left {

    0% {

            transform: translate(15px);

    }

    50% {

            transform: translate(-15px);

    }

    100% {

            transform: translate(15px);

    }

}

Copy after login

Author: Richie

9. A "glue" loading

Each circle is glued and split to form a glue effect

10+ CSS loading effects to make your project shine, come and collect them! !

1

2

3

4

5

6

7

8

9

10

11

12

<!-- loading.html -->

<div class="loading">

</div>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

  <defs>

    <filter id="goo">

      <feGaussianBlur in="SourceGraphic" stdDeviation="6.3" result="blur" />

      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 14 -4" result="goo" />

      <feBlend in="SourceGraphic" in2="goo" />

    </filter>

  </defs>

</svg>

Copy after login

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

/* loading.css */

.loading {

  width: 166px;

  height: 166px;

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  -webkit-filter: url("#goo");

  filter: url("#goo");

}

.loading span {

  width: 100%;

  text-align: center;

  color: #e04960;

  font-weight: bold;

  text-transform: uppercase;

  font-size: 15px;

  letter-spacing: 1px;

  position: absolute;

  left: 1px;

  top: 46%;

}

.loading:before, .loading:after {

  content: &#39;&#39;;

  border-radius: 50%;

  background-color: #e04960;

  width: 26px;

  height: 26px;

  position: absolute;

  left: 72px;

  top: 8px;

  animation: rotate 6s linear;

  animation-iteration-count: infinite;

  transform-origin: 12px 76px;

}

.loading:before {

  box-shadow: 45px 19px 0px 0px #e04960, 62px 63px 0px 0px #e04960, 45px 107px 0px 0px #e04960, 0px 126px 0px 0px #e04960, -46px 107px 0px 0px #e04960, -63px 63px 0px 0px #e04960, -46px 19px 0px 0px #e04960;

}

.loading:after {

  animation-direction: reverse;

}

@keyframes rotate {

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

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

}

Copy after login

Author: Dicson

10. A "block against collision" loading

Clever use of displacement can also create the effect of collision and extrusion

10+ CSS loading effects to make your project shine, come and collect them! !

1

2

3

4

5

6

7

<!-- loading.html -->

<div class="loading">

  <div class="loading-square"></div>

  <div class="loading-square"></div>

  <div class="loading-square"></div>

  <div class="loading-square"></div>

</div>

Copy after login

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

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

/* loading.css */

.loader {

  display: block;

  position: relative;

  height: 20px;

  width: 86px;

}

.loading-square {

  position: absolute;

  height: 20px;

  width: 20px;

  top: 0;

}

.loading-square:nth-child(1) {

  left: 0;

  animation: square1 1.5s linear forwards infinite;

}

.loading-square:nth-child(2) {

  left: 22px;

  animation: square2 1.5s linear forwards infinite;

}

.loading-square:nth-child(3) {

  left: 44px;

  animation: square3 1.5s linear forwards infinite;

}

.loading-square:nth-child(4) {

  left: 66px;

  animation: square4 1.5s linear forwards infinite;

}

@keyframes square1 {

  0% {

    background-color: #97c900;

    transform: translate(0, 0);

  }

  9.09091% {

    transform: translate(0, calc(-100% - 2px));

    background-color: #97c900;

  }

  18.18182% {

    transform: translate(calc(100% + 2px), calc(-100% - 2px));

    background-color: #15668a;

  }

  27.27273% {

    transform: translate(calc(100% + 2px), 0);

  }

  100% {

    background-color: #15668a;

    transform: translate(calc(100% + 2px), 0);

  }

}

@keyframes square2 {

  0% {

    background-color: #15668a;

    transform: translate(0, 0);

  }

  18.18182% {

    transform: translate(0, 0);

  }

  27.27273% {

    transform: translate(0, calc(100% + 2px));

    background-color: #15668a;

  }

  36.36364% {

    transform: translate(calc(100% + 2px), calc(100% + 2px));

    background-color: #D53A33;

  }

  45.45455% {

    transform: translate(calc(100% + 2px), 0);

  }

  100% {

    background-color: #D53A33;

    transform: translate(calc(100% + 2px), 0);

  }

}

@keyframes square3 {

  0% {

    background-color: #D53A33;

    transform: translate(0, 0);

  }

  36.36364% {

    transform: translate(0, 0);

  }

  45.45455% {

    transform: translate(0, calc(-100% - 2px));

    background-color: #D53A33;

  }

  54.54545% {

    transform: translate(calc(100% + 2px), calc(-100% - 2px));

    background-color: #E79C10;

  }

  63.63636% {

    transform: translate(calc(100% + 2px), 0);

  }

  100% {

    background-color: #E79C10;

    transform: translate(calc(100% + 2px), 0);

  }

}

@keyframes square4 {

  0% {

    transform: translate(0, 0);

    background-color: #E79C10;

  }

  54.54545% {

    transform: translate(0, 0);

  }

  63.63636% {

    transform: translate(0, calc(100% + 2px));

    background-color: #E79C10;

  }

  72.72727% {

    background-color: #D53A33;

  }

  81.81818% {

    background-color: #15668a;

  }

  90.90909% {

    transform: translate(calc(-300% - 6px), calc(100% + 2px));

    background-color: #97c900;

  }

  100% {

    transform: translate(calc(-300% - 6px), 0);

    background-color: #97c900;

  }

}

Copy after login

Author: Paul Grant

11. A "Switch" loading

Students with Switch should be familiar with it. This is the loading in eshop

110+ CSS loading effects to make your project shine, come and collect them! !

1

2

3

4

5

6

7

8

9

10

11

12

<!-- loading.html -->

<div class="load">

  <div class="loading">

    <div class="loader__bar"></div>

    <div class="loader__bar loader__bar--delay-1"></div>

    <div class="loader__bar loader__bar--delay-2"></div>

    <div class="loader__bar loader__bar--delay-3"></div>

    <div class="loader__bar loader__bar--delay-4"></div>

    <div class="loader__bar loader__bar--delay-5"></div>

    <div>

  </div>

</div>

Copy after login

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

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

/* loading.css */

.load{

  width: 400px;

  height: 170px;

}

@keyframes loader {

  0%{

    background: #FF8919;

    width:0%;

  }20%{

    width:100%;

  }39%{

    background: #FF8919;

  }40%{

    background: #FFA54F;

    width: 0%

  }60%{

    width: 100%;

  }80%{

    width:0%;

  }100%{

    background: #FFA54F;

    width: 0%;

  }

}

@keyframes loaderAlt {

  0%{

    background: #FF7C00;

    width:100%;

  }19%{

    background: #FF7C00;

  }20%{

    background: #FF9834;

    width: 0%;

  }40%{

    width: 100%;

  }59%{

    background: #FF9834;

  }60%{

    background: #FF7C00;

    width: 0;

  }80%{

    width: 100%;

  }100%{

    background: #FF7C00;

    width: 100%

  }

}

.loading{

  display: flex;

  flex-direction: column;

  height: 100%;

  position: relative;

  width: 100%;

}

.loader__bar{

  display: flex;

  flex: 1;

  position: relative;

  width: 100%;

}

.loader__bar:before{

  animation: loader ease 8s infinite;

  animation-delay: 100ms;

  background: #FF7C00;

  background-size: 200% 200%;

  content: "";

  height:100%;

  width: 0%;

}

.loader__bar:after{

  animation: loaderAlt ease 8s infinite;

  animation-delay: 100ms;

  background: #FF7C00;

  background-size: 200% 200%;

  content: "";

  height: 100%;

  width: 100%;

}

.loader__bar--delay-1:before,

.loader__bar--delay-1:after{

  animation-delay: 200ms;

}

.loader__bar--delay-2:before,

.loader__bar--delay-2:after{

  animation-delay: 300ms;

}

.loader__bar--delay-3:before,

.loader__bar--delay-3:after{

  animation-delay: 400ms;

}

.loader__bar--delay-4:before,

.loader__bar--delay-4:after{

  animation-delay: 500ms;

}

.loader__bar--delay-5:before,

.loader__bar--delay-5:after{

  animation-delay: 600ms;

}

Copy after login

Author: Steve Meredith

For more programming-related knowledge, please visit:

Introduction to Programming! !

The above is the detailed content of 10+ CSS loading effects to make your project shine, come and collect them! !. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to resize bootstrap How to resize bootstrap Apr 07, 2025 pm 03:18 PM

To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-

How to insert pictures on bootstrap How to insert pictures on bootstrap Apr 07, 2025 pm 03:30 PM

There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.

How to use bootstrap button How to use bootstrap button Apr 07, 2025 pm 03:09 PM

How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text

How to set up the framework for bootstrap How to set up the framework for bootstrap Apr 07, 2025 pm 03:27 PM

To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.

How to write split lines on bootstrap How to write split lines on bootstrap Apr 07, 2025 pm 03:12 PM

There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.

The Roles of HTML, CSS, and JavaScript: Core Responsibilities The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

How to view the date of bootstrap How to view the date of bootstrap Apr 07, 2025 pm 03:03 PM

Answer: You can use the date picker component of Bootstrap to view dates in the page. Steps: Introduce the Bootstrap framework. Create a date selector input box in HTML. Bootstrap will automatically add styles to the selector. Use JavaScript to get the selected date.

How to use bootstrap in vue How to use bootstrap in vue Apr 07, 2025 pm 11:33 PM

Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.

See all articles