[CSS]アニメーションの動きもデザインも新しくて気持ちいい！コピペで実装できるローディングスピナーのまとめ

  <section>
    <div class="loader loader-1">
      <div class="loader-outter"></div>
      <div class="loader-inner"></div>
    </div>
  </section>

1

2

3

4

5

6

</div>

</section>

    .loader-1 .loader-outter {
        position: absolute;
        border: 4px solid #f50057;
        border-left-color: transparent;
        border-bottom: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        -webkit-animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite;
        animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite;
    }
    
    .loader-1 .loader-inner {
        position: absolute;
        border: 4px solid #f50057;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        left: calc(50% - 20px);
        top: calc(50% - 20px);
        border-right: 0;
        border-top-color: transparent;
        -webkit-animation: loader-1-inner 1s cubic-bezier(.42, .61, .58, .41) infinite;
        animation: loader-1-inner 1s cubic-bezier(.42, .61, .58, .41) infinite;
    }

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

.loader-1 .loader-outter {

position: absolute;

border: 4px solid #f50057;

border-left-color: transparent;

border-bottom: 0;

width: 100%;

height: 100%;

border-radius: 50%;

-webkit-animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite;

animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite;

}

.loader-1 .loader-inner {

position: absolute;

border: 4px solid #f50057;

border-radius: 50%;

width: 40px;

height: 40px;

left: calc(50% - 20px);

top: calc(50% - 20px);

border-right: 0;

border-top-color: transparent;

-webkit-animation: loader-1-inner 1s cubic-bezier(.42, .61, .58, .41) infinite;

animation: loader-1-inner 1s cubic-bezier(.42, .61, .58, .41) infinite;

}

  <section>
    <div class="loader loader-2">
      <svg class="loader-star" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
            <polygon points="29.8 0.3 22.8 21.8 0 21.8 18.5 35.2 11.5 56.7 29.8 43.4 48.2 56.7 41.2 35.1 59.6 21.8 36.8 21.8 " fill="#18ffff" />
         </svg>
      <div class="loader-circles"></div>
    </div>
  </section>

1

2

3

4

5

6

7

8

</svg>

</div>

</section>

    .loader-2 .loader-star {
        position: static;
        width: 60px;
        height: 60px;
        -webkit-transform: scale(0.7);
            transform: scale(0.7);
        -webkit-animation: loader-2-star 1s ease alternate infinite;
        animation: loader-2-star 1s ease alternate infinite;
    }
    
    .loader-2 .loader-circles {
        width: 8px;
        height: 8px;
        background: #18ffff;
        border-radius: 50%;
        position: absolute;
        left: calc(50% - 4px);
        top: calc(50% - 4px);
        -webkit-transition: all 1s ease;
        transition: all 1s ease;
        -webkit-animation: loader-2-circles 1s ease-in-out alternate infinite;
        animation: loader-2-circles 1s ease-in-out alternate infinite;
    }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

.loader-2 .loader-star {

position: static;

width: 60px;

height: 60px;

-webkit-transform: scale(0.7);

transform: scale(0.7);

-webkit-animation: loader-2-star 1s ease alternate infinite;

animation: loader-2-star 1s ease alternate infinite;

}

.loader-2 .loader-circles {

width: 8px;

height: 8px;

background: #18ffff;

border-radius: 50%;

position: absolute;

left: calc(50% - 4px);

top: calc(50% - 4px);

-webkit-transition: all 1s ease;

transition: all 1s ease;

-webkit-animation: loader-2-circles 1s ease-in-out alternate infinite;

animation: loader-2-circles 1s ease-in-out alternate infinite;

}

  <section>
    <div class="loader loader-21">
      <div class="css-times times1"></div>
      <div class="css-times times2"></div>
      <div class="css-times times3"></div>
    </div>
  </section>

1

2

3

4

5

6

7

</div>

</section>

 .css-times {
        position: absolute;
        width: 100px;
        height: 90px;
    }
    
    .css-times:before,
    .css-times:after {
        position: absolute;
        content: "";
        left: 50px;
        top: 0;
        width: 2px;
        height: 65px;
        background: red;
        border-radius: 50px 50px 0 0;
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
        -webkit-transform-origin: 0 100%;
                transform-origin: 0 100%;
        -webkit-animation: times-background 1s ease-in-out infinite;
                animation: times-background 1s ease-in-out infinite;
    }
    
    .css-times:after {
        left: 0;
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
        -webkit-transform-origin: 100% 100%;
                transform-origin: 100% 100%;
    }
    
    .loader-21 {
        width: 100px;
    }
    
    .loader-21 .times1 {
        -webkit-animation: times-pulse 1s ease-in-out infinite;
                animation: times-pulse 1s ease-in-out infinite;
        left: 0;
    }
    
    .loader-21 .times2 {
        -webkit-animation: times-pulse 1s 0.2s ease-in-out infinite;
                animation: times-pulse 1s 0.2s ease-in-out infinite;
        left: 25px;
    }
    
    .loader-21 .times3 {
        -webkit-animation: times-pulse 1s 0.4s ease-in-out infinite;
                animation: times-pulse 1s 0.4s ease-in-out infinite;
        left: 50px;
    }

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

