preloader style : demo 157

HTML

                        

CSS

                        .demo{ background: #29335c; }
                        .loader{
                            width: 100px;
                            height: 100px;
                            margin: 30px auto 120px;
                            position: relative;
                        }
                        .loader .loader-inner{
                            width: 100%;
                            height: 100%;
                            border: 5px solid #fec524;
                            border-top: none;
                            position: absolute;
                            transform-origin: bottom;
                            -webkit-animation: loading-1 6s linear infinite;
                            animation: loading-1 6s linear infinite;
                        }
                        .loader .loader-inner:nth-child(0){ animation-delay: 0s; }
                        .loader .loader-inner:nth-child(1){ animation-delay: 1s; }
                        .loader .loader-inner:nth-child(2){ animation-delay: 2s; }
                        .loader .loader-inner:nth-child(3){ animation-delay: 3s; }
                        .loader .loader-inner:nth-child(4){ animation-delay: 4s; }
                        .loader .loader-inner:nth-child(5){ animation-delay: 5s; }
                        @-webkit-keyframes loading-1{
                            0%{
                                transform: rotate(0deg);
                            }
                            100%{
                                transform: rotate(360deg);
                            }
                        }
                        @keyframes loading-1{
                            0%{
                                transform: rotate(0deg);
                            }
                            100%{
                                transform: rotate(360deg);
                            }
                        }
                    
License Terms