preloader style : demo 250

HTML

                        

CSS

                        .loader{
                            width: 240px;
                            height: 50px;
                            padding: 12px 0 0;
                            margin: 50px auto;
                            position: relative;
                        }
                        .loader span{
                            background: #ff6a00;
                            width: 8px;
                            height: 8px;
                            margin: 0 2px;
                            display: inline-block;
                        }
                        .loader span:nth-child(1){
                            animation: temp 1s 0.05s infinite cubic-bezier(0.005,0.560,0.580,1.590);
                        }
                        .loader span:nth-child(2){
                            animation: temp 1s 0.1s infinite cubic-bezier(0.005,0.560,0.580,1.590);
                        }
                        .loader span:nth-child(3){
                            animation: temp 1s 0.15s infinite cubic-bezier(0.005,0.560,0.580,1.590);
                        }
                        .loader span:nth-child(4){
                            animation: temp 1s 0.2s infinite cubic-bezier(0.005,0.560,0.580,1.590);
                        }
                        .loader span:nth-child(5){
                            animation: temp 1s 0.25s infinite cubic-bezier(0.005,0.560,0.580,1.590);
                        }
                        .loader span:nth-child(6){
                            animation: temp 1s 0.3s infinite cubic-bezier(0.005,0.560,0.580,1.590);
                        }
                        .loader span:nth-child(7){
                            animation: temp 1s 0.35s infinite cubic-bezier(0.005,0.560,0.580,1.590);
                        }
                        .loader span:nth-child(8){
                            animation: temp 1s 0.4s infinite cubic-bezier(0.005,0.560,0.580,1.590);
                        }
                        .loader span:nth-child(9){
                            animation: temp 1s 0.45s infinite cubic-bezier(0.005,0.560,0.580,1.590);
                        }
                        .loader span:nth-child(10){
                            animation: temp 1s 0.5s infinite cubic-bezier(0.005,0.560,0.580,1.590);
                        }
                        .loader span:nth-child(11){
                            animation: temp 1s 0.55s infinite cubic-bezier(0.005,0.560,0.580,1.590);
                        }
                        .loader span:nth-child(12){
                            animation: temp 1s 0.6s infinite cubic-bezier(0.005,0.560,0.580,1.590);
                        }
                        .loader span:nth-child(13){
                            animation: temp 1s 0.65s infinite cubic-bezier(0.005,0.560,0.580,1.590);
                        }
                        .loader span:nth-child(14){
                            animation: temp 1s 0.7s infinite cubic-bezier(0.005,0.560,0.580,1.590);
                        }
                        .loader span:nth-child(15){
                            animation: temp 1s 0.75s infinite cubic-bezier(0.005,0.560,0.580,1.590);
                        }
                        @keyframes temp{
                           50%{
                                background: #ee0979;
                                transform: scale(1, 5);
                            }
                        }
                    
License Terms