.css-times {

position: absolute;

width: 100px;

height: 90px;

}

.css-times:before,

.css-times:after {

position: absolute;

content: "";

left: 50px;

top: 0;

width: 2px;

height: 65px;

background: red;

border-radius: 50px 50px 0 0;

-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);

-webkit-transform-origin: 0 100%;

transform-origin: 0 100%;

-webkit-animation: times-background 1s ease-in-out infinite;

animation: times-background 1s ease-in-out infinite;

}

.css-times:after {

left: 0;

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

-webkit-transform-origin: 100% 100%;

transform-origin: 100% 100%;

}

.loader-21 {

width: 100px;

}

.loader-21 .times1 {

-webkit-animation: times-pulse 1s ease-in-out infinite;

animation: times-pulse 1s ease-in-out infinite;

left: 0;

}

.loader-21 .times2 {

-webkit-animation: times-pulse 1s 0.2s ease-in-out infinite;

animation: times-pulse 1s 0.2s ease-in-out infinite;

left: 25px;

}

.loader-21 .times3 {

-webkit-animation: times-pulse 1s 0.4s ease-in-out infinite;

animation: times-pulse 1s 0.4s ease-in-out infinite;

left: 50px;

}

  <section>
    <div class="loader loader-7">
      <div class="line line1"></div>
      <div class="line line2"></div>
      <div class="line line3"></div>
    </div>
  </section>

1

2

3

4

5

6

7

</div>

