preloader style : demo 313

HTML

                        

CSS

                    .loader{
                        width: 120px;
                        height: 120px;
                        margin: 30px auto 0;
                        position: relative;
                        animation: rotate 3s ease-out infinite;
                    }
                    .loader div{
                        background-color: #df0abc;
                        width: 16px;
                        height: 16px;
                        border-radius: 50%;
                        transform-origin: center;
                        transform: translate(-50%, -50%);
                        position: absolute;
                        animation: scale 2s ease-in infinite;
                    }
                    .loader div:nth-child(1){
                        top: 0%;
                        left: 50%;
                        animation-delay: 0;
                    }
                    .loader div:nth-child(2){
                        top: 9%;
                        left: 78%;
                        animation-delay: 0.4s;
                    }
                    .loader div:nth-child(3){
                        top: 30%;
                        left: 96%;
                        animation-delay: 0.8s;
                    }
                    .loader div:nth-child(4){
                        top: 58%;
                        left: 100%;
                        animation-delay: 1.2s;
                    }
                    .loader div:nth-child(5){
                        top: 84%;
                        left: 88%;
                        animation-delay: 1.6s;
                    }
                    @keyframes rotate{
                        0%{ transform: rotate(0deg); }
                        65%{ transform: rotate(180deg); }
                        95%,100%{ transform: rotate(360deg); }
                    }
                    @keyframes scale{
                        0%,60%,100%{
                            opacity: 1;
                            transform: scale(1) translate(-50%, -50%);
                        }
                        30%{
                            border-radius: 10%;
                            opacity: 0.5;
                            transform: scale(1.5) translate(-50%, -50%);
                        }
                    }
                    
License Terms