preloader style : demo 173

HTML

                        

CSS

                        .demo{ background: #4a956a; }
                        .loader{
                            width: 100px;
                            height: 100px;
                            margin: 60px auto;
                            position: relative;
                        }
                        .loader .loader-inner{
                            width: 20px;
                            height: 20px;
                            border-radius: 50%;
                            background: #fff;
                            position: relative;
                            top: 30px;
                            left: 50px;
                            z-index: 1;
                            animation: loading-1 2.5s infinite;
                        }
                        .loader .box{
                            position: relative;
                            animation: loading-2 2.5s infinite;
                        }
                        .loader .box-1{
                            width: 25px;
                            height: 50px;
                            border-radius: 40%;
                            background: #f0c808;
                            border-bottom: solid;
                            border-right: solid;
                            position: relative;
                            left: 56px;
                            z-index: 1;
                            transform: skewx(-30deg);
                        }
                        .loader .box-2{
                            width: 7px;
                            height: 32px;
                            border-radius: 20%;
                            background: #a52a2a;
                            border-bottom: solid #654321;
                            border-right: solid #654321;
                            position: relative;
                            top: -5px;
                            left: 41px;
                            transform: skewx(-30deg);
                        }
                        @keyframes loading-1{
                            34%{ transform: translate(-50px, -30px); animation-timing-function: linear; }
                            46%{ transform: translate(0px, 0px) skewx(0deg); animation-timing-function: ease-out; }
                            48%{ transform: translate(2px, 0px) skewx(-20deg); animation-timing-function: linear; }
                            50%{ transform: skewx(0deg); animation-timing-function: linear; }
                            70%{ transform: translate(-40px, -24px); }
                            84%{ transform: translate(-50px, -30px);  animation-timing-function: linear; }
                            96%{ transform: translate(0px, 0px) skewx(0deg); animation-timing-function: ease-out; }
                            98%{ transform: translate(2px, 0px) skewx(-20deg); animation-timing-function: linear; }
                            100%{ transform: translate(0px, 0px) skewx(0deg); animation-timing-function: ease-out; }
                        }
                        @keyframes loading-2{
                            37%{ transform: translate(10px, 8px); animation-timing-function: ease-in; }
                            42%{ transform: translate(10px, 8px); }
                            50%{ transform: translate(0px);  animation-timing-function: ease-out; }
                            87%{ transform: translate(10px, 8px); animation-timing-function: ease-in; }
                            92%{ transform: translate(10px, 8px); }
                            100%{ transform: translate(0px); }
                        }
                    
License Terms