preloader style : demo 197

HTML

                        

CSS

                        .demo{ background: #23242c; }
                        .loader{
                            width: 40px;
                            height: 40px;
                            border-radius: 50%;
                            background: #e025a8;
                            margin: 50px auto;
                            transform-style: preserve-3d;
                            animation: loading-1 0.8s infinite ease-out;
                            animation-fill-mode: forwards;
                        }
                        @keyframes loading-1{
                            0%{
                                box-shadow: 0 0 0 10px #23242c, 0 0 0 12px rgba(224, 37, 168,0.75);
                            }
                            40%{
                                box-shadow: 0 0 0 10px transparent, 0 0 0 20px transparent;
                            }
                            50%{
                                background:  rgb(224, 37, 168);
                                transform: scale(1.3) rotateY(20deg);
                            }
                            100%{ transform: rotateY(180deg); }
                        }
                    
License Terms