preloader style : demo 102

HTML

                        

CSS

                        .demo{ background: #40413f; }
                        .loader{
                            width: 60px;
                            height: 50px;
                            margin: 50px auto;
                            position: relative;
                        }
                        .loader .loader-inner{
                            position: absolute;
                            border-top: 24px solid #ffe100;
                            border-left: 14.43px solid transparent;
                            border-right: 14.43px solid transparent;
                        }
                        .loader .box-1{
                            -webkit-animation: loading-1 4s linear infinite;
                            animation: loading-1 4s linear infinite;
                        }
                        .loader .box-2{
                            -webkit-animation: loading-2 4s linear infinite;
                            animation: loading-2 4s linear infinite;
                        }
                        .loader .box-3{
                            -webkit-animation: loading-3 4s linear infinite;
                            animation: loading-3 4s linear infinite;
                        }
                        @-webkit-keyframes loading-1{
                            5%{
                                transform: rotate(0deg);
                                top: 0;
                                left: 0;
                            }
                            10%, 35%{
                                transform: rotate(120deg);
                                top: -6px;
                                left: -3px;
                            }
                            40%, 65%{
                                transform: rotate(240deg);
                                top: -6px;
                                left: 4px;
                            }
                            70%, 95%{
                                transform: rotate(360deg);
                                top: 0;
                                left: 0;
                            }
                            100%{
                                transform: rotate(360deg) translate(0px);
                                top: 0;
                                left: 0;
                            }
                        }
                        @keyframes loading-1{
                            5%{
                                transform: rotate(0deg);
                                top: 0;
                                left: 0;
                            }
                            10%, 35%{
                                transform: rotate(120deg);
                                top: -6px;
                                left: -3px;
                            }
                            40%, 65%{
                                transform: rotate(240deg);
                                top: -6px;
                                left: 4px;
                            }
                            70%, 95%{
                                transform: rotate(360deg);
                                top: 0;
                                left: 0;
                            }
                            100%{
                                transform: rotate(360deg) translate(0px);
                                top: 0;
                                left: 0;
                            }
                        }
                        @-webkit-keyframes loading-2{
                            5%{
                                transform: rotate(0deg);
                                top: 0;
                                left: 28px;
                            }
                            10%, 35%{
                                transform: rotate(120deg);
                                top: -6px;
                                left: 25px;
                            }
                            40%, 65%{
                                transform: rotate(240deg);
                                top: -6px;
                                left: 32px;
                            }
                            70%, 95%{
                                transform: rotate(360deg);
                                top: 0;
                                left: 28px;
                            }
                            100%{
                                transform: rotate(360deg) translate(0px);
                                top: 0;
                                left: 28px;
                            }
                        }
                        @keyframes loading-2{
                            5%{
                                transform: rotate(0deg);
                                top: 0;
                                left: 28px;
                            }
                            10%, 35%{
                                transform: rotate(120deg);
                                top: -6px;
                                left: 25px;
                            }
                            40%, 65%{
                                transform: rotate(240deg);
                                top: -6px;
                                left: 32px;
                            }
                            70%, 95%{
                                transform: rotate(360deg);
                                top: 0;
                                left: 28px;
                            }
                            100%{
                                transform: rotate(360deg) translate(0px);
                                top: 0;
                                left: 28px;
                            }
                        }
                        @-webkit-keyframes loading-3{
                            5%{
                                transform: rotate(0deg);
                                top: 24px;
                                left: 14px;
                            }
                            10%, 35%{
                                transform: rotate(120deg);
                                top: 18px;
                                left: 11px;
                            }
                            40%, 65%{
                                transform: rotate(240deg);
                                top: 18px;
                                left: 18px;
                            }
                            70%, 95%{
                                transform: rotate(360deg);
                                top: 24px;
                                left: 14px;
                            }
                            100%{
                                transform: rotate(360deg) translate(0px);
                                top: 24px;
                                left: 14px;
                            }
                        }
                        @keyframes loading-3{
                            5%{
                                transform: rotate(0deg);
                                top: 24px;
                                left: 14px;
                            }
                            10%, 35%{
                                transform: rotate(120deg);
                                top: 18px;
                                left: 11px;
                            }
                            40%, 65%{
                                transform: rotate(240deg);
                                top: 18px;
                                left: 18px;
                            }
                            70%, 95%{
                                transform: rotate(360deg);
                                top: 24px;
                                left: 14px;
                            }
                            100%{
                                transform: rotate(360deg) translate(0px);
                                top: 24px;
                                left: 14px;
                            }
                        }
                    
License Terms