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>




Related Post


Latest Post


Recent Posts Widget

Make sure to never miss a thing...

Get the latest news from the creative industry along with other creative goodies, conveniently delivered to social media.