preloader style : demo 275

HTML

                        

CSS

                        .loader{
                            background: #fff;
                            width: 85px;
                            height: 85px;
                            margin: 50px auto 0;
                            border-radius: 12px;
                            position: relative;
                            animation: rotationBox ease-in-out 5s infinite;
                        }
                        .loader .dots{
                            width: 20px;
                            height: 20px;
                            border-radius: 20px;
                            border: 3px solid #455A64;
                            position: absolute;
                        }
                        .loader .dots:nth-child(1){ animation: dot1 ease-in-out 5s infinite; }
                        .loader .dots:nth-child(2){ animation: dot2 ease-in-out 5s infinite; }
                        .loader .dots:nth-child(3){ animation: dot3 ease-in-out 5s infinite; }
                        @keyframes dot1{
                            0%{
                                width: 55px;
                                transform: translate(15px, 50px);
                            }
                            25%{
                                width: 20px;
                                transform: translate(15px, 50px);
                            }
                            50%{
                                height: 20px;
                                transform: translate(15px, 50px);
                            }
                            75%{
                                height: 55px;
                                transform: translate(15px, 15px);
                            }
                            100%{
                                height: 20px;
                                transform: translate(15px, 15px);
                            }
                        }
                        @keyframes dot2{
                            0%{
                                height: 20px;
                                transform: translate(50px, 15px);
                            }
                            25%{
                                height: 55px;
                                transform: translate(50px, 15px);
                            }
                            50%{
                                height: 20px;
                                width: 20px;
                                transform: translate(50px, 50px);
                            }
                            75%{
                                width: 20px;
                                transform: translate(50px, 50px);
                            }
                            100%{
                                width: 55px;
                                transform: translate(15px, 50px);
                            }
                        }
                        @keyframes dot3{
                            0%{ transform: translate(15px, 15px); }
                            25%{
                                width: 20px;
                                transform: translate(15px, 15px);
                            }
                            50%{
                                width: 55px;
                                transform: translate(15px, 15px);
                            }
                            75%{
                                width: 20px;
                                transform: translate(50px, 15px);
                            }
                            100%{ transform: translate(50px, 15px); }
                        }
                        @keyframes rotationBox{
                            0%{
                                box-shadow: 0px 10px 0px rgba(0, 0, 0, .2), 0px 10px 25px rgba(0, 0, 0, .1);
                                transform: rotate(0deg);
                            }
                            25%{
                                box-shadow: 10px 0 0px rgba(0, 0, 0, .2), 10px 0 25px rgba(0, 0, 0, .1);
                                transform: rotate(90deg);
                            }
                            50%{
                                box-shadow: 0 calc(10px*-1) 0px rgba(0, 0, 0, .2), 0 calc(10px*-1) 25px rgba(0, 0, 0, .1);
                                transform: rotate(180deg);
                            }
                            75%{
                                box-shadow: calc(10px*-1) 0px 0px rgba(0, 0, 0, .2), calc(10px*-1) 0px 25px rgba(0, 0, 0, .1);
                                transform: rotate(270deg);
                            }
                            100%{
                                box-shadow: 0px 10px 0px rgba(0, 0, 0, .2), 0px 10px 25px rgba(0, 0, 0, .1);
                                transform: rotate(360deg);
                            }
                        }
                    
License Terms