preloader style : demo 183

HTML

                        

CSS

                        .demo{ background: #454444; }
                        .loader{
                            width: 70px;
                            height: 70px;
                            border-radius: 50%;
                            background: #1bb1e9;
                            margin: 40px auto;
                            position: relative;
                            -webkit-animation: loading-2 0.5s ease-in-out infinite;
                            animation: loading-2 0.5s ease-in-out infinite;
                            -webkit-animation-direction: alternate;
                            animation-direction: alternate;
                        }
                        .loader:before,
                        .loader:after{
                            content: "";
                            position: absolute;
                        }
                        .loader:before{
                            width: 60px;
                            height: 60px;
                            border-radius: 50%;
                            background: #454444;
                            top: 10px;
                            left: 15px;
                            -webkit-animation: loading-1 1s ease-in-out infinite;
                            animation: loading-1 1s ease-in-out infinite;
                            -webkit-animation-direction: alternate;
                            animation-direction: alternate;
                        }
                        .loader:after{
                            width: 40px;
                            height: 40px;
                            border-radius: 50%;
                            background: #48cafa;
                            top: 20px;
                            left: 25px;
                            -webkit-animation: loading-1 1.5s ease-in-out infinite;
                            animation: loading-1 1.5s ease-in-out infinite;
                            -webkit-animation-direction: alternate;
                            animation-direction: alternate;
                        }
                        @-webkit-keyframes loading-1{
                            0%{
                                -webkit-transform: scale(1);
                                transform: scale(1);
                            }
                            65%{
                                -webkit-transform: scale(0.3);
                                transform: scale(0.3);
                            }
                            100%{
                                -webkit-transform: scale(1.3);
                                transform: scale(1.3);
                            }
                        }
                        @keyframes loading-1{
                            0%{
                                -webkit-transform: scale(1);
                                transform: scale(1);
                            }
                            65%{
                                -webkit-transform: scale(0.3);
                                transform: scale(0.3);
                            }
                            100%{
                                -webkit-transform: scale(1.3);
                                transform: scale(1.3);
                            }
                        }
                        @-webkit-keyframes loading-2{
                            from{
                                -webkit-transform: scale(1);
                                transform: scale(1);
                            }
                            to{
                                -webkit-transform: scale(1.1);
                                transform: scale(1.1);
                            }
                        }
                        @keyframes loading-2{
                            from{
                                -webkit-transform: scale(1);
                                transform: scale(1);
                            }
                            to{
                                -webkit-transform: scale(1.1);
                                transform: scale(1.1);
                            }
                        }
                    
License Terms