preloader style : demo 9

HTML

                        

CSS

                        .loader{
                            margin: 60px auto;
                            position: relative;
                            border: 1px solid transparent;
                        }
                        .loader-inner {
                            position: absolute;
                            left: 50%;
                            top:-10px;
                        }
                        .loader-inner > div {
                            width: 5px;
                            height: 15px;
                            background-color: #fff;
                            border-radius: 2px;
                            margin: 2px;
                            -webkit-animation-fill-mode: both;
                            animation-fill-mode: both;
                            position: absolute;
                        }
                        .loader-inner > div:nth-child(1) {
                            top: 20px;
                            left: 0;
                            -webkit-animation: loader-inner 1.2s -0.84s infinite ease-in-out;
                            animation: loader-inner 1.2s -0.84s infinite ease-in-out;
                        }
                        .loader-inner > div:nth-child(2) {
                            top: 13.63636px;
                            left: 13.63636px;
                            -webkit-transform: rotate(-45deg);
                            -ms-transform: rotate(-45deg);
                            transform: rotate(-45deg);
                            -webkit-animation: loader-inner 1.2s -0.72s infinite ease-in-out;
                            animation: loader-inner 1.2s -0.72s infinite ease-in-out;
                        }
                        .loader-inner > div:nth-child(3) {
                            top: 0;
                            left: 20px;
                            -webkit-transform: rotate(90deg);
                            -ms-transform: rotate(90deg);
                            transform: rotate(90deg);
                            -webkit-animation: loader-inner 1.2s -0.6s infinite ease-in-out;
                            animation: loader-inner 1.2s -0.6s infinite ease-in-out;
                        }
                        .loader-inner > div:nth-child(4) {
                            top: -13.63636px;
                            left: 13.63636px;
                            -webkit-transform: rotate(45deg);
                            -ms-transform: rotate(45deg);
                            transform: rotate(45deg);
                            -webkit-animation: loader-inner 1.2s -0.48s infinite ease-in-out;
                            animation: loader-inner 1.2s -0.48s infinite ease-in-out;
                        }
                        .loader-inner > div:nth-child(5) {
                            top: -20px;
                            left: 0;
                            -webkit-animation: loader-inner 1.2s -0.36s infinite ease-in-out;
                            animation: loader-inner 1.2s -0.36s infinite ease-in-out;
                        }
                        .loader-inner > div:nth-child(6) {
                            top: -13.63636px;
                            left: -13.63636px;
                            -webkit-transform: rotate(-45deg);
                            -ms-transform: rotate(-45deg);
                            transform: rotate(-45deg);
                            -webkit-animation: loader-inner 1.2s -0.24s infinite ease-in-out;
                            animation: loader-inner 1.2s -0.24s infinite ease-in-out;
                        }
                        .loader-inner > div:nth-child(7) {
                            top: 0;
                            left: -20px;
                            -webkit-transform: rotate(90deg);
                            -ms-transform: rotate(90deg);
                            transform: rotate(90deg);
                            -webkit-animation: loader-inner 1.2s -0.12s infinite ease-in-out;
                            animation: loader-inner 1.2s -0.12s infinite ease-in-out;
                        }
                        .loader-inner > div:nth-child(8) {
                            top: 13.63636px;
                            left: -13.63636px;
                            -webkit-transform: rotate(45deg);
                            -ms-transform: rotate(45deg);
                            transform: rotate(45deg);
                            -webkit-animation: loader-inner 1.2s 0s infinite ease-in-out;
                            animation: loader-inner 1.2s 0s infinite ease-in-out;
                        }
                        @keyframes loader-inner {
                            50% {
                                opacity: 0.3; }
                            100% {
                                opacity: 1; }
                        }
                        @-webkit-keyframes loader-inner {
                            50% {
                                opacity: 0.3; }
                            100% {
                                opacity: 1; }
                        }
                    
License Terms