preloader style : demo 25

LOADING

HTML

                        
LOADING

CSS

                        .loader {
                            position: relative;
                            width: 80px;
                            height: 60px;
                            margin: 30px auto;
                        }
                        .loader .loader-inner {
                            width: 80px;
                            height: 40px;
                            position: absolute;
                        }
                        .loader .loader-inner .box {
                            width: 80px;
                            height: 10px;
                            background-color: #fff;
                            position: absolute;
                            clip: rect(0, 0, 20px, 0);
                        }
                        .loader .loader-inner .box-1 {
                            top: 0;
                            -webkit-animation: loader 2s ease 0s infinite;
                            animation: loader 2s ease 0s infinite;
                        }
                        .loader .loader-inner .box-2 {
                            top: 15px;
                            -webkit-animation: loader 2s ease 0.25s infinite;
                            animation: loader 2s ease 0.25s infinite;
                        }
                        .loader .loader-inner .box-3 {
                            top: 30px;
                            -webkit-animation: loader 2s ease 0.5s infinite;
                            animation: loader 2s ease 0.5s infinite;
                        }
                        .loader .text {
                            position: absolute;
                            top: 50px;
                            text-align: center;
                            width: 100%;
                            color: #fff;
                            font-size: 13px;
                            font-family: sans-serif;
                            letter-spacing: 3px;
                            line-height: 10px;
                            height: 10px;
                            -webkit-animation: fade 1s ease 0s infinite;
                            animation: fade 1s ease 0s infinite;
                        }
                        @-webkit-keyframes loader {
                            0% {
                                clip: rect(0, 0, 20px, 0);
                            }
                            30% {
                                clip: rect(0, 80px, 20px, 0);
                            }
                            50% {
                                clip: rect(0, 80px, 20px, 0);
                            }
                            80% {
                                clip: rect(0, 80px, 20px, 80px);
                            }
                            100% {
                                clip: rect(0, 80px, 20px, 80px);
                            }
                        }
                        @keyframes loader {
                            0% {
                                clip: rect(0, 0, 20px, 0);
                            }
                            30% {
                                clip: rect(0, 80px, 20px, 0);
                            }
                            50% {
                                clip: rect(0, 80px, 20px, 0);
                            }
                            80% {
                                clip: rect(0, 80px, 20px, 80px);
                            }
                            100% {
                                clip: rect(0, 80px, 20px, 80px);
                            }
                        }
                        @-webkit-keyframes fade {
                            0% {
                                opacity: 1;
                            }
                            50% {
                                opacity: 0;
                            }
                            100% {
                                opacity: 1;
                            }
                        }
                        @keyframes fade {
                            0% {
                                opacity: 1;
                            }
                            50% {
                                opacity: 0;
                            }
                            100% {
                                opacity: 1;
                            }
                        }
                    
License Terms