preloader style : demo 194

HTML

                        

CSS

                        .demo{ background: #312b5e; }
                        .loader{
                            width: 300px;
                            height: 300px;
                            margin: 0 auto;
                            position: relative;
                        }
                        .loader .loader-inner-1{
                            width: 300px;
                            height: 300px;
                            border-radius: 50%;
                            border-bottom: 10px dashed #fca107;
                            position: absolute;
                            animation: loading-1 5s infinite linear;
                        }
                        .loader .loader-inner-2{
                            width: 200px;
                            height: 200px;
                            border-radius: 50%;
                            border-bottom: 10px dotted #78f124;
                            position: absolute;
                            top: 50px;
                            left: 45px;
                            animation: loading-1 1s infinite linear;
                        }
                        .loader .loader-inner-3{
                            width: 100px;
                            height: 100px;
                            border-radius: 50%;
                            border-bottom: 5px solid #ff0728;
                            position: absolute;
                            top: 100px;
                            left: 90px;
                            animation: loading-1 2s infinite linear;
                        }
                        @keyframes loading-1{
                            from{ -webkit-transform: rotate(0deg); }
                            to{ -webkit-transform: rotate(360deg); }
                        }
                    
License Terms