CODEWITHSUNDEEP
jqueryhtmlcsssvg
Ganesh Yadav
Ganesh Yadav

Reputation: 2685

SVG drawing animation progress with window on load

I want svg drawing animation starts with window load and finish when window ends loading. speed of animation should depend on widow loading speed.

here is the demo.

Also see this image for reference.svg animation

$(window).load(function() { 
 $('#status').fadeOut();
 $('#preloader').delay(350).fadeOut('slow');
 $('body').delay(350).fadeIn(500);
});

//svg drawing
var pathObj = {
 "icons": {
    "strokepath": [
        {"path": "M161.117,25.196l4.676-2.095l-2.672 1.837L161.117,25.196c0,0-8.683,3.173-15.029,4.843c-6.346,1.67-18.202,9.059-19.995,2.692c0,0-1.171-4.904-6.556-6.532c-5.864-1.773-9.685-1.169-15.196,2.672S90.318,37.073,87.58,41.933c-0.771,1.369-1.394,4.134,5.072,3.636c3.071-0.236,8.516,0.459,12.023-2.693c3.507-3.152,9.351,0.522,5.511,5.865s-11.522,5.511-17.2,5.344c-5.678-0.167-10.186,0.334-10.687,4.843s4.342,9.685-9.685,8.683c-14.027-1.002-2.505,18.703,5.344,9.351s13.526-9.518,17.701-8.182c4.175,1.336,1.002,6.68,4.509,9.685s6.694,0.167,13.784-2.004c7.09-2.171,11.097-1.002,13.101,1.336s5.01,8.182-2.505,10.687c-7.515,2.505-6.223-3.34-12.19-3.34c-1.983,0-3.601,3.149-6.012,5.344c-1.715,1.561-5.01,3.173-8.516-3.674c-3.507-6.847-7.692-10.93-13.025-6.847c-1.96,1.501-2.692,1.888-10.52,4.342c-5.213,1.634-10.019,3.142-15.864,15.029c-2.434,4.95-4.008,11.856,1.002,22.043c0,0,2.839,6.179,8.516,9.518c5.678,3.34,8.85,0.167,15.363-3.674c4.175-2.839,10.353,1.475,10.687,5.079c0.334,3.604,0,6.109,1.837,11.787c1.837,5.678,6.179,6.346,1.837,18.536c-4.342,12.19,2.505,19.037,4.175,22.21c1.67,3.173,3.094,6.459,4.843,8.015c2.884,2.567,10.019,5.01,15.196-2.755c5.177-7.765,6.475-7.218,7.181-10.27c0.604-2.613-1.336-5.963,1.169-10.663c2.505-4.7,4.843-3.364,6.346-6.036c1.503-2.672-2.672-17.367,1.336-21.041c4.008-3.674,9.685-10.52,13.192-15.53c3.507-5.01-0.501-7.181-2.672-6.68s-7.248,4.005-12.023-6.179c-2.134-4.55-7.014-11.188-11.188-16.699c-4.175-5.511,5.072-4.905,8.182,0.668c1.874,3.357,6.346,8.85,10.186,11.522s11.355,5.678,14.194,1.169c2.839-4.509,9.535-12.008,1.378-12.441c-2.755-0.146-9.059,6.429-10.562-0.584s2.366-11.22,6.68-5.678c5.807,7.462,8.758,3.679,15.593,3.612c3.359-0.033,4.169,3.831,8.12,11.751c1.852,3.714,2.146,7.726,6.68,15.196c1.525,2.513,6.216,8.421,11.522-2.338c2.619-5.31,4.801-19.663,16.323-17.158",
            "duration": 3000,
            "width": 500
        },
        {
            "path": "M39.361,189.047c0,0,5.072-16.845-11.272-27.804c-4.568-3.063-4.509-14.779-16.845-14.027",
            "duration": 300
        },
        {
            "path": "M31.742,40.001c0,0,9.809,5.121,8.557,8.315c-1.327,3.384-5.97,4.029-13.61,2.087c0,0-1.209,3.455-8.434,8.214",
            "duration": 300
        },
        {
            "path": "M109.435,215.251c-57.825,0-104.87-47.044-104.87-104.869c0-57.826,47.045-104.87,104.87-104.87s104.868,47.044,104.868,104.87C214.302,168.207,167.259,215.251,109.435,215.251z",
            "duration": 1500
        }
    ],
    "dimensions": {
        "width": 220,
        "height": 220
    }
  }
};

