preloader style : demo 270

HTML

                        

CSS

                        .loader{
                            width: 90px;
                            height: 90px;
                            margin: 70px auto;
                            position: relative;
                            animation: move 0.5s ease infinite alternate;
                        }
                        .loader:after{
                            content: '';
                            background: radial-gradient(#999,transparent,transparent);
                            height: 20px;
                            width: 100%;
                            border-radius: 50%;
                            position: absolute;
                            left: 0;
                            bottom: -5px;
                            z-index: -1;
                        }
                        .diamond{
                            width: 60px;
                            height: 60px;
                            transform: translateY(-50%);
                            transform-style: preserve-3d;
                            position:absolute;
                            top: 50%;
                            left: 14px;
                            animation: spin 1s linear infinite;
                        }
                        .diamond span{
                            width: 60px;
                            height: 60px;
                            position: absolute;
                            top: 0;
                            left: 0;
                        }
                        .diamond span:nth-child(1){
                            border: 10px solid #6c5ce7;
                            border-left-color: #a29bfe;
                            border-right-color: #a29bfe;
                            transform: rotateX(90deg) rotateZ(45deg);
                        }
                        .diamond span:nth-child(2){
                            border: 6px solid #a29bfe;
                            border-left-color: #6c5ce7;
                            border-right-color: #6c5ce7;
                            transform: rotateX(90deg) rotateY(90deg) rotateZ(45deg);
                        }
                        .diamond span:last-child{
                            border: 6px solid #6c5ce7;
                            border-left-color: #a29bfe;
                            border-right-color: #a29bfe;
                            transform: rotateZ(45deg);
                        }
                        @keyframes move{
                            0%{ transform: translateY(0) scaleY(0.9); }
                            100%{ transform: translateY(-70px) scaleY(1.1); }
                        }
                        @keyframes spin{
                            0%{ transform: translateY(-50%) rotateX(-15deg) rotateY(0deg); }
                            100%{ transform: translateY(-50%) rotateX(-15deg) rotateY(180deg); }
                        }
                    
License Terms