Create a Facebook Preloader Style using Bootstrap

Date Posted: February 17, 2017, 1:41 pm


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.

Demo

 
The image above can be coded as simple as this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<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>

About author


Carl Victor Fontanos

A fine gentleman specializing in front-end and back-end development with extensive experience building high performance web applications that keeps users engaged and help businesses grow.

 
Hire Me