preloader style : demo 114

HTML

                        

CSS

                        .demo{ background: #6d6b6b; }
                        .loader{
                            width: 25%;
                            height: auto;
                            position: relative;
                            padding-bottom: 25%;
                            margin: auto;
                        }
                        .loader .loader-inner-top{
                            width: 100%;
                            height: 75%;
                            overflow: hidden;
                            position: absolute;
                            top: 0;
                        }
                        .loader .box{
                            width: 35%;
                            height: 0;
                            padding-bottom: 35%;
                            margin: auto;
                            position: absolute;
                            top: 0;
                            left: 0;
                            bottom: 0;
                            right: 0;
                            -webkit-animation: loading-1 3s ease infinite;
                            animation: loading-1 3s ease infinite;
                        }
                        .loader .box-bg{
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                            border: 5px solid #de8e3e;
                            position: absolute;
                        }
                        .loader .box-top{
                            width: 20%;
                            height: 5px;
                            background: #de8e3e;
                            border-radius: 5px;
                            margin: auto;
                            position: absolute;
                            top: 0;
                            left: 0;
                            bottom: 0;
                            right: 0;
                        }
                        .loader .box-top-1{
                            transform: rotate(0deg) translateX(-350%);
                        }
                        .loader .box-top-2{
                            transform: rotate(45deg) translateX(-350%);
                        }
                        .loader .box-top-3{
                            transform: rotate(90deg) translateX(-350%);
                        }
                        .loader .box-top-4{
                            transform: rotate(135deg) translateX(-350%);
                        }
                        .loader .box-top-5{
                            transform: rotate(180deg) translateX(-350%);
                        }
                        .loader .box-top-6{
                            transform: rotate(225deg) translateX(-350%);
                        }
                        .loader .box-top-7{
                            transform: rotate(270deg) translateX(-350%);
                        }
                        .loader .box-top-8{
                            transform: rotate(315deg) translateX(-350%);
                        }
                        .loader .loader-inner-bottom{
                            width: 100%;
                            height: 25%;
                            position: absolute;
                            bottom: 0;
                        }
                        .loader .box-bottom{
                            height: 5px;
                            background: #de8e3e;
                            border-radius: 5px;
                            margin: 0 auto 15px;
                        }
                        .loader .box-bottom:nth-child(1){
                            width: 100%;
                        }
                        .loader .box-bottom:nth-child(2){
                            width: 75%;
                        }
                        .loader .box-bottom:nth-child(3){
                            width: 50%;
                        }
                        .loader .box-bottom:nth-child(4){
                            width: 25%;
                        }
                        @-webkit-keyframes loading-1{
                            0%{
                                transform: translateY(200%) rotate(0deg)
                            }
                            25%{
                                transform: translateY(0) rotate(0deg);
                                transition-timing-function: ease-out;
                            }
                            100%{
                                transform: translateY(200%) rotate(-180deg);
                                transition-timing-function: ease-in;
                            }
                        }
                        @keyframes loading-1{
                            0%{
                                transform: translateY(200%) rotate(0deg)
                            }
                            25%{
                                transform: translateY(0) rotate(0deg);
                                transition-timing-function: ease-out;
                            }
                            100%{
                                transform: translateY(200%) rotate(-180deg);
                                transition-timing-function: ease-in;
                            }
                        }
                        @media only screen and (max-width:990px){
                            .loader .box-bottom{
                                height: 4px;
                                margin-bottom: 4px;
                            }
                        }
                    
License Terms