preloader style : demo 17

HTML

                        

CSS

                        .loader {
                            position: relative;
                            width: 65px;
                            border: 1px solid transparent;
                            margin: 40px auto;
                        }
                        .loader span {
                            position: absolute;
                            bottom: 0;
                            display: block;
                            width: 9px;
                            height: 5px;
                            border-radius: 5px;
                            background: rgba(0, 0, 0, 0.1);
                            -webkit-animation: preloader 2s infinite ease-in-out;
                            animation: preloader 2s infinite ease-in-out;
                        }
                        .loader span:nth-child(2) {
                            left: 11px;
                            -webkit-animation-delay: 200ms;
                            animation-delay: 200ms;
                        }
                        .loader span:nth-child(3) {
                            left: 22px;
                            -webkit-animation-delay: 400ms;
                            animation-delay: 400ms;
                        }
                        .loader span:nth-child(4) {
                            left: 33px;
                            -webkit-animation-delay: 600ms;
                            animation-delay: 600ms;
                        }
                        .loader span:nth-child(5) {
                            left: 44px;
                            -webkit-animation-delay: 800ms;
                            animation-delay: 800ms;
                        }
                        .loader span:nth-child(6) {
                            left: 55px;
                            -webkit-animation-delay: 1000ms;
                            animation-delay: 1000ms;
                        }
                        @-webkit-keyframes preloader {
                            0% {
                                height: 5px;
                                -webkit-transform: translateY(0);
                                transform: translateY(0);
                                background: rgba(0, 0, 0, 0.1);
                            }
                            25% {
                                height: 30px;
                                -webkit-transform: translateY(15px);
                                transform: translateY(15px);
                                background: #f8990c;
                            }
                            50%,100% {
                                height: 5px;
                                -webkit-transform: translateY(0);
                                transform: translateY(0);
                                background: rgba(0, 0, 0, 0.1);
                            }
                        }
                        @keyframes preloader {
                            0% {
                                height: 5px;
                                -webkit-transform: translateY(0);
                                transform: translateY(0);
                                background: rgba(0, 0, 0, 0.1);
                            }
                            25% {
                                height: 30px;
                                -webkit-transform: translateY(15px);
                                transform: translateY(15px);
                                background: #f8990c;
                            }
                            50%,100% {
                                height: 5px;
                                -webkit-transform: translateY(0);
                                transform: translateY(0);
                                background: rgba(0, 0, 0, 0.1);
                            }
                        }
                    
License Terms