preloader style : demo 30

HTML

                        

CSS

                        .main-loader{
                            position: relative;
                            width: 160px;
                            height: 160px;
                            margin: 0 auto;
                        }
                        .loader-inner{
                            position: absolute;
                            top: 50%;
                            left: 50%;
                        }
                        .loader-inner .loader{
                            width: 106px;
                            height: 106px;
                            border-radius: 50%;
                        }
                        .loader-inner .loader:before,
                        .loader-inner .loader:after {
                            bottom: 18px;
                        }
                        .loader-inner .loader:before{
                            left: 18px;
                        }
                        .loader-inner .loader:after {
                            right: 18px;
                        }
                        .loader-inner .box{
                            top: 18px;
                            left: 18px;
                            -webkit-transform-origin: 33px 33px;
                            transform-origin: 33px 33px;
                            -webkit-animation-name: roll;
                            animation-name: roll;
                        }
                        .loader {
                            position: absolute;
                            color: #8c4646;
                            border: 2px solid;
                            -webkit-transform: translate(-50%, -50%) rotate(-45deg);
                            transform: translate(-50%, -50%) rotate(-45deg);
                            -webkit-animation-timing-function: ease-in-out;
                            animation-timing-function: ease-in-out;
                            -webkit-animation-duration: 1s;
                            animation-duration: 1s;
                            -webkit-animation-iteration-count: infinite;
                            animation-iteration-count: infinite;
                            -webkit-animation-name: loading;
                            animation-name: loading;
                        }
                        .loader:before, .loader:after {
                            content: "";
                            position: absolute;
                            width: 32px;
                            height: 32px;
                            background: #8c4646;
                            border-radius: 4px;
                        }
                        .loader:before {
                            left: 2px;
                        }
                        .loader:after {
                            right: 2px;
                        }
                        .box {
                            position: absolute;
                            width: 32px;
                            height: 32px;
                            background: #8c4646;
                            border-radius: 4px;
                            -webkit-animation-timing-function: ease-in-out;
                            animation-timing-function: ease-in-out;
                            -webkit-animation-duration: 1s;
                            animation-duration: 1s;
                            -webkit-animation-iteration-count: infinite;
                            animation-iteration-count: infinite;
                        }
                        @-webkit-keyframes roll {
                            33% {
                                -webkit-transform: rotate(0deg);
                                transform: rotate(0deg);
                            }
                            67%,100% {
                                -webkit-transform: rotate(90deg);
                                transform: rotate(90deg);
                            }
                        }
                        @keyframes roll {
                            33% {
                                -webkit-transform: rotate(0deg);
                                transform: rotate(0deg);
                            }
                            67%,100% {
                                -webkit-transform: rotate(90deg);
                                transform: rotate(90deg);
                            }
                        }
                        @-webkit-keyframes loading {
                            50% {
                                -webkit-transform: translate(-50%, -50%) rotate(45deg);
                                transform: translate(-50%, -50%) rotate(45deg);
                            }
                            100% {
                                -webkit-transform: translate(-50%, -50%) rotate(45deg);
                                transform: translate(-50%, -50%) rotate(45deg);
                            }
                        }
                        @keyframes loading {
                            50% {
                                -webkit-transform: translate(-50%, -50%) rotate(45deg);
                                transform: translate(-50%, -50%) rotate(45deg);
                            }
                            100% {
                                -webkit-transform: translate(-50%, -50%) rotate(45deg);
                                transform: translate(-50%, -50%) rotate(45deg);
                            }
                        }
                    
License Terms