preloader style : demo 55

HTML

                        

CSS

                        .loader{
                            width: 50px;
                            height: 50px;
                            margin: 30px auto;
                            position: relative;
                        }
                        .loader-inner{
                            width: 40px;
                            height: 40px;
                            border-radius: 50%;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            margin-left: -20px;
                            margin-top: -20px;
                            animation: loading2 4s infinite ease-in, loading1 2s infinite ease-in;
                        }
                        .loader-inner:after{
                            content: "";
                            width: 10px;
                            height: 10px;
                            border-radius: 50%;
                            background: #ecf0f1;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform-origin: left top;
                            animation: loading3 1s infinite linear;
                        }
                        @-webkit-keyframes loading1{
                            from {
                                width: 40px;
                                height: 40px;
                            }
                            25% {
                                width: 60px;
                                height: 60px;
                                margin-top: -30px;
                                margin-left: -30px;
                            }
                            50% {
                                width: 40px;
                                height: 40px;
                                margin-top: -20px;
                                margin-left: -20px;
                            }
                            75% {
                                width: 60px;
                                height: 60px;
                                margin-top: -30px;
                                margin-left: -30px;
                            }
                            to {
                                width: 40px;
                                height: 40px;
                                margin-top: -20px;
                                margin-left: -20px;
                            }
                        }
                        @keyframes loading1{
                            from {
                                width: 40px;
                                height: 40px;
                            }
                            25% {
                                width: 60px;
                                height: 60px;
                                margin-top: -30px;
                                margin-left: -30px;
                            }
                            50% {
                                width: 40px;
                                height: 40px;
                                margin-top: -20px;
                                margin-left: -20px;
                            }
                            75% {
                                width: 60px;
                                height: 60px;
                                margin-top: -30px;
                                margin-left: -30px;
                            }
                            to {
                                width: 40px;
                                height: 40px;
                                margin-top: -20px;
                                margin-left: -20px;
                            }
                        }
                        @-webkit-keyframes loading2{
                            from {
                                background-color: #727cb6;
                            }
                            25% {
                                background-color: #e67e22;
                            }
                            50% {
                                background-color: #1abc9c;
                            }
                            75% {
                                background-color: #ed687c;
                            }
                            to {
                                background-color: #727cb6;
                            }
                        }
                        @keyframes loading2{
                            from {
                                background-color: #727cb6;
                            }
                            25% {
                                background-color: #e67e22;
                            }
                            50% {
                                background-color: #1abc9c;
                            }
                            75% {
                                background-color: #ed687c;
                            }
                            to {
                                background-color: #727cb6;
                            }
                        }
                        @-webkit-keyframes loading3{
                            from {
                                transform: rotate(0deg);
                            }
                            to {
                                transform: rotate(360deg);
                            }
                        }
                        @keyframes loading3{
                            from {
                                transform: rotate(0deg);
                            }
                            to {
                                transform: rotate(360deg);
                            }
                        }
                    
License Terms