preloader style : demo 268

HTML

                        

CSS

                        .loader{
                            background-color: #ff4e5b;
                            width: 70px;
                            height: 70px;
                            margin: 70px auto 0;
                            border-radius: 10px 0 100px 0;
                            border-right: 7px solid #84F7A6;
                            border-bottom: 7px solid #84F7A6;
                            box-shadow: 10px 10px 14px -8px rgba(94,93,94,1);
                            transform-origin: top left;
                            position: relative;
                            animation: spin 1500ms ease-out infinite;
                        }
                        .loader:after{
                            content: "";
                            width: 76px;
                            height: 76px;
                            border-radius: 0 5px 150px 5px;
                            border-right: 7px solid  #8DD252;
                            border-bottom: 7px solid #8DD252;
                            position: absolute;
                            top: 0;
                            left: 0;
                        }
                        .loader span{
                            background: rgb(52, 52, 52);
                            width: 4px;
                            height: 6px;
                            margin: 4px 6px;
                            border-radius: 50%;
                            display: inline-block;
                            transform: rotate(-45deg);
                        }
                        @keyframes spin{
                            10%{
                                background-color: #ff6670;
                                transform: rotate(36deg);
                            }
                            20%{
                                background-color: #FE8E8C;
                                transform: rotate(72deg);
                            }
                            40%{
                                background-color: #F6B13C;
                                transform: rotate(144deg);
                            }
                            60%{
                                background-color: #FE9F12;
                                transform: rotate(216deg);
                            }
                            80%{
                                background-color: #EA4647;
                                transform: rotate(288deg);
                            }
                            100%{
                                background-color: #E23248;
                                transform: rotate(360deg);
                            }
                        }
                    
License Terms