preloader style : demo 144

HTML

                        

CSS

                        .demo{ background: #e5ebc4; }
                        .loader{
                            width: 100px;
                            height: 100px;
                            margin: 50px auto;
                            text-align: center;
                        }
                        .loader .loader-inner{
                            width: 100px;
                            height: 25px;
                            position: relative;
                            opacity: 0;
                            animation: 2s loading-3 infinite linear 2s;
                        }
                        .loader .loader-inner span{
                            display: block;
                            width: 6px;
                            height: 15px;
                            background: #fff;
                            position: absolute;
                            box-shadow: 0 0 1px #fff;
                            transform-origin: bottom;
                        }
                        .loader .loader-inner span:nth-child(1){
                            bottom: 5px;
                            left: 36px;
                            transform: rotate(-35deg);
                        }
                        .loader .loader-inner span:nth-child(2){
                            bottom: 8px;
                            left: 44px;
                        }
                        .loader .loader-inner span:nth-child(3){
                            bottom: 5px;
                            left: 52px;
                            transform: rotate(35deg);
                        }
                        .loader .box{
                            height: 36px;
                            position: relative;
                        }
                        .loader .box:after{
                            content: "";
                            width: 20px;
                            height: 5px;
                            background: #fff;
                            box-shadow: 0 0 1px #fff;
                            position: absolute;
                            top: 47px;
                            left: 5px;
                        }
                        .loader .box-inner{
                            width: 30px;
                            height: 36px;
                            background: #fff;
                            border-radius: 0 0 36px 36px;
                            box-shadow: 0 0 1px #fff;
                        }
                        .loader .box-inner:before{
                            content: "";
                            width: 22px;
                            height: 22px;
                            border-radius: 50%;
                            background: linear-gradient(transparent 50%, #f5b221 50%);
                            position: absolute;
                            left: 4px;
                            bottom: 4px;
                        }
                        .loader .box-inner:after{
                            content: "";
                            width: 6px;
                            height: 13px;
                            background: #fff;
                            box-shadow: 0 0 1px #fff;
                            position: absolute;
                            top: 35px;
                            left: 12px;
                        }
                        .loader .box-1{
                            display: inline-block;
                            margin-right: 10px;
                            animation: loading-1 2s cubic-bezier(.39,1.52,.46,.92) infinite;
                        }
                        .loader .box-2{
                            display: inline-block;
                            animation: loading-2 2s cubic-bezier(.39,1.52,.46,.92) infinite;
                        }
                        .loader .box-1 .box-inner:before{
                            animation: loading-2 2s linear infinite;
                        }
                        .loader .box-2 .box-inner:before{
                            animation: loading-1 2s linear infinite;
                        }
                        @keyframes loading-1{
                            0%{ transform: rotate(0deg); }
                            50%{ transform:rotate(22deg); }
                        }
                        @keyframes loading-2{
                            0%{ transform:rotate(0deg); }
                            50%{ transform:rotate(-22deg); }
                        }
                        @keyframes loading-3{
                            0%{
                                opacity: 0;
                                transform: scaleY(1);
                            }
                            33%{
                                opacity: 1;
                                transform: scaleY(1.4);
                            }
                            64%{
                                opacity: .1;
                                transform: scaleY(1);
                            }
                            100%{
                                opacity: 0;
                                transform: scaleY(.3);
                            }
                        }
                    
License Terms