preloader style : demo 169

                        .loader{
                            width: 100px;
                            height: 100px;
                            margin: 50px auto;
                            position: relative;
                        }
                        .loader .loader-inner-1,
                        .loader .loader-inner-2,
                        .loader .loader-inner-3,
                        .loader .loader-inner-4{
                            display: block;
                            width: 20px;
                            height: 20px;
                            border-radius: 20px;
                            position: absolute;
                        }
                        .loader .loader-inner-1:before,
                        .loader .loader-inner-2:before,
                        .loader .loader-inner-3:before,
                        .loader .loader-inner-4:before{
                            content: "";
                            display: block;
                            width: 20px;
                            height: 20px;
                            border-radius: 20px;
                            position: absolute;
                            right: 0;
                            animation-name: loading-1;
                            animation-iteration-count: infinite;
                            animation-direction: normal;
                            animation-duration: 2s;
                        }
                        .loader .loader-inner-1{
                            top: 0;
                            left: 0;
                            transform: rotate(70deg);
                        }
                        .loader .loader-inner-1:before{ background: #06aed5; }
                        .loader .loader-inner-2{
                            top: 0;
                            right: 0;
                            transform: rotate(160deg);
                        }
                        .loader .loader-inner-2:before{ background: #ec008c; }
                        .loader .loader-inner-3{
                            bottom: 0;
                            right: 0;
                            transform: rotate(-110deg);
                        }
                        .loader .loader-inner-3:before{ background: #ffbf00; }
                        .loader .loader-inner-4{
                            bottom: 0;
                            left: 0;
                            transform: rotate(-20deg);
                        }
                        .loader .loader-inner-4:before{ background: #079c00; }
                        @keyframes loading-1{
                            0%{
                                width: 20px;
                                right: 0;
                            }
                            30%{
                                width: 120px;
                                right: -100px;
                            }
                            60%{
                                width: 20px;
                                right: -100px;
                            }
                        }