</section>

    .loader-7 .line {
        width: 8px;
        position: absolute;
        border-radius: 5px;
        bottom: 0;
        background: -webkit-gradient(linear, left top, left bottom, from(#1ee95d), to(#5714ce));
        background: -webkit-linear-gradient(top, #1ee95d, #5714ce);
        background: linear-gradient(to bottom, #1ee95d, #5714ce);
    }
    
    .loader-7 .line1 {
        left: 0;
        -webkit-animation: line-grow 0.5s ease alternate infinite;
        animation: line-grow 0.5s ease alternate infinite;
    }
    
    .loader-7 .line2 {
        left: 20px;
        -webkit-animation: line-grow 0.5s 0.2s ease alternate infinite;
        animation: line-grow 0.5s 0.2s ease alternate infinite;
    }
    
    .loader-7 .line3 {
        left: 40px;
        -webkit-animation: line-grow 0.5s 0.4s ease alternate infinite;
        animation: line-grow 0.5s 0.4s ease alternate infinite;
    }

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

.loader-7 .line {

width: 8px;

position: absolute;

border-radius: 5px;

bottom: 0;

background: -webkit-gradient(linear, left top, left bottom, from(#1ee95d), to(#5714ce));

background: -webkit-linear-gradient(top, #1ee95d, #5714ce);

background: linear-gradient(to bottom, #1ee95d, #5714ce);

}

.loader-7 .line1 {

left: 0;

-webkit-animation: line-grow 0.5s ease alternate infinite;

animation: line-grow 0.5s ease alternate infinite;

}

.loader-7 .line2 {

left: 20px;

-webkit-animation: line-grow 0.5s 0.2s ease alternate infinite;

animation: line-grow 0.5s 0.2s ease alternate infinite;

}

.loader-7 .line3 {

left: 40px;

-webkit-animation: line-grow 0.5s 0.4s ease alternate infinite;

animation: line-grow 0.5s 0.4s ease alternate infinite;

}

  <section>
    <div class="loader loader-18">
      <div class="css-star star1"></div>
      <div class="css-star star2"></div>
      <div class="css-star star3"></div>
      <div class="css-star star4"></div>
      <div class="css-star star5"></div>
      <div class="css-star star6"></div>
      <div class="css-star star7"></div>
      <div class="css-star star8"></div>
    </div>
  </section>

1

2

3

4

5

6

7

8

9

10

11

12

</div>

</section>

   .loader-18 .css-star {
        position: absolute;
        -webkit-transform: rotate(180deg) scale(0.5);
            transform: rotate(180deg) scale(0.5);
        opacity: 0.4;
    }
    
    .loader-18 .css-star,
    .loader-18 .css-star:before,
    .loader-18 .css-star:after {
        border-bottom-color: #00e676;
    }
    
    .loader-18 .star1 {
        top: -20px;
        left: 5px;
        -webkit-animation: star-crazyness 1s 0.125s ease infinite;
        animation: star-crazyness 1s 0.125s ease infinite;
    }
    
    .loader-18 .star2 {
        left: 25px;
        top: -10px;
        -webkit-animation: star-crazyness 1s 0.3s ease infinite;
        animation: star-crazyness 1s 0.3s ease infinite;
    }
    
    .loader-18 .star3 {
        left: 35px;
        top: 10px;
        -webkit-animation: star-crazyness 1s 0.425s ease infinite;
        animation: star-crazyness 1s 0.425s ease infinite;
    }
    
    .loader-18 .star4 {
        top: 30px;
        left: 27px;
        -webkit-animation: star-crazyness 1s 0.540s ease infinite;
        animation: star-crazyness 1s 0.540s ease infinite;
    }
    
    .loader-18 .star5 {
        top: 40px;
        left: 5px;
        -webkit-animation: star-crazyness 1s 0.665s ease infinite;
        animation: star-crazyness 1s 0.665s ease infinite;
    }
    
    .loader-18 .star6 {
        top: 30px;
        left: -15px;
        -webkit-animation: star-crazyness 1s 0.79s ease infinite;
        animation: star-crazyness 1s 0.79s ease infinite;
    }
    
    .loader-18 .star7 {
        top: 10px;
        left: -25px;
        -webkit-animation: star-crazyness 1s 0.9s ease infinite;
        animation: star-crazyness 1s 0.9s ease infinite;
    }
    
    .loader-18 .star8 {
        top: -10px;
        left: -15px;
        -webkit-animation: star-crazyness 1s 1s ease infinite;
        animation: star-crazyness 1s 1s ease infinite;
    }

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

.loader-18 .css-star {

position: absolute;

-webkit-transform: rotate(180deg) scale(0.5);

transform: rotate(180deg) scale(0.5);

opacity: 0.4;

}

.loader-18 .css-star,

.loader-18 .css-star:before,

.loader-18 .css-star:after {

border-bottom-color: #00e676;

}

.loader-18 .star1 {

top: -20px;

left: 5px;

-webkit-animation: star-crazyness 1s 0.125s ease infinite;

animation: star-crazyness 1s 0.125s ease infinite;

}

.loader-18 .star2 {

left: 25px;

top: -10px;

-webkit-animation: star-crazyness 1s 0.3s ease infinite;

animation: star-crazyness 1s 0.3s ease infinite;

}

.loader-18 .star3 {

left: 35px;

top: 10px;

-webkit-animation: star-crazyness 1s 0.425s ease infinite;

animation: star-crazyness 1s 0.425s ease infinite;

}

.loader-18 .star4 {

top: 30px;

left: 27px;

-webkit-animation: star-crazyness 1s 0.540s ease infinite;

animation: star-crazyness 1s 0.540s ease infinite;

}

.loader-18 .star5 {

top: 40px;

left: 5px;

-webkit-animation: star-crazyness 1s 0.665s ease infinite;

animation: star-crazyness 1s 0.665s ease infinite;

}

.loader-18 .star6 {

top: 30px;

left: -15px;

-webkit-animation: star-crazyness 1s 0.79s ease infinite;

animation: star-crazyness 1s 0.79s ease infinite;

}

.loader-18 .star7 {

top: 10px;

left: -25px;

-webkit-animation: star-crazyness 1s 0.9s ease infinite;

animation: star-crazyness 1s 0.9s ease infinite;

}

.loader-18 .star8 {

top: -10px;

left: -15px;

-webkit-animation: star-crazyness 1s 1s ease infinite;

animation: star-crazyness 1s 1s ease infinite;

}

  <section>
    <div class="loader loader-5">
      <div class="loader-pacman"></div>
    </div>
  </section>

1

2

3

4

5

</div>

</section>

    .loader-5 {
        border: 8px dotted rgba(255, 255, 0, 1);
        -webkit-transition: all 1s ease;
        transition: all 1s ease;
        -webkit-animation: dotted-spin 1s linear infinite;
        animation: dotted-spin 1s linear infinite;
        border-bottom-width: 1px;
        border-bottom-color: rgba(255, 255, 0, 0.3);
        border-left-width: 2px;
        border-left-color: rgba(255, 255, 0, 0.5);
        border-top-width: 3px;
        border-right-width: 4px;
        border-top-color: rgba(255, 255, 0, 0.7);
    }
    
    .loader-5 .loader-pacman,
    .loader-pacman {
        position: absolute;
        top: 40px;
        left: 25px;
        width: 0px;
        height: 0px;
        border-right: 12px solid transparent;
        border-top: 12px solid rgba(255, 255, 0, 1);
        border-left: 12px solid rgba(255, 255, 0, 1);
        border-bottom: 12px solid rgba(255, 255, 0, 1);
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
    }

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

.loader-5 {

border: 8px dotted rgba(255, 255, 0, 1);

-webkit-transition: all 1s ease;

transition: all 1s ease;

-webkit-animation: dotted-spin 1s linear infinite;

animation: dotted-spin 1s linear infinite;

border-bottom-width: 1px;

border-bottom-color: rgba(255, 255, 0, 0.3);

border-left-width: 2px;

border-left-color: rgba(255, 255, 0, 0.5);

border-top-width: 3px;

border-right-width: 4px;

border-top-color: rgba(255, 255, 0, 0.7);

}

.loader-5 .loader-pacman,

.loader-pacman {

position: absolute;

top: 40px;

left: 25px;

width: 0px;

height: 0px;

border-right: 12px solid transparent;

border-top: 12px solid rgba(255, 255, 0, 1);

border-left: 12px solid rgba(255, 255, 0, 1);

border-bottom: 12px solid rgba(255, 255, 0, 1);

border-top-left-radius: 12px;

border-top-right-radius: 12px;

border-bottom-left-radius: 12px;

border-bottom-right-radius: 12px;

}

  <section>
    <div class="loader loader-4"></div>
  </section>

1

2

3

</section>

    .loader-4 {
        border: 7px double #ff5722;
        -webkit-animation: ball-turn 1s linear infinite;
        animation: ball-turn 1s linear infinite;
    }
    
    .loader-4:before,
    .loader-4:after {
        content: "";
        position: absolute;
        width: 12px;
        height: 12px;
        background: #ff5722;
        border-radius: 50%;
        bottom: 0;
        right: 37px;
    }
    
    .loader-4:after {
        left: 37px;
        top: 0;
    }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

.loader-4 {

border: 7px double #ff5722;

-webkit-animation: ball-turn 1s linear infinite;

animation: ball-turn 1s linear infinite;

}

.loader-4:before,

.loader-4:after {

content: "";

position: absolute;

width: 12px;

height: 12px;

background: #ff5722;

border-radius: 50%;

bottom: 0;

right: 37px;

}

.loader-4:after {

left: 37px;

top: 0;

}

  <section>
    <div class="loader loader-17">
      <div class="css-square square1"></div>
      <div class="css-square square2"></div>
      <div class="css-square square3"></div>
      <div class="css-square square4"></div>
      <div class="css-square square5"></div>
      <div class="css-square square6"></div>
      <div class="css-square square7"></div>
      <div class="css-square square8"></div>
    </div>
  </section>

1

2

3

4

5

6

7

8

9

10

11

12

</div>

</section>

 .loader-17 .css-square { 
      position: absolute;
      top: 50%;
      width: 25px; height: 7px;
    background: white;
    box-shadow: 2px 2px 3px 0px black;
   }

    
    .loader-17 .square1 {
        left: 70px;
        -webkit-animation: dominos 1s 0.125s ease infinite;
        animation: dominos 1s 0.125s ease infinite;
    }
    
    .loader-17 .square2 {
        left: 60px;
        -webkit-animation: dominos 1s 0.3s ease infinite;
        animation: dominos 1s 0.3s ease infinite;
    }
    
    .loader-17 .square3 {
        left: 50px;
        -webkit-animation: dominos 1s 0.425s ease infinite;
        animation: dominos 1s 0.425s ease infinite;
    }
    
    .loader-17 .square4 {
        left: 40px;
        -webkit-animation: dominos 1s 0.540s ease infinite;
        animation: dominos 1s 0.540s ease infinite;
    }
    
    .loader-17 .square5 {
        left: 30px;
        -webkit-animation: dominos 1s 0.665s ease infinite;
        animation: dominos 1s 0.665s ease infinite;
    }
    
    .loader-17 .square6 {
        left: 20px;
        -webkit-animation: dominos 1s 0.79s ease infinite;
        animation: dominos 1s 0.79s ease infinite;
    }
    
    .loader-17 .square7 {
        left: 10px;
        -webkit-animation: dominos 1s 0.9s ease infinite;
        animation: dominos 1s 0.9s ease infinite;
    }
    
    .loader-17 .square8 {
        left: 0px;
        -webkit-animation: dominos 1s 1s ease infinite;
        animation: dominos 1s 1s ease infinite;
    }

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

.loader-17 .css-square {

position: absolute;

top: 50%;

width: 25px; height: 7px;

background: white;

box-shadow: 2px 2px 3px 0px black;

}

.loader-17 .square1 {

left: 70px;

-webkit-animation: dominos 1s 0.125s ease infinite;

animation: dominos 1s 0.125s ease infinite;

}

.loader-17 .square2 {

left: 60px;

-webkit-animation: dominos 1s 0.3s ease infinite;

animation: dominos 1s 0.3s ease infinite;

}

.loader-17 .square3 {

left: 50px;

-webkit-animation: dominos 1s 0.425s ease infinite;

animation: dominos 1s 0.425s ease infinite;

}

.loader-17 .square4 {

left: 40px;

-webkit-animation: dominos 1s 0.540s ease infinite;

animation: dominos 1s 0.540s ease infinite;

}

.loader-17 .square5 {

left: 30px;

-webkit-animation: dominos 1s 0.665s ease infinite;

animation: dominos 1s 0.665s ease infinite;

}

.loader-17 .square6 {

left: 20px;

-webkit-animation: dominos 1s 0.79s ease infinite;

animation: dominos 1s 0.79s ease infinite;

}

.loader-17 .square7 {

left: 10px;

-webkit-animation: dominos 1s 0.9s ease infinite;

animation: dominos 1s 0.9s ease infinite;

}

.loader-17 .square8 {

left: 0px;

-webkit-animation: dominos 1s 1s ease infinite;

animation: dominos 1s 1s ease infinite;

}

  <section>
    <div class="loader loader-12">
      <svg class="loader-star star1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="35px" height="35px" viewBox="0 0 23.172 23.346" xml:space="preserve">
            <polygon points="11.586,0 8.864,8.9 0,8.9 7.193,14.447 4.471,23.346 11.586,17.84 18.739,23.346 16.77,14.985 23.172,8.9 14.306,8.9" />
         </svg>
      <svg class="loader-star star2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="35px" height="35px" viewBox="0 0 23.172 23.346" xml:space="preserve">
            <polygon points="11.586,0 8.864,8.9 0,8.9 7.193,14.447 4.471,23.346 11.586,17.84 18.739,23.346 16.77,14.985 23.172,8.9 14.306,8.9" />
         </svg>
      <svg class="loader-star star3" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="35px" height="35px" viewBox="0 0 23.172 23.346" xml:space="preserve">
            <polygon points="11.586,0 8.864,8.9 0,8.9 7.193,14.447 4.471,23.346 11.586,17.84 18.739,23.346 16.77,14.985 23.172,8.9 14.306,8.9" />
         </svg>
      <svg class="loader-star star4" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="35px" height="35px" viewBox="0 0 23.172 23.346" xml:space="preserve">
            <polygon points="11.586,0 8.864,8.9 0,8.9 7.193,14.447 4.471,23.346 11.586,17.84 18.739,23.346 16.77,14.985 23.172,8.9 14.306,8.9" />
         </svg>
      <svg class="loader-star star5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="35px" height="35px" viewBox="0 0 23.172 23.346" xml:space="preserve">
            <polygon points="11.586,0 8.864,8.9 0,8.9 7.193,14.447 4.471,23.346 11.586,17.84 18.739,23.346 16.77,14.985 23.172,8.9 14.306,8.9" />
         </svg>
      <svg class="loader-star star6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="35px" height="35px" viewBox="0 0 23.172 23.346" xml:space="preserve">
            <polygon points="11.586,0 8.864,8.9 0,8.9 7.193,14.447 4.471,23.346 11.586,17.84 18.739,23.346 16.77,14.985 23.172,8.9 14.306,8.9" />
         </svg>
    </div>
  </section>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

</svg>

</svg>

</svg>

</svg>

</svg>

</svg>

</div>

</section>

    .loader-12 {
        -webkit-animation: stars-rotate-reverse 2s ease infinite;
        animation: stars-rotate-reverse 2s ease infinite;
    }
    
    .loader-12 polygon {
        fill: #d500f9 !important;
    }
    
    .loader-12 .loader-star {
        position: absolute;
    }
    
    .loader-12 .star1 {
        top: 0px;
        right: -7px;
    }
    
    .loader-12 .star2 {
        right: 9px;
        top: -12px;
        position: absolute;
        -webkit-transform: scale(0.8);
            transform: scale(0.8);
        -webkit-animation: stars-catch 2s 0.1s ease infinite;
        animation: stars-catch 2s 0.1s ease infinite;
    }
    
    .loader-12 .star3 {
        right: 27px;
        top: -11px;
        position: absolute;
        -webkit-transform: scale(0.7);
            transform: scale(0.7);
        -webkit-animation: stars-catch 2s 0.15s ease infinite;
        animation: stars-catch 2s 0.15s ease infinite;
    }
    
    .loader-12 .star4 {
        right: 41px;
        top: -2px;
        position: absolute;
        -webkit-transform: scale(0.6);
            transform: scale(0.6);
        -webkit-animation: stars-catch 2s 0.2s ease infinite;
        animation: stars-catch 2s 0.2s ease infinite;
    }
    
    .loader-12 .star5 {
        right: 47px;
        top: 10px;
        position: absolute;
        -webkit-transform: scale(0.5);
            transform: scale(0.5);
        -webkit-animation: stars-catch 2s 0.25s ease infinite;
        animation: stars-catch 2s 0.25s ease infinite;
    }
    
    .loader-12 .star6 {
        right: 47px;
        top: 21px;
        position: absolute;
        -webkit-transform: scale(0.4);
            transform: scale(0.4);
        -webkit-animation: stars-catch 2s 0.3s ease infinite;
        animation: stars-catch 2s 0.3s ease infinite;
    }

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

.loader-12 {

-webkit-animation: stars-rotate-reverse 2s ease infinite;

animation: stars-rotate-reverse 2s ease infinite;

}

.loader-12 polygon {

fill: #d500f9 !important;

}

.loader-12 .loader-star {

position: absolute;

}

.loader-12 .star1 {

top: 0px;

right: -7px;

}

.loader-12 .star2 {

right: 9px;

top: -12px;

position: absolute;

-webkit-transform: scale(0.8);

transform: scale(0.8);

-webkit-animation: stars-catch 2s 0.1s ease infinite;

animation: stars-catch 2s 0.1s ease infinite;

}

.loader-12 .star3 {

right: 27px;

top: -11px;

position: absolute;

-webkit-transform: scale(0.7);

transform: scale(0.7);

-webkit-animation: stars-catch 2s 0.15s ease infinite;

animation: stars-catch 2s 0.15s ease infinite;

}

.loader-12 .star4 {

right: 41px;

top: -2px;

position: absolute;

-webkit-transform: scale(0.6);

transform: scale(0.6);

-webkit-animation: stars-catch 2s 0.2s ease infinite;

animation: stars-catch 2s 0.2s ease infinite;

}

.loader-12 .star5 {

right: 47px;

top: 10px;

position: absolute;

-webkit-transform: scale(0.5);

transform: scale(0.5);

-webkit-animation: stars-catch 2s 0.25s ease infinite;

animation: stars-catch 2s 0.25s ease infinite;

}

.loader-12 .star6 {

right: 47px;

top: 21px;

position: absolute;

-webkit-transform: scale(0.4);

transform: scale(0.4);

-webkit-animation: stars-catch 2s 0.3s ease infinite;

animation: stars-catch 2s 0.3s ease infinite;

}

  <section>
    <div class="loader loader-6">
      <div class="loader-inner"></div>
    </div>
  </section>

1

2

3

4

5

</div>

</section>

    .loader-6 {
        border: 6px groove #7e57c2;
        -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        -webkit-transition: all 1s ease;
        transition: all 1s ease;
        -webkit-animation: loader-1-inner 1s ease-out alternate infinite;
        animation: loader-1-inner 1s ease-out alternate infinite;
    }
    
    .loader-6 .loader-inner {
        border: 0px inset #9575cd;
        border-radius: 50%;
        width: 100%;
        height: 100%;
        -webkit-animation: border-zoom 1s ease-out alternate infinite;
        animation: border-zoom 1s ease-out alternate infinite;
    }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

.loader-6 {

border: 6px groove #7e57c2;

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

-webkit-transition: all 1s ease;

transition: all 1s ease;

-webkit-animation: loader-1-inner 1s ease-out alternate infinite;

animation: loader-1-inner 1s ease-out alternate infinite;

}

.loader-6 .loader-inner {

border: 0px inset #9575cd;

border-radius: 50%;

width: 100%;

height: 100%;

-webkit-animation: border-zoom 1s ease-out alternate infinite;

animation: border-zoom 1s ease-out alternate infinite;

}

  <section>
    <div class="loader loader-14">
      <svg class="loader-star star-small" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="23.172px" height="23.346px" viewBox="0 0 23.172 23.346" xml:space="preserve">
            <polygon fill="#01579b" points="11.586,0 8.864,8.9 0,8.9 7.193,14.447 4.471,23.346 11.586,17.84 18.739,23.346 16.77,14.985 23.172,8.9 14.306,8.9  "></polygon>
         </svg>
      <svg class="loader-star star-big" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="23.172px" height="23.346px" viewBox="0 0 23.172 23.346" xml:space="preserve">
            <polygon fill="#40c4ff" points="11.586,0 8.864,8.9 0,8.9 7.193,14.447 4.471,23.346 11.586,17.84 18.739,23.346 16.77,14.985 23.172,8.9 14.306,8.9  "></polygon>
         </svg>
    </div>
  </section>

1

2

3

4

5

6

7

8

9

10

</svg>

</svg>

</div>

</section>

    .loader-14 .loader-star {
        position: absolute;
        top: calc(50% - 12px);
        left: calc(50% - 12px);
    }
    
    .star-small {
        -webkit-animation: star-small-pulse 1s ease-in-out alternate infinite;
        animation: star-small-pulse 1s ease-in-out alternate infinite;
    }
    
    .loader-14 .star-big {
        -webkit-animation: star-big-pulse 2s -0.2s ease-in-out infinite;
        animation: star-big-pulse 2s -0.2s ease-in-out infinite;
    }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

.loader-14 .loader-star {

position: absolute;

top: calc(50% - 12px);

left: calc(50% - 12px);

}

.star-small {

-webkit-animation: star-small-pulse 1s ease-in-out alternate infinite;

animation: star-small-pulse 1s ease-in-out alternate infinite;

}

.loader-14 .star-big {

-webkit-animation: star-big-pulse 2s -0.2s ease-in-out infinite;

animation: star-big-pulse 2s -0.2s ease-in-out infinite;

}

  <section>
    <div class="loader loader-3">
      <div class="dot dot1"></div>
      <div class="dot dot2"></div>
      <div class="dot dot3"></div>
    </div>
  </section>

1

2

3

4

5

6

7

</div>

</section>

    .loader-3 .dot {
        width: 10px;
        height: 10px;
        background: #00e676;
        border-radius: 50%;
        position: absolute;
        top: calc(50% - 5px);
    }
    
    .loader-3 .dot1 {
        left: 0px;
        -webkit-animation: dot-jump 0.5s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
        animation: dot-jump 0.5s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
    }
    
    .loader-3 .dot2 {
        left: 20px;
        -webkit-animation: dot-jump 0.5s 0.2s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
        animation: dot-jump 0.5s 0.2s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
    }
    
    .loader-3 .dot3 {
        left: 40px;
        -webkit-animation: dot-jump 0.5s 0.4s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
        animation: dot-jump 0.5s 0.4s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
    }

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

.loader-3 .dot {

width: 10px;

height: 10px;

background: #00e676;

border-radius: 50%;

position: absolute;

top: calc(50% - 5px);

}

.loader-3 .dot1 {

left: 0px;

-webkit-animation: dot-jump 0.5s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;

animation: dot-jump 0.5s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;

}

.loader-3 .dot2 {

left: 20px;

-webkit-animation: dot-jump 0.5s 0.2s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;

animation: dot-jump 0.5s 0.2s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;

}

.loader-3 .dot3 {

left: 40px;

-webkit-animation: dot-jump 0.5s 0.4s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;

animation: dot-jump 0.5s 0.4s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;

}

  <section>
    <div class="loader loader-9">
      <svg class="loader-star star1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="23.172px" height="23.346px" viewBox="0 0 23.172 23.346" xml:space="preserve">
            <polygon fill="#c6ff00" points="11.586,0 8.864,8.9 0,8.9 7.193,14.447 4.471,23.346 11.586,17.84 18.739,23.346 16.77,14.985 23.172,8.9 14.306,8.9" />
         </svg>
      <svg class="loader-star star2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="23.172px" height="23.346px" viewBox="0 0 23.172 23.346" xml:space="preserve">
            <polygon fill="#c6ff00" points="11.586,0 8.864,8.9 0,8.9 7.193,14.447 4.471,23.346 11.586,17.84 18.739,23.346 16.77,14.985 23.172,8.9 14.306,8.9  " />
         </svg>
      <svg class="loader-star star3" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="23.172px" height="23.346px" viewBox="0 0 23.172 23.346" xml:space="preserve">
            <polygon fill="#c6ff00" points="11.586,0 8.864,8.9 0,8.9 7.193,14.447 4.471,23.346 11.586,17.84 18.739,23.346 16.77,14.985 23.172,8.9 14.306,8.9  " />
         </svg>
    </div>
  </section>

1

2

3

4

5

6

7

8

9

10

11

12

13

</svg>

</svg>

</svg>

</div>

</section>

    .loader-9 .star1 {
        -webkit-animation: stars-pulse 1s ease-in-out infinite;
        animation: stars-pulse 1s ease-in-out infinite;
        left: 0;
    }
    
    .loader-9 .star2 {
        -webkit-animation: stars-pulse 1s 0.2s ease-in-out infinite;
        animation: stars-pulse 1s 0.2s ease-in-out infinite;
        left: 25px;
    }
    
    .loader-9 .star3 {
        -webkit-animation: stars-pulse 1s 0.4s ease-in-out infinite;
        animation: stars-pulse 1s 0.4s ease-in-out infinite;
        left: 50px;
    }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

.loader-9 .star1 {

-webkit-animation: stars-pulse 1s ease-in-out infinite;

animation: stars-pulse 1s ease-in-out infinite;

left: 0;

}

.loader-9 .star2 {

-webkit-animation: stars-pulse 1s 0.2s ease-in-out infinite;

animation: stars-pulse 1s 0.2s ease-in-out infinite;

left: 25px;

}

.loader-9 .star3 {

-webkit-animation: stars-pulse 1s 0.4s ease-in-out infinite;

animation: stars-pulse 1s 0.4s ease-in-out infinite;

left: 50px;

}

  <section>
    <div class="loader loader-20">
      <div class="css-diamond"></div>
    </div>
  </section>

1

2

3

4

5

</div>

</section>

    .loader-20 {
        width: 70px;
        height: 70px;
        border: 3px dashed #d3d3d3;
        -webkit-animation: stars-rotate-reverse 2s linear both infinite;
        animation: stars-rotate-reverse 2s linear both infinite;
    }
    
    .loader-20 .css-diamond {
        position: absolute;
        left: calc(50% - 50px);
        top: calc(50% - 50px);
        -webkit-transform: scale(0.3);
                transform: scale(0.3);
        -webkit-transform-origin: 50% 100%;
                transform-origin: 50% 100%;
        border-color: transparent transparent #fff transparent;
    }
    
    .loader-20 .css-diamond:after {
        border-color: lightgrey transparent transparent transparent;
    }
    
    .css-diamond {
        border-style: solid;
        border-color: transparent transparent #ce93d8 transparent;
        border-width: 0 25px 25px 25px;
        height: 0;
        width: 100px;
        position: relative;
        margin: 20px 0 50px 0;
    }
    
    .css-diamond:after {
        content: "";
        position: absolute;
        top: 25px;
        left: -25px;
        width: 0;
        height: 0;
        border-style: solid;
        border-color: #ce93d8 transparent transparent transparent;
        border-width: 70px 50px 0 50px;
    }

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

.loader-20 {

width: 70px;

height: 70px;

border: 3px dashed #d3d3d3;

-webkit-animation: stars-rotate-reverse 2s linear both infinite;

animation: stars-rotate-reverse 2s linear both infinite;

}

.loader-20 .css-diamond {

position: absolute;

left: calc(50% - 50px);

top: calc(50% - 50px);

-webkit-transform: scale(0.3);

transform: scale(0.3);

-webkit-transform-origin: 50% 100%;

transform-origin: 50% 100%;

border-color: transparent transparent #fff transparent;

}

.loader-20 .css-diamond:after {

border-color: lightgrey transparent transparent transparent;

}

.css-diamond {

border-style: solid;

border-color: transparent transparent #ce93d8 transparent;

border-width: 0 25px 25px 25px;

height: 0;

width: 100px;

position: relative;

margin: 20px 0 50px 0;

}

.css-diamond:after {

content: "";

position: absolute;

top: 25px;

left: -25px;

width: 0;

height: 0;

border-style: solid;

border-color: #ce93d8 transparent transparent transparent;

border-width: 70px 50px 0 50px;

}

  <section>
    <div class="loader loader-13">
      <div class="css-heart heart1"></div>
      <div class="css-heart heart2"></div>
      <div class="css-heart heart3"></div>
      <div class="css-heart heart4"></div>
    </div>
  </section>

1

2

3

4

5

6

7

8

</div>

</section>

    .css-heart {
        position: absolute;
  /*      width: 100px;
        height: 90px;*/
    }
    
    .css-heart:before,
    .css-heart:after {
        position: absolute;
        content: "";
        left: 50px;
        top: 0;
        width: 50px;
        height: 80px;
        background: #950d0d;
        border-radius: 50px 50px 0 0;
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
        -webkit-transform-origin: 0 100%;
                transform-origin: 0 100%;
    }
    
    .css-heart:after {
        left: 0;
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
        -webkit-transform-origin: 100% 100%;
                transform-origin: 100% 100%;
    }
    .loader-13 .css-heart {
        position: absolute;
        -webkit-animation: star-fly-out 1s ease alternate infinite;
        animation: star-fly-out 1s ease alternate infinite;
        -webkit-transform: scale(0.2);
                transform: scale(0.2);
    }
    
    .loader-13 .heart1 {
        top: 0;
        left: 30px;
    }
    
    .loader-13 .heart2 {
        left: 60px;
        top: 30px;
    }
    
    .loader-13 .heart3 {
        top: 60px;
        left: 30px;
    }
    
    .loader-13 .heart4 {
        left: 0;
        top: 30px;
    }

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

.css-heart {

position: absolute;

/* width: 100px;

height: 90px;*/

}

.css-heart:before,

.css-heart:after {

position: absolute;

content: "";

left: 50px;

top: 0;

width: 50px;

height: 80px;

background: #950d0d;

border-radius: 50px 50px 0 0;

-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);

-webkit-transform-origin: 0 100%;

transform-origin: 0 100%;

}

.css-heart:after {

left: 0;

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

-webkit-transform-origin: 100% 100%;

transform-origin: 100% 100%;

}

.loader-13 .css-heart {

position: absolute;

-webkit-animation: star-fly-out 1s ease alternate infinite;

animation: star-fly-out 1s ease alternate infinite;

-webkit-transform: scale(0.2);

transform: scale(0.2);

}

.loader-13 .heart1 {

top: 0;

left: 30px;

}

.loader-13 .heart2 {

left: 60px;

top: 30px;

}

.loader-13 .heart3 {

top: 60px;

left: 30px;

}

.loader-13 .heart4 {

left: 0;

top: 30px;

}

[CSS]アニメーションの動きもデザインも新しくて気持ちいい！コピペで実装できるローディングスピナーのまとめ

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Category

Blog Info

[CSS]アニメーションの動きもデザインも新しくて気持ちいい！コピペで実装できるローディングスピナーのまとめ

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Recommend

Category

Blog Info