Query - How to implement this inside a <div> element

[vijayrajasekaran]

Hello,

Thank you for this awesome plugin. I am trying to implement this in a single page HTML5 app, i am unable to display this inside the app.

How to show the animation inside a div element?.

[vectorderivative]

It's not possible as it prepends itself to the body.
You can modify the code and add an extra parameter that will indicate the element that it i'll be attached to.

;
(function($) {
var defaults = {
    position: 'bottom',
    height: '5px',
    col_1: '#159756',
    col_2: '#da4733',
    col_3: '#3b78e7',
    col_4: '#fdba2c',
    fadeIn: 200,
    fadeOut: 200,
    element: 'body'
}
$.materialPreloader = function(options) {
    var settings = $.extend({}, defaults, options);
    $template =
        "<div id='materialPreloader' class='load-bar' style='height:" +
        settings.height + ";display:none;" + settings.position +
        ":0px'><div class='load-bar-container'><div class='load-bar-base base1' style='background:" +
        settings.col_1 +
        "'><div class='color red' style='background:" + settings.col_2 +
        "'></div><div class='color blue' style='background:" +
        settings.col_3 +
        "'></div><div class='color yellow' style='background:" +
        settings.col_4 +
        "'></div><div class='color green' style='background:" +
        settings.col_1 +
        "'></div></div></div> <div class='load-bar-container'><div class='load-bar-base base2' style='background:" +
        settings.col_1 +
        "'><div class='color red' style='background:" + settings.col_2 +
        "'></div><div class='color blue' style='background:" +
        settings.col_3 +
        "'></div><div class='color yellow' style='background:" +
        settings.col_4 +
        "'></div> <div class='color green' style='background:" +
        settings.col_1 + "'></div> </div> </div> </div>";
    $(settings.element).prepend($template);
    this.on = function() {
        $('#materialPreloader').fadeIn(settings.fadeIn);
    }
    this.off = function() {
        $('#materialPreloader').fadeOut(settings.fadeOut);
    }
}
}(jQuery));

[roymj88]

@vijayrajasekaran : Where you able to achieve it?