$(document).ready(function() {
$('#icons').lazylinepainter({
    "svgData": pathObj,
    "strokeWidth": 2,
    "strokeColor": "#189B56"
}).lazylinepainter('paint');
});

Upvotes: 2

Views: 2452

Answers (1)

nothingisnecessary
nothingisnecessary

Reputation: 6223

I do not believe that this is possible because you cannot reliably predict with certainty the load time. I also do not believe this is a good idea for the effect you are trying to achieve because it doesn't look as good when the animation loads very fast.

One problem you will run into is caching (if employed by the browser). The first time somebody views your page it might take a bit, but if the content is cached (images, .html files, .CSS files, .js files, etc.) then subsequent loads will be much quicker. You do not have a good way to know whether the content was cached (partially or fully) on the client (you could monitor cache-hit requests, but depending on the TTL the client may not even request the resource from the server). If you used headers to disable caching you could at least guarantee that included resources will be downloaded on each request to the page, but you still cannot reliably predict the total delay (which includes propagation delay for transmission over the network and processing delay on the server and client machines). You could theoretically use a ping technique to try to measure the latency between client and server, but even this is unreliable, and may fluctuate [and is unnecessarily complex; just consider what is the UX reason for the loading image in the first place? Generally it is so that users do not get impatient with slow-loading content. It also serves as a transition.].

You chose a good set of timings for drawing the loading logo, I would recommend sticking with that. Here is an example that uses your current timing (5100 milliseconds:3000+300+300+1500). There is probably a callback method you could use with the animation plugin, but I didn't look it up... instead I used setTimeout in document.ready() to call the function that shows the page contents after 5100 milliseconds. This function will only show the page contents if the window is loaded, otherwise it will keep checking every 50 ms until the flag is set by window.load().

Result:

  • Consistent animation timing. Animation will always complete before content is displayed.
  • Hard-coded minimum load time is far simpler than trying to scale the delays.
  • Animation will not disappear until window is loaded. Users with very slow load times may have to stare at the logo for a while. Users with very fast load times will have to watch the entire animation, even if all the contents are loaded. 

function ShowPageContent() {
  if (window.data.loaded) {
    // window loaded and animation complete, show page contents now
    $('#status').fadeOut();
    $('#preloader').delay(350).fadeOut('slow');
    $('body').delay(350).fadeIn(500);
  } else {
    // animation completed, but window not yet loaded; poll for loaded flag
    var waitLoopMs = 50;
    setTimeout(ShowPageContent, waitLoopMs);
  }
}

window.data = {
  loaded: false
};
$(window).load(function() {
  window.data.loaded = true;
});

