preloader style : demo 133

HTML

                        

CSS

                        .demo{ background: #721123; }
                        .loader{
                            width: 117px;
                            height: 88px;
                            margin: 50px auto;
                            position: relative;
                        }
                        .loader .box{
                            width: 29px;
                            height: 29px;
                            border-radius: 50%;
                            background: #ffb049;
                            position: absolute;
                            bottom: 29px;
                            left: 26px;
                            transform-origin: center bottom;
                            animation: loading-1 0.69s ease-in-out infinite;
                        }
                        .loader .loader-inner{
                            width: 29px;
                            height: 29px;
                            border-top: 2px solid #ffb049;
                            position: absolute;
                            top: 0;
                            right: 0;
                        }
                        .loader .box-1{ animation: loading-2 2.07s linear infinite; }
                        .loader .box-2{ animation: loading-2 2.07s linear infinite -0.69s; }
                        .loader .box-3{ animation: loading-2 2.07s linear infinite -1.38s; }
                        @keyframes loading-1{
                            0%{ transform: scale(1,.7); }
                            20%{ transform: scale(.7,1.2); }
                            40%{ transform: scale(1,1);}
                            50%{ bottom: 97px;}
                            46%{ transform: scale(1,1);}
                            80%{ transform: scale(.7,1.2);}
                            90%{ transform: scale(.7,1.2);}
                            100%{ transform: scale(1,0.7);}
                        }
                        @keyframes loading-2{
                            0%{
                                opacity: 0;
                                top: 0;
                                right: 0;
                            }
                            50%{ opacity: 1; }
                            100%{
                                top: 88px;
                                right: 88px;
                                opacity: 0;
                            }
                        }
                    
License Terms