preloader style : demo 247

HTML

                        

CSS

                        .loader{
                            width: 70px;
                            height: 70px;
                            margin: 50px auto 15px;
                            position: relative;
                        }
                        .loader .blob{
                            width: 25px;
                            height: 25px;
                            border-radius: 50%;
                            border: 2px solid #ff3838;
                            transform: translate(-50%, -50%);
                            position: absolute;
                            top: 50%;
                            left: 50%;
                        }
                        .loader .blob.top{
                            top: 0;
                            animation: blob-top 1s infinite ease-in;
                        }
                        .loader .blob.bottom{
                            border-color: #20bf6b;
                            top: 100%;
                            animation: blob-bottom 1s infinite ease-in;
                        }
                        .loader .blob.left{
                            border-color: #1B9CFC;
                            left: 0;
                            animation: blob-left 1s infinite ease-in;
                        }
                        .loader .move-blob{
                            background: #ff3838;
                            top: 0;
                            animation: blob-spinner-mover 1s infinite ease-in;
                        }
                        @keyframes blob-top{
                            50%{
                                top: 0;
                                left: 50%;
                            }
                            75%, 100%{
                                top: 50%;
                                left: 0;
                            }
                        }
                        @keyframes blob-bottom{
                            25%, 50%, 75%{
                                top: 50%;
                                left: 100%;
                            }
                            100%{
                                top: 0;
                                left: 50%;
                            }
                        }
                        @keyframes blob-left{
                            25%{
                                top: 50%;
                                left: 0;
                            }
                            50%, 100%{
                                top: 100%;
                                left: 50%;
                            }
                        }
                        @keyframes  blob-spinner-mover{
                            0%,100%{
                                background: #ff3838;
                                top: 0;
                                left: 50%;
                            }
                            25%{
                                background: #20bf6b;
                                border-color: #20bf6b;
                                top: 50%;
                                left: 100%;
                            }
                            50%{
                                background: #1B9CFC;
                                border-color: #1B9CFC;
                                top: 100%;
                                left: 50%;
                            }
                            75%{
                                background: #ff3838;
                                border-color: #ff3838;
                                top: 50%;
                                left: 0;
                            }
                        }
                    
License Terms