preloader style : demo 122

HTML

                        

CSS

                        .demo{ background: #3c3c3c; }
                        .loader{
                            width: 210px;
                            height: 210px;
                            margin: 50px auto;
                        }
                        .loader div{
                            width: 100px;
                            height: 100px;
                            float: left;
                            position: relative;
                            animation: 3s linear 0s normal none infinite running loading-1;
                        }
                        .loader .box-1{
                            top: 15px;
                            left: 15px;
                            background: rgba(255, 192, 0, 0.5);
                            border-radius: 0 50% 50%;
                            box-shadow: 0 0 15px #ffc000 inset, 0 0 15px rgba(255, 255, 255, 0.2);
                        }
                        .loader .box-2{
                            top: 15px;
                            right: 15px;
                            background: rgba(227, 65, 114, 0.5);
                            border-radius: 50% 0 50% 50%;
                            box-shadow: 0 0 15px #e34172 inset, 0 0 15px rgba(255, 255, 255, 0.2);
                        }
                        .loader .box-3{
                            bottom: 15px;
                            left: 15px;
                            background: rgba(134, 93, 194, 0.5);
                            border-radius: 50% 50% 50% 0;
                            box-shadow: 0 0 15px #865dc2 inset, 0 0 15px rgba(255, 255, 255, 0.2);
                        }
                        .loader .box-4{
                            bottom: 15px;
                            right: 15px;
                            background: rgba(6, 148, 126, 0.5);
                            border-radius: 50% 50% 0;
                            box-shadow: 0 0 15px #06947e inset, 0 0 15px rgba(255, 255, 255, 0.2);
                        }
                        @-webkit-keyframes loading-1{
                            from { transform:rotate(0deg); }
                            to { transform:rotate(360deg); }
                        }
                        @keyframes loading-1{
                            from { transform:rotate(0deg); }
                            to { transform:rotate(360deg); }
                        }
                    
License Terms