preloader style : demo 221

                        .preloader{
                            margin: 50px auto;
                            text-align: center;
                            --n: 5;
                        }
                        .dot{
                            background: #e74c3c;
                            --i: 0;
                        }
                        .dot:nth-child(2){
                            background: #2ecc71;
                            --i: 1;
                        }
                        .dot:nth-child(3){
                            background: #3498db;
                            --i: 2;
                        }
                        .dot:nth-child(4){
                            background: #e67e22;
                            --i: 3;
                        }
                        .dot:nth-child(5){
                            background: #9b59b6;
                            --i: 4;
                        }
                        .dot:after{
                           --o: 1;
                            background: #fff;
                            content: "";
                        }
                        .dot, .dot:after {
                            display: inline-block;
                            width: 3em;
                            height: 3em;
                            border-radius: 50%;
                            animation: effect 1.5s calc(((var(--i) + var(--o, 0))/var(--n) - 1)*1.5s) infinite;
                        }
                        @keyframes effect{
                            0%, 50%{ transform: scale(0); }
                        }