How to make preloader which can fill the background of the vector image?

Question

can someone explain me how to make css3 preloader from vector image. I want to achieve this: at the beginning logo is transparent, only border is visible, and how the loading is done, logo is filling with the background from the very bottom to the top.

Thank you so much for all your help.

Welcome to Stack Overflow! :) To get the most out of this site, you should include samples of what you've tried so far, what has and hasn't worked, and where you're experiencing problems. — JoshWillik, Apr 18 '15 at 15:54

markE · Answer 1 · 2015-04-19T04:09:18.050

There are several ways to do what you ask.

enter image description here

Since you tagged canvas, here's a canvas version:

This demo uses the clipping version of context.drawImage to draw only part of the image at the bottom of the canvas. An animation loop increases the amount of the image that's displayed over time.

// canvas related variables
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw,ch;

// load the logo and the logo outline
// then start the animation
var logoOutline;
var logo=new Image();
logo.onload=start;
logo.src='https://dl.dropboxusercontent.com/u/139992952/multple/marioStanding.png';
function start(){

    logoOutline=outlinePNG(logo,'lightgray');

    cw=canvas.width=logoOutline.width;
    ch=canvas.height=logoOutline.height;
    canvas.style.border='1px solid red';
    
    logo.displayY=logo.height-2;
    
    requestAnimationFrame(animate);
}


function animate(time){

    // cache logo.displayY into a variable b/ it's used often
    var y=logo.displayY;

    // clear the logo canvas
    ctx.clearRect(0,0,cw,ch);

    // use the clipping version of drawImage to 
    // increasingly reveal the logo from the bottom
    ctx.drawImage(logo,
        0,y,logo.width,logo.height-y,
        2,y+2,logo.width,logo.height-y);

    // reduce .displayY which increases the reveal
    logo.displayY--;
    
    // request another loop if the entire logo has not been revealed
    if(logo.displayY>0){
    
        // draw the outline
        ctx.drawImage(logoOutline,0,0);
    
        // request another loop until the logo is fully displayed
        requestAnimationFrame(animate);
    }
    
}

//
// Attribution Ken Fyrstenberg
// http://stackoverflow.com/questions/25467349/in-a-2d-canvas-is-there-a-way-to-give-a-sprite-an-outline/27127273#27127273
function outlinePNG(img,outlineColor){
    // new canvas sized to image size + 2px on each side
    var c=document.createElement('canvas');
    var cctx=c.getContext('2d');
    c.width=img.width+4;
    c.height=img.height+4;
    // redraw the image with 8-way offsets (n,s,e,w,nw,ne,se,sw)
    cctx.translate(2,2);
    cctx.drawImage(img, -2, -2);
    cctx.drawImage(img,  0, -2);
    cctx.drawImage(img,  2, -2);
    cctx.drawImage(img, -2,  0);
    cctx.drawImage(img,  2,  0);
    cctx.drawImage(img, -2,  2);
    cctx.drawImage(img,  0,  2);
    cctx.drawImage(img,  2,  2);
    cctx.translate(-2,-2);
    // fill with color
    cctx.globalCompositeOperation="source-in";
    cctx.fillStyle=outlineColor;
    cctx.fillRect(0,0,img.width+4,img.height+4);   
    // draw original image in "erase" mode
    cctx.globalCompositeOperation = "destination-out";
    cctx.drawImage(img,2,2);
    // return the outline canvas
    return(c);
}

<canvas id="canvas" width=300 height=300></canvas>

is there any way to show just outline of this "super mario", and to fill it with its background within this outline? Thank you so much. — Aleksandar Popovic, Apr 18 '15 at 20:47
Sure, just create an outline of Mario and drawImage it onto the canvas in the animation loop after the first drawImage. I've edited my answer to do your desired effect. Good luck with your project! — markE, Apr 26 '15 at 06:08

How to make preloader which can fill the background of the vector image?

1 Answers1