preloader style : demo 10

HTML

                        

CSS

                        .loader {
                            display: table;
                            border: 3px solid #222;
                            padding: 5px;
                            margin: 50px auto;
                            position: relative;
                            top: 50%;
                            transform: translateY(-50%);
                        }
                        .loader:after {
                            content: "";
                            display: block;
                            width: 7px;
                            height: 15px;
                            background: #222;
                            position: absolute;
                            right: -7px;
                        }
                        .loader .loader-inner {
                            display: block;
                            width: 15px;
                            height: 15px;
                            float: left;
                            background-color: #222;
                            filter: alpha(opacity=0);
                            opacity: 0;
                            animation: _fade 0.5s 2s infinite alternate forwards;
                        }
                        .loader .loader-inner:not(:last-child) {
                            margin-right: 5px;
                        }
                        .loader .loader-inner:first-child {
                            animation-delay: 0.2s;
                        }
                        .loader .loader-inner:nth-child(2) {
                            animation-delay: 0.4s;
                        }
                        .loader .loader-inner:last-child {
                            animation-delay: 0.6s;
                        }
                        @keyframes _fade {
                            from {
                                filter: alpha(opacity=0);
                                opacity: 0;
                            }
                            to {
                                filter: alpha(opacity=100);
                                opacity: 1;
                            }
                        }
                    
License Terms