A CSS pre-loader used with Bootstrap – 2 demos

The preloader by using CSS

You may use this preloader as the content of the website is loading behind the scene. For example, images are heavy and you want all images to be loaded for the carousel or other sections of the web page or your website has a heavy app that takes some time for downloading.

You may use a pre-loader for that purpose which is visible to the visitors so they know something is happening behind rather than leaving the website.

Have a look at the demos below where a pre-loader is build by using pure CSS and implemented with Bootstrap framework. Although, you may use it for any website other than Bootstrap as well.

A demo of CSS preloader

Click the image or link below to see the pre-loader live in action. You may see and take the complete code including CSS and markup from the left pane of demo page:

Bootstrap pre loader

See online demo and code

For making this pre-loader, a few CSS3 properties are also used like animation, animation-direction, box-shadow, transform with translate and more.

Get the complete code from the demo page.

A demo with another style by changing CSS 3 properties

Have a look at another preloader that uses CSS 3 properties. This time, I used the:

animation-direction: alternate-reverse;

for box styles.

Bootstrap pre loader CSS

See online demo and code

The angle of 2D transform method (CSS 3 property) is also changed as compared to above demo:

0% {

        transform: translatex(-90px);

    }

    50% {

        transform: translatex(120px);

    }

 

The complete CSS is:

.pre-loader-demo{

    width: 180px;

    display: flex;

    justify-content: center;

    overflow: hidden;

    margin: 60px auto;

 

}

.pre-loader-demo .inner-part-preloader{

    width: 10px;

    height: 30px;

    padding: 2px;

    border-radius:50%;

    background-color: rgba(64, 128, 128, 0.8);

    box-shadow: -15px 0 0 rgba(0, 0, 0, 0.9), -30px 0 0 rgba(0, 0, 0, 0.6), 15px 0 0 rgba(0, 0, 0, 0.3), 30px 0 0 rgba(0, 0, 0, 0.1);

}

.box-style{

    position: relative;

    width: 100%;

    height: 100%;

    background-color: #A9D3D3;

    box-shadow: -15px 0 0 #FF9191, 15px 0 0 #FF5555;

    animation: loading 2s steps(7, end) infinite;

    animation-direction: alternate-reverse;

}

@-webkit-keyframes loading{

    0% {

        transform: translatex(-90px);

    }

    50% {

        transform: translatex(120px);

    }

}

@keyframes loading{

    0% {

        transform: translatex(-90px);

    }

    50% {

        transform: translatex(120px);

    }

}

 

The markup:

<div class="row">

        <div class="col-md-6">

            <div class="pre-loader-demo">

                <div class="inner-part-preloader">

                    <div class="box-style"></div>

                </div>

            </div>

        </div>

    </div>

 

You may try different values and colors for main box, inner boxes 2D transform etc. for creating a preloader as per need.