preloader style : demo 188

HTML

                        

CSS

                        .demo{ background: #d33d3d; }
                        .loader{
                            width: 150px;
                            height: 150px;
                            margin: 0 auto;
                            overflow: hidden;
                            position: relative;
                        }
                        .loader .loader-inner{
                            width: 10px;
                            height: 10px;
                            border-radius: 50%;
                            background: #f4f203;
                            margin: 0 auto;
                            color: #f4f203;
                            position: relative;
                            top: 45%;
                            transform: translateZ(0);
                            animation: loading-1 1.3s infinite linear;
                        }
                        .loader .loader-inner:before{
                            content: "";
                            width: 20px;
                            height: 2px;
                            background: #f4f203;
                            position: absolute;
                            top: 4px;
                            left: -5px;
                        }
                        .loader .loader-inner:after{
                            content: "";
                            position: absolute;
                            width: 2px;
                            height: 20px;
                            background: #f4f203;
                            top: -50%;
                            left: 4px;
                        }
                        @keyframes loading-1{
                            0%,100%{
                                box-shadow: 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0 ;
                                transform: rotate(0deg);
                            }
                            30%{
                                box-shadow: 20px 0 0 0, 0 20px 0 0, -20px 0 0 0, 0 -20px 0 0, 15px -15px 0 0, -15px 15px 0 0, -15px -15px 0 0, 15px 15px 0 0;
                            }
                            60%{
                                box-shadow: 30px 0 0 0, 0 30px 0 0, -30px 0 0 0, 0 -30px 0 0, 8px -8px 0 0, -8px 8px 0 0, -8px -8px 0 0, 8px 8px 0 0;
                            }
                            100%{
                                transform: rotate(360deg);
                            }
                        }
                    
License Terms