css애니메이션 - 로딩중~

애니메이션 : 로딩중~

css 코드보기

body {
                      background-color: rgb(14,43,122);
                    }
                    .loader {
                      position: absolute;
                      top: 50%;
                      left: 50%;
                      transform : translate(-50%,-50%);
                      width: 100px;
                      height: 100px;
                      animation: spin .6s linear infinite reverse;
                    }
                    .ball {
                      position: absolute;
                      top: 50%;
                      left: 50%;
                      transform : translate(-50%,-50%);
                      height: 100%;
                      animation: spin 1s infinite ease-in-out;
                    }
                    .ball::after {
                      content: '';
                      position: absolute;
                      background-color: #fff;
                      width: 5px;
                      height: 5px;
                      border-radius: 100%;
                      top: 0;
                    }
                    .ball:nth-child(2) {
                      animation-delay: -0.1s
                    }
                    .ball:nth-child(3) {
                      animation-delay: -0.2s
                    }
                    .ball:nth-child(4) {
                      animation-delay: -0.3s
                    }
                    .ball:nth-child(5) {
                      animation-delay: -0.4s
                    }
                    .ball:nth-child(6) {
                      animation-delay: -0.5s
                    }
                    .ball:nth-child(7) {
                      animation-delay: -0.6s
                    }
                    .ball:nth-child(8) {
                      animation-delay: -0.7s
                    }
                    .ball:nth-child(9) {
                      animation-delay: -0.8s
                    }
                    .ball:nth-child(10) {
                      animation-delay: -0.9s
                    }
                    @keyframes spin {
                      0% {
                        transform: translate(-50%, -50%) rotate(0deg);
                      }
                      100% {
                        transform: translate(-50%, -50%) rotate(360deg);
                      }
                    }