preloader style : demo 242

HTML

                        

CSS

                        .loader{
                            width: 70px;
                            height: 80px;
                            margin: 30px auto 0;
                            position: relative;
                        }
                        .loader .circle{
                            background: #fff;
                            width: 15px;
                            height: 15px;
                            margin: 0 auto;
                            border-radius: 100%;
                            position: relative;
                            left: -18px;
                            animation: strip-anime 1.2s infinite ease-in-out;
                        }
                        .loader .strips{
                            width: 70px;
                            height: 50px;
                            position: absolute;
                            top: 10px;
                            left:0;
                        }
                        .loader .strips > div{
                            background-color: #333;
                            width: 10px;
                            height: 100%;
                            display: inline-block;
                            animation: stretchdelay 1.2s infinite ease-in-out;
                        }
                        .loader .strips .strip1{
                            background: #e84118;
                            animation-delay: -1.1s;
                        }
                        .loader .strips .strip2{
                            background: #00a8ff;
                            animation-delay: -1.1s;
                        }
                        .loader .strips .strip3{
                            background: #273c75;
                            animation-delay: -1.0s;
                        }
                        .loader .strips .strip4{
                            background: #9c88ff;
                            animation-delay: -0.9s;
                        }
                        .loader .strips .strip5{
                            animation-delay: -0.8s;
                            background: #4cd137;
                        }
                        @keyframes strip-anime{
                            1%{ top: -20px; }
                            2%{ top: 10px; }
                            5%{ top: -20px; }
                            10%{ left: -15px; }
                            20%{ top: -25px; }
                            30%{
                                left: 25px;
                                background: #4cd137;
                            }
                            35%{ top: 5px; }
                            45%{ top: -5px; }
                            50%{ top: -5px; }
                            60%{ top: -6px; }
                            70%{ top: 6px; }
                            80%{ top: 6px; }
                            60%{ top: -6px; }
                        }
                        @keyframes stretchdelay{
                            0%, 40%, 100%{ transform: scaleY(0.4); }
                            20%{ transform: scaleY(1.0); }
                        }
                    
License Terms