preloader style : demo 241

HTML

                        

CSS

                        .loader{
                            width: 170px;
                            padding: 10px 0;
                            margin: 50px auto 0;
                            position: relative;
                            overflow: hidden;
                        }
                        .loader .ball,
                        .loader .ball2{
                            background: #0a3d62;
                            width: 10px;
                            height: 10px;
                            border-radius: 50%;
                            position: absolute;
                            top: 5px;
                            left: 15px;
                            animation: along 2s infinite linear;
                        }
                        .loader .ball2{
                            background: #00796B;
                            animation-delay: -1s;
                        }
                        .loader ul{
                            padding: 0;
                            margin: 0;
                            list-style: none;
                        }
                        .loader li{
                            background-color: #F50057;
                            height: 10px;
                            width: 30px;
                            border-radius: 5px;
                            display: inline-block;
                            animation: around 2s infinite linear;
                        }
                        .loader li:nth-child(1){ animation-delay: 0s; }
                        .loader li:nth-child(2){
                            background-color: #D50000;
                            animation-delay: 0.2s;
                        }
                        .loader li:nth-child(3){
                            background-color: #6200EA;
                            animation-delay: 0.4s;
                        }
                        .loader li:nth-child(4){
                            background-color: #00B0FF;
                            animation-delay: 0.6s;
                        }
                        .loader li:nth-child(5){
                            background: #FF3D00;
                            animation-delay: 0.8s;
                        }
                        @keyframes along{
                            0%{
                                left: 0;
                                top: 5px;
                            }
                            5%{ top: 3px; }
                            10%{ top: 5px; }
                            15%{ top: 3px; }
                            20%{ top: 5px; }
                            25%{ top: 3px; }
                            30%{ top: 5px; }
                            35%{ top: 3px; }
                            40%{ top: 5px; }
                            45%{ top: 3px; }
                            50%{
                                left: 100%;
                                top: 5px;
                            }
                            100%{ left: 100%; }
                        }
                        @keyframes around{
                            0%{ transform: rotate(0deg); }
                            100%{ transform: rotate(359deg); }
                        }
                    
License Terms