preloader style : demo 74

HTML

                        

CSS

                        .demo{
                            background:#f3904d;
                        }
                        .loader{
                            width: 250px;
                            height: 250px;
                            border-radius: 50%;
                            background: #54478a;
                            margin: 50px auto;
                            position: relative;
                        }
                        .loader:after{
                            content: "LOADING...";
                            width: 250px;
                            position: absolute;
                            top: 150px;
                            left: 0;
                            font-weight: 700;
                            color: #54478a;
                            text-align: center;
                            -webkit-animation: loading-3 .5s ease-in-out alternate infinite;
                            animation: loading-3 .5s ease-in-out alternate infinite;
                        }
                        .loader:before{
                            content: "";
                            width: 252px;
                            height: 126px;
                            background: #f3904d;
                            position: absolute;
                            top: 125px;
                            left: -1px;
                        }
                        .loader-inner-2{
                            width: 190px;
                            height: 190px;
                            border-radius: 50%;
                            background: #f3904d;
                            position: relative;
                            top: 30px;
                            left: 30px;
                            -webkit-animation: loading-1 .5s ease-in-out alternate infinite;
                            animation: loading-1 .5s ease-in-out alternate infinite;
                        }
                        .loader-inner-1{
                            width: 250px;
                            height: 250px;
                            border-radius: 50%;
                            position: absolute;
                            left: 0;
                            top: 0;
                            -webkit-transform-origin: top top;
                            -webkit-animation: loading-2 1s ease-in-out alternate infinite;
                            transform-origin: top top;
                            animation: loading-2 1s ease-in-out alternate infinite;
                        }
                        .loader-inner-1:after{
                            content: "";
                            width: 252px;
                            height: 126px;
                            background: #f3904d;
                            position: absolute;
                            top: 125px;
                            left: -1px;
                        }
                        @-webkit-keyframes loading-1{
                            0%{
                                width: 190px;
                                height: 190px;
                                top: 30px;
                                left: 30px;
                            }
                            100%{
                                width: 244px;
                                height: 244px;
                                top: 3px;
                                left: 3px;
                            }
                        }
                        @keyframes loading-1{
                            0%{
                                width: 190px;
                                height: 190px;
                                top: 30px;
                                left: 30px;
                            }
                            100%{
                                width: 244px;
                                height: 244px;
                                top: 3px;
                                left: 3px;
                            }
                        }
                        @-webkit-keyframes loading-2{
                            0%{
                                -webkit-transform: rotate(160deg);
                            }
                            100%{
                                -webkit-transform: rotate(-160deg);
                            }
                        }
                        @keyframes loading-2{
                            0%{
                                transform: rotate(160deg);
                            }
                            100%{
                                transform: rotate(-160deg);
                            }
                        }
                        @-webkit-keyframes loading-3{
                            0%{
                                opacity: 1;
                            }
                            100%{
                                opacity: 0;
                            }
                        }
                        @keyframes loading-3{
                            0%{
                                opacity: 1;
                            }
                            100%{
                                opacity: 0;
                            }
                        }
                    
License Terms