splash.html

<link rel="stylesheet" href="css/splash.css">
<div class="container odisis-splash">
    <div class="row">
        <div class="col-md-3">
        </div>
        <div class="col-md-6" align="center">
            <img src="images/splash-logo.png">
        </div>
        <div class="col-md-3">
        </div>
    </div>

    <div class="row">
        <div class="col-md-3">
        </div>
        <div class="col-md-6" align="center">
            <div class="progress progress-striped active" style="height: 6px; width: 50%">
                <div class="progress-bar progress-bar-info" role="progressbar"
                     aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"
                     style="width: 0%; height: 6px;" data-percentage="100" >
                </div>
            </div>
            <div id="special_text" style="font-family:Roboto-Thin; font-weight: 500; font-size:16px; color:#fff; margin-top:-8px;" align="center">
                Initializing &nbsp;&nbsp;&nbsp;
            </div>
        </div>
        <div class="col-md-3"></div>
    </div>


    <script>
        var sp_text = $("#special_text");
        var sp_text_dots = $("#special_text_dot");
        var count=0;
        setTimeout(function(){

            $('.progress .progress-bar').each(function()
            {
                var me = $(this);
                var perc = me.attr("data-percentage");

                var current_perc = 0;
                time_count=0;
                counter=0;
                var progress = setInterval(function(){

                    if(time_count>30)
                        time_count=0;

                    if (current_perc>=perc)
                    {
                        clearInterval(progress);
                        getText(4);
                    }
                    else
                    {
                        current_perc +=1;
                        me.css('width', (current_perc)+'%');

                        if(time_count==10 && counter==0)
                        {
                            counter=1;
                            getText(1);
                        }
                        else if(time_count==20 && counter==1)
                        {
                            counter=2;
                            getText(2);
                        }
                        else if(time_count==30 && counter==2)
                        {
                            counter=0;
                            getText(3);
                        }

                        time_count++;
                    }

                }, 40);

            });

        },300);
        setTimeout('Redirect()', 5000);

        function Redirect()
        {
            //	window.location="check.html";
        }
        function getText(val)
        {

            if(val==1 && (count>=0&&count<=3))
                sp_text.html("Planting trees");
            if(val==2 && (count>=4&&count<=7))
                sp_text.html("Baking Cookies");
            if(val ==3 && (count>=7&&count<=10))
                sp_text.html("Plucking Flowers");
            if(val==4)
            {
                sp_text.html("All Set");
            }
            count++;


        }
    </script>
</div>

<div class="footer-location">
    <img src="images/footer2.png">
</div>