//svg drawing
var pathObj = {
  "icons": {
    "strokepath": [{
      "path": "M161.117,25.196l4.676-2.095l-2.672-1.837L161.117,25.196c0,0-8.683,3.173-15.029,4.843c-6.346,1.67-18.202,9.059-19.995,2.692c0,0-1.171-4.904-6.556-6.532c-5.864-1.773-9.685-1.169-15.196,2.672S90.318,37.073,87.58,41.933c-0.771,1.369-1.394,4.134,5.072,3.636c3.071-0.236,8.516,0.459,12.023-2.693c3.507-3.152,9.351,0.522,5.511,5.865s-11.522,5.511-17.2,5.344c-5.678-0.167-10.186,0.334-10.687,4.843s4.342,9.685-9.685,8.683c-14.027-1.002-2.505,18.703,5.344,9.351s13.526-9.518,17.701-8.182c4.175,1.336,1.002,6.68,4.509,9.685s6.694,0.167,13.784-2.004c7.09-2.171,11.097-1.002,13.101,1.336s5.01,8.182-2.505,10.687c-7.515,2.505-6.223-3.34-12.19-3.34c-1.983,0-3.601,3.149-6.012,5.344c-1.715,1.561-5.01,3.173-8.516-3.674c-3.507-6.847-7.692-10.93-13.025-6.847c-1.96,1.501-2.692,1.888-10.52,4.342c-5.213,1.634-10.019,3.142-15.864,15.029c-2.434,4.95-4.008,11.856,1.002,22.043c0,0,2.839,6.179,8.516,9.518c5.678,3.34,8.85,0.167,15.363-3.674c4.175-2.839,10.353,1.475,10.687,5.079c0.334,3.604,0,6.109,1.837,11.787c1.837,5.678,6.179,6.346,1.837,18.536c-4.342,12.19,2.505,19.037,4.175,22.21c1.67,3.173,3.094,6.459,4.843,8.015c2.884,2.567,10.019,5.01,15.196-2.755c5.177-7.765,6.475-7.218,7.181-10.27c0.604-2.613-1.336-5.963,1.169-10.663c2.505-4.7,4.843-3.364,6.346-6.036c1.503-2.672-2.672-17.367,1.336-21.041c4.008-3.674,9.685-10.52,13.192-15.53c3.507-5.01-0.501-7.181-2.672-6.68s-7.248,4.005-12.023-6.179c-2.134-4.55-7.014-11.188-11.188-16.699c-4.175-5.511,5.072-4.905,8.182,0.668c1.874,3.357,6.346,8.85,10.186,11.522s11.355,5.678,14.194,1.169c2.839-4.509,9.535-12.008,1.378-12.441c-2.755-0.146-9.059,6.429-10.562-0.584s2.366-11.22,6.68-5.678c5.807,7.462,8.758,3.679,15.593,3.612c3.359-0.033,4.169,3.831,8.12,11.751c1.852,3.714,2.146,7.726,6.68,15.196c1.525,2.513,6.216,8.421,11.522-2.338c2.619-5.31,4.801-19.663,16.323-17.158",
      "duration": 3000,
      "width": 500
    }, {
      "path": "M39.361,189.047c0,0,5.072-16.845-11.272-27.804c-4.568-3.063-4.509-14.779-16.845-14.027",
      "duration": 300
    }, {
      "path": "M31.742,40.001c0,0,9.809,5.121,8.557,8.315c-1.327,3.384-5.97,4.029-13.61,2.087c0,0-1.209,3.455-8.434,8.214",
      "duration": 300
    }, {
      "path": "M109.435,215.251c-57.825,0-104.87-47.044-104.87-104.869c0-57.826,47.045-104.87,104.87-104.87s104.868,47.044,104.868,104.87C214.302,168.207,167.259,215.251,109.435,215.251z",
      "duration": 1500
    }],
    "dimensions": {
      "width": 220,
      "height": 220
    }
  }
};
/* 
 Setup and Paint your lazyline! 
 */
$(document).ready(function() {
  $('#icons').lazylinepainter({
    "svgData": pathObj,
    "strokeWidth": 2,
    "strokeColor": "#189B56"
  }).lazylinepainter('paint');

  var loadDelayMs = 5100; // minimum delay (5.1 sec, based on sum of your durations, above)
  setTimeout(ShowPageContent, loadDelayMs);
});
/* Preloader **/

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  z-index: 99999;
}
#status {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  /* background-image:url(../img/status.gif);  */
  background-repeat: no-repeat;
  background-position: center;
  margin: -100px 0 0 -100px;
}
/** --Preloader-- **/
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>svg preloader</title>
  <script src="http://okwutelabs.com/js/jquery-1.11.1.min.js"></script>
  <script src="http://okwutelabs.com/js/jquery.lazylinepainter-1.1.min.js"></script>
  <script src="http://okwutelabs.com/js/raphael-min.js"></script>
</head>

<body>
  <!-- Preloader -->
  <div id="preloader">
    <div id="status">
      <div id="icons"></div>
    </div>
  </div>
  <!-- #Preloader -->
  <img src="http://www.jesuspaintings.com/pictures/field_of_dreams_big.jpg" alt="">
  <img src="http://www.sinoorigin.com/images/modern-landscape/large/modern-landscape-painting-012.jpg" alt="">
  <img src="http://s3.amazonaws.com/artspan-fs/member_files/nmistry/Adirondack_Fall.JPG" alt="">
</body>

</html>

Upvotes: 3

Related Questions