Create a Facebook Preloader Style using Bootstrap

CSS3 is just awesome, the development is fast and the possibilities are endless. Today I want to show you how you can make an awesome Facebook-like preloader animation using just HTML, CSS and Boostrap grids.

This tutorial is so much easier to implement as compared to how other developers code it, plus you get to leverage bootstrap grids, so you no longer have to worry about the responsiveness of your preloader.




The image above can be coded as simple as this:

<div class="container">
    <div class="col-sm-3">
        <div class="panel panel-default">
            <div class="panel-heading clearfix">
                <div class="col-xs-10">
                    <div class="animate-bg"></div>
                </div>
            </div>
            <div class="panel-body">
                <div class="col-sm-5">
                    <p class="animate-bg"><br><br><br></p>
                </div>
                <div class="col-sm-7">
                    <p class="animate-bg"></p>
                    <p class="animate-bg col-sm-11"></p>
                    <p class="animate-bg"></p>
                </div>
            </div>
        </div>
        
        <div class="panel panel-default">
            <div class="panel-heading clearfix">
                <div class="col-xs-10">
                    <div class="animate-bg"></div>
                </div>
            </div>
            <div class="panel-body">
                <div class="col-sm-5">
                    <p class="animate-bg"><br><br><br></p>
                </div>
                <div class="col-sm-7">
                    <p class="animate-bg"></p>
                    <p class="animate-bg col-sm-11"></p>
                    <p class="animate-bg"></p>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-sm-9">
        <div class="panel panel-default">
            <div class="panel-heading clearfix">
                <div class="col-xs-10">
                    <div class="animate-bg"></div>
                </div>
            </div>
            <div class="panel-body">
                <div class="clearfix">
                    <div class="col-sm-3">
                        <p class="animate-bg"><br><br><br><br><br><br></p>
                    </div>
                    <div class="col-sm-9">
                        <p class="animate-bg col-sm-11"></p>
                        <p class="animate-bg col-sm-9"></p>
                        <p class="animate-bg col-sm-10"></p>
                        <p class="animate-bg col-sm-9"></p>
                        <p class="animate-bg"></p>
                    </div>
                </div>
                
                <br>
                
                <div class="col-sm-6">
                    <p class="animate-bg col-sm-11"></p>
                    <p class="animate-bg col-sm-9"></p>
                    <p class="animate-bg col-sm-10"></p>
                    <p class="animate-bg col-sm-9"></p>
                    <p class="animate-bg"></p>
                </div>
                <div class="col-sm-6">
                    <p class="animate-bg"><br><br><br><br><br><br></p>
                </div>
            </div>
        </div>
    </div>
</div>