preloader style : demo 156

HTML

                        

CSS

                        .demo{ background: #09273d; }
                        .loader{
                            width: 150px;
                            height: 150px;
                            margin: 50px auto;
                            overflow: hidden;
                            position: relative;
                        }
                        .loader .loader-inner{ height: 100%; }
                        .loader,
                        .loader .loader-inner{
                            padding: 8px;
                            border-radius: 50%;
                            border: 2px solid transparent;
                            border-top-color: #cf1c5d;
                            border-left-color: #ddfe33;
                            -webkit-animation: loading-1 linear 3.5s infinite;
                            animation: loading-1 linear 3.5s infinite;
                            -webkit-animation-timing-function: cubic-bezier(0.55, 0.38, 0.21, 0.88);
                            animation-timing-function: cubic-bezier(0.55, 0.38, 0.21, 0.88);
                            -webkit-animation-duration: 3s;
                            animation-duration: 3s;
                        }
                        @-webkit-keyframes loading-1{
                            0%{
                                -webkit-transform: rotate(0deg);
                                transform: rotate(0deg);
                            }
                            50%{
                                -webkit-transform: rotate(180deg);
                                transform: rotate(180deg);
                            }
                            100%{
                                -webkit-transform: rotate(360deg);
                                transform: rotate(360deg);
                            }
                        }
                        @keyframes loading-1{
                            0%{
                                -webkit-transform: rotate(0deg);
                                transform: rotate(0deg);
                            }
                            50%{
                                -webkit-transform: rotate(180deg);
                                transform: rotate(180deg);
                            }
                            100%{
                                -webkit-transform: rotate(360deg);
                                transform: rotate(360deg);
                            }
                        }
                    
License Terms