preloader style : demo 226

                        .loader { margin: 50px auto 0; }
                        .dash-box{
                            text-align: center;
                            padding: 0;
                            margin: 0;
                            list-style: none;
                            display: block;
                        }
                        .dash{
                            background: linear-gradient(45deg,#20a34c,#34d367,#20a34c,#34d367,#20a34c);
                            width: 35px;
                            height: 15px;
                            margin: 0 15px;
                            border-radius: 8px;
                            box-shadow: 0 0 10px 0 #8bedac;
                            display: inline-block;
                        }
                        .uno{
                            margin-right: -18px;
                            transform-origin: center left;
                            animation: spin 3s linear infinite;
                        }
                        .dos{
                            transform-origin: center right;
                            animation: spin2 3s linear infinite;
                            animation-delay: .2s;
                        }
                        .tres{
                            transform-origin: center right;
                            animation: spin3 3s linear infinite;
                            animation-delay: .3s;
                        }
                        .cuatro{
                            transform-origin: center right;
                            animation: spin4 3s linear infinite;
                            animation-delay: .4s;
                        }
                        @keyframes spin{
                            0%{ transform: rotate(0deg); }
                            25%{ transform: rotate(360deg); }
                            30%{ transform: rotate(370deg); }
                            35%{ transform: rotate(360deg); }
                            100%{ transform: rotate(360deg); }
                        }
                        @keyframes spin2{
                            0%{ transform: rotate(0deg); }
                            20%{ transform: rotate(0deg); }
                            30%{ transform: rotate(-180deg); }
                            35%{ transform: rotate(-190deg); }
                            40%{ transform: rotate(-180deg); }
                            78%{ transform: rotate(-180deg); }
                            95%{ transform: rotate(-360deg); }
                            98%{ transform: rotate(-370deg); }
                            100%{ transform: rotate(-360deg); }
                        }
                        @keyframes spin3{
                            0%{ transform: rotate(0deg); }
                            27%{ transform: rotate(0deg); }
                            40%{ transform: rotate(180deg); }
                            45%{ transform: rotate(190deg); }
                            50%{ transform: rotate(180deg); }
                            62%{ transform: rotate(180deg); }
                            75%{ transform: rotate(360deg); }
                            80%{ transform: rotate(370deg); }
                            85%{ transform: rotate(360deg); }
                            100%{ transform: rotate(360deg); }
                        }
                        @keyframes spin4{
                            0%{ transform: rotate(0deg); }
                            38%{ transform: rotate(0deg); }
                            60%{ transform: rotate(-360deg); }
                            65%{ transform: rotate(-370deg); }
                            75%{ transform: rotate(-360deg); }
                            100%{ transform: rotate(-360deg); }
                        }