preloader style : demo 208

                        #loader {
                            height: 100px;
                            width: 260px;
                            margin: 70px auto 0;
                            position: relative;
                        }
                        .loader {
                            background: #ccc;
                            width: 40px;
                            height: 40px;
                            border-radius: 24px;
                            display: inline-block;
                            position: absolute;
                        }
                        .loader-1 {
                            animation: animateDot1 1.5s linear infinite;
                            left: 130px;
                            background: #f73138;
                        }
                        .loader-2 {
                            background: #00b733;
                            left: 60px;
                            animation: animateDot2 1.5s linear infinite;
                            animation-delay: 0.5s;
                        }
                        .loader-3 {
                            background: #448afc;
                            left: 130px;
                            animation: animateDot3 1.5s linear infinite;
                        }
                        .loader-4 {
                            background: #950faf;
                            left: 60px;
                            animation: animateDot4 1.5s linear infinite;
                            animation-delay: 0.5s;
                        }
                        @keyframes animateDot1 {
                            0%{ transform: rotate(0deg) translateX(-60px); }
                            25% { transform: rotate(180deg) translateX(-60px); }
                            75% { transform: rotate(180deg) translateX(-60px); }
                            100% { transform: rotate(360deg) translateX(-60px); }
                        }
                        @keyframes animateDot2 {
                            0%{ transform: rotate(-0deg) translateX(-70px); }
                            25% { transform: rotate(-180deg) translateX(-70px); }
                            75% { transform: rotate(-180deg) translateX(-70px); }
                            100% { transform: rotate(-360deg) translateX(-70px); }
                        }
                        @keyframes animateDot3 {
                            0%{ transform: rotate(0deg) translateX(60px); }
                            25% { transform: rotate(180deg) translateX(60px); }
                            75% { transform: rotate(180deg) translateX(60px); }
                            100% { transform: rotate(360deg) translateX(60px); }
                        }
                        @keyframes animateDot4 {
                            0%{ transform: rotate(-0deg) translateX(60px); }
                            25% { transform: rotate(-180deg) translateX(60px); }
                            75% { transform: rotate(-180deg) translateX(60px); }
                            100% { transform: rotate(-360deg) translateX(60px); }
                        }