preloader style : demo 184

                        .demo{ background: #174c62; }
                        .loader{
                            width: 19px;
                            height: 19px;
                            margin: 70px auto;
                            position: relative;
                        }
                        .loader .loader-inner-1{
                            width: 18px;
                            height: 18px;
                            border-radius: 50%;
                            background: #e0be29;
                            position: absolute;
                            top: 1px;
                            left: 1px;
                            animation: loading-1 2.88s 0s infinite both;
                        }
                        .loader .loader-inner-2{
                            width: 19px;
                            height: 19px;
                            border-radius: 50%;
                            background: #e0be29;
                            position: absolute;
                            animation: loading-2 2.88s 0s infinite both;
                        }
                        @keyframes loading-1{
                            0%,100%{
                                box-shadow: 0 0 0 #e0be29,
                                0 0 0 #e0be29,
                                0 0 0 #e0be29,
                                0 0 0 #e0be29,
                                0 0 0 #e0be29,
                                0 0 0 #e0be29,
                                0 0 0 #e0be29,
                                0 0 0 #e0be29;
                            }
                            50%{
                                transform: rotate(180deg);
                            }
                            25%,75%{
                                box-shadow: 27px 0 0 #e0be29, -27px 0 0 #e0be29, 0 27px 0 #e0be29, 0 -27px 0 #e0be29, 19px -19px 0 #e0be29, 19px 19px 0 #e0be29, -19px -19px 0 #e0be29, -19px 19px 0 #e0be29;
                            }
                            100%{
                                transform: rotate(360deg);
                                box-shadow: 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29;
                            }
                        }
                        @keyframes loading-2{
                            0%,100%{
                                box-shadow: 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29;
                            }
                            50%{
                                transform: rotate(-180deg);
                            }
                            25%,75%{
                                box-shadow: 51px 0 0 #e0be29, -51px 0 0 #e0be29, 0 51px 0 #e0be29, 0 -51px 0 #e0be29, 37px -37px 0 #e0be29, 37px 37px 0 #e0be29, -37px -37px 0 #e0be29, -37px 37px 0 #e0be29;
                                background: transparent;
                            }
                            100%{
                                transform: rotate(-360deg);
                                box-shadow: 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29, 0 0 0 #e0be29;
                            }
                        }