preloader style : demo 123

HTML

                        

CSS

                        .demo{ background: #424544; }
                        .loader{
                            width: 80px;
                            height: 60px;
                            background: #424544;
                            margin: 50px auto;
                            position: relative;
                            -webkit-animation: loading-2 1500ms infinite linear;
                            animation: loading-2 1500ms infinite linear;
                        }
                        .loader:before{
                            content: "";
                            display: block;
                            width: 10px;
                            height: 100%;
                            position: absolute;
                            top: 0;
                            left: 0;
                            -webkit-animation: loading-3 1500ms infinite linear;
                            animation: loading-3 1500ms infinite linear;
                        }
                        .loader:after{
                            content: "";
                            display: block;
                            width: 10px;
                            height: 10px;
                            border-radius: 50%;
                            background: #f2e647 ;
                            position: absolute;
                            top: 0;
                            left: 0;
                            -webkit-animation: loading-1 1500ms infinite linear;
                            animation: loading-1 1500ms infinite linear;
                        }
                        @-webkit-keyframes loading-1{
                            0%{
                                left: 5px;
                                top: 0;
                            }
                            25%{
                                left: 65px;
                                top: 20px;
                            }
                            50%{
                                left: 5px;
                            }
                            62.5%{
                                top: 50px;
                            }
                            75%{
                                left: 65px;
                                top: 70%;
                            }
                            100%{
                                left: 5px;
                                top: 0;
                            }
                        }
                        @keyframes loading-1{
                            0%{
                                left: 5px;
                                top: 0;
                            }
                            25%{
                                left: 65px;
                                top: 20px;
                            }
                            50%{
                                left: 5px;
                            }
                            62.5%{
                                top: 50px;
                            }
                            75%{
                                left: 65px;
                                top: 70%;
                            }
                            100%{
                                left: 5px;
                                top: 0;
                            }
                        }
                        @-webkit-keyframes loading-2{
                            0%{
                                box-shadow: inset #424544 0 5px 0 0, inset #424544 0 -35px 0 0, inset #424544 -3px 0 0 0, inset #f2e647  -10px 0 0 0;
                            }
                            25%{
                                box-shadow: inset #424544 0 15px 0 0, inset #424544 0 -25px 0 0, inset #424544 -3px 0 0 0, inset #f2e647  -10px 0 0 0;
                            }
                            50%{
                                box-shadow: inset #424544 0 0 0 0, inset #424544 0 -40px 0 0, inset #424544 -3px 0 0 0, inset #f2e647  -10px 0 0 0;
                            }
                            62.5%{
                                box-shadow: inset #424544 0 10px 0 0, inset #424544 0 -30px 0 0, inset #424544 -3px 0 0 0, inset #f2e647  -10px 0 0 0;
                            }
                            75%{
                                box-shadow: inset #424544 0 40px 0 0, inset #424544 0 0 0 0, inset #424544 -3px 0 0 0, inset #f2e647  -10px 0 0 0;
                            }
                            100%{
                                box-shadow: inset #424544 0 5px 0 0, inset #424544 0 -35px 0 0, inset #424544 -3px 0 0 0, inset #f2e647  -10px 0 0 0;
                            }
                        }
                        @keyframes loading-2{
                            0%{
                                box-shadow: inset #424544 0 5px 0 0, inset #424544 0 -35px 0 0, inset #424544 -3px 0 0 0, inset #f2e647  -10px 0 0 0;
                            }
                            25%{
                                box-shadow: inset #424544 0 15px 0 0, inset #424544 0 -25px 0 0, inset #424544 -3px 0 0 0, inset #f2e647  -10px 0 0 0;
                            }
                            50%{
                                box-shadow: inset #424544 0 0 0 0, inset #424544 0 -40px 0 0, inset #424544 -3px 0 0 0, inset #f2e647  -10px 0 0 0;
                            }
                            62.5%{
                                box-shadow: inset #424544 0 10px 0 0, inset #424544 0 -30px 0 0, inset #424544 -3px 0 0 0, inset #f2e647  -10px 0 0 0;
                            }
                            75%{
                                box-shadow: inset #424544 0 40px 0 0, inset #424544 0 0 0 0, inset #424544 -3px 0 0 0, inset #f2e647  -10px 0 0 0;
                            }
                            100%{
                                box-shadow: inset #424544 0 5px 0 0, inset #424544 0 -35px 0 0, inset #424544 -3px 0 0 0, inset #f2e647  -10px 0 0 0;
                            }
                        }
                        @-webkit-keyframes loading-3{
                            0%{
                                box-shadow: inset #424544 0 0 0 0, inset #424544 0 -40px 0 0, inset #424544 3px 0 0 0, inset #f2e647  -10px 0 0 0;
                            }
                            50%{
                                box-shadow: inset #424544 0 30px 0 0, inset #424544 0 -10px 0 0, inset #424544 3px 0 0 0, inset #f2e647  -10px 0 0 0;
                            }
                            62.5%{
                                box-shadow: inset #424544 0 40px 0 0, inset #424544 0 0 0 0, inset #424544 3px 0 0 0, inset #f2e647  -10px 0 0 0;
                            }
                            75%{
                                box-shadow: inset #424544 0 20px 0 0, inset #424544 0 -20px 0 0, inset #424544 3px 0 0 0, inset #f2e647  -10px 0 0 0;
                            }
                            100%{
                                box-shadow: inset #424544 0 0 0 0, inset #424544 0 -40px 0 0, inset #424544 3px 0 0 0, inset #f2e647  -10px 0 0 0;
                            }
                        }
                        @keyframes loading-3{
                            0%{
                                box-shadow: inset #424544 0 0 0 0, inset #424544 0 -40px 0 0, inset #424544 3px 0 0 0, inset #f2e647  -10px 0 0 0;
                            }
                            50%{
                                box-shadow: inset #424544 0 30px 0 0, inset #424544 0 -10px 0 0, inset #424544 3px 0 0 0, inset #f2e647  -10px 0 0 0;
                            }
                            62.5%{
                                box-shadow: inset #424544 0 40px 0 0, inset #424544 0 0 0 0, inset #424544 3px 0 0 0, inset #f2e647  -10px 0 0 0;
                            }
                            75%{
                                box-shadow: inset #424544 0 20px 0 0, inset #424544 0 -20px 0 0, inset #424544 3px 0 0 0, inset #f2e647  -10px 0 0 0;
                            }
                            100%{
                                box-shadow: inset #424544 0 0 0 0, inset #424544 0 -40px 0 0, inset #424544 3px 0 0 0, inset #f2e647  -10px 0 0 0;
                            }
                        }
                    
License Terms