preloader style : demo 16

L O A D I N G

HTML

                        
L O A D I N G

CSS

                        .loader {
                            position: relative;
                            margin: 40px auto 0;
                            width: 350px;
                            color: white;
                            text-align: center;
                            font-size: 250%;
                            background: linear-gradient(180deg, #ffff00  0, #444 100%);
                            box-shadow: inset 0 5px 20px black;
                            text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
                        }
                        .loader:after{
                            content: "";
                            display: table;
                            clear: both;
                        }
                        span{
                            float: left;
                            height: 100px;
                            line-height: 120px;
                            width: 50px;
                        }
                        .loader > span {
                            border-left: 1px solid #444;
                            border-right: 1px solid #222;
                        }
                        .loader-inner {
                            position: absolute;
                            height: 100%;
                            width: 100%;
                        }
                        .loader-inner span {
                            background: linear-gradient(180deg, white 0, #ddd 100%);
                            animation: up 2s infinite;
                        }
                        @keyframes up {
                            0% {
                                margin-bottom: 0;
                            }
                            16% {
                                margin-bottom: 100%;
                                height: 20px;
                            }
                            50% {
                                margin-bottom: 0;
                            }
                            100% {
                                margin-bottom: 0;
                            }
                        }
                        .loader-inner span:nth-child(2) {
                            animation-delay: .142857s;
                        }
                        .loader-inner span:nth-child(3) {
                            animation-delay: .285714s;
                        }
                        .loader-inner span:nth-child(4) {
                            animation-delay: .428571s;
                        }
                        .loader-inner span:nth-child(5) {
                            animation-delay: .571428s;
                        }
                        .loader-inner span:nth-child(6) {
                            animation-delay: .714285s;
                        }
                        .loader-inner span:nth-child(7) {
                            animation-delay: .857142s;
                        }
                        @media only screen and (max-width: 480px) {
                            .loader{
                                width: 77.8%;
                                font-size: 200%;
                            }
                            span{
                                width: 14.28%;
                            }
                        }
                    
License Terms