preloader style : demo 130

HTML

                        

CSS

                        .demo{ background: #000f2b; }
                        .loader{
                            width: 120px;
                            height: 120px;
                            margin: 50px auto;
                            position: relative;
                        }
                        .loader .loader-inner{
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            top: 0;
                            left: 0;
                            animation-name: loading-1;
                            animation-duration: 0.4s;
                            animation-iteration-count: infinite;
                            animation-timing-function: linear;
                        }
                        .loader .loader-inner div{
                            width: 10px;
                            height: 10px;
                            border-radius: 50%;
                            margin: auto;
                            border: 1px solid #f6844e;
                            position: absolute;
                            top: 2px;
                            left: 0;
                            bottom: 0;
                            right: 0;
                        }
                        .loader .loader-inner div:nth-child(odd){
                            border-top: none;
                            border-left: none;
                        }
                        .loader .loader-inner div:nth-child(even){
                            border-bottom: none;
                            border-right: none;
                        }
                        .loader .loader-inner div:nth-child(2){
                            width: 14px;
                            height: 14px;
                            border-width: 2px;
                            top: -4px;
                            left: 0;
                        }
                        .loader .loader-inner div:nth-child(3){
                            width: 20px;
                            height: 20px;
                            border-width: 2px;
                            top: 3px;
                            left: -1px;
                        }
                        .loader .loader-inner div:nth-child(4){
                            width: 25px;
                            height: 25px;
                            border-width: 3px;
                            top: -4px;
                            left: -1px;
                        }
                        .loader .loader-inner div:nth-child(5){
                            width: 33px;
                            height: 33px;
                            border-width: 3px;
                            top: 4px;
                            left: -1px;
                        }
                        .loader .loader-inner div:nth-child(6){
                            width: 41px;
                            height: 41px;
                            border-width: 4px;
                            top: -4px;
                            left: 0;
                        }
                        .loader .loader-inner div:nth-child(7){
                            width: 51px;
                            height: 51px;
                            border-width: 4px;
                            top: 6px;
                            left: 0;
                        }
                        @-webkit-keyframes loading-1{
                            from{
                                -webkit-transform: rotate(360deg);
                            }
                            to{
                                -webkit-transform: rotate(0deg);
                            }
                        }
                        @keyframes loading-1{
                            from{
                                transform: rotate(360deg);
                            }
                            to{
                                transform: rotate(0deg);
                            }
                        }
                    
License Terms