کشیدن شکل لوگو به صورت انیمیشن قبل از لود شدن سایت
کشیدن شکل لوگو به صورت انیمیشن قبل از لود شدن سایت
یکی از افکت هایی که سایتمون رو خوشگل میکنه اینه که قبل از نمایش سایت لودی وب سایتمون نمایش داده بشه
<div id="preloader">
<svg xmlns="http://www.w3.org/2000/svg" id="mysvglogo" version="1.0" width="400.000000pt" height="461.000000pt" viewBox="0 0 822.000000 948.000000" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,948.000000) scale(0.100000,-0.100000)" fill="none" stroke="#fff" style=" stroke-width: 105px">
<path d="M1380 8231 l0 -481 95 0 95 0 0 190 c0 183 1 190 20 190 19 0 20 -7 20 -190 l0 -190 95 0 95 0 0 224 c0 184 -3 227 -15 239 -13 13 -13 17 1 28 13 10 15 43 12 215 -4 268 15 248 -233 252 l-185 4 0 -481z"/>
<path d="M2153 8703 c-13 -2 -32 -16 -43 -30 -19 -25 -20 -39 -20 -448 0 -412 1 -423 21 -449 l20 -26 168 0 c158 0 169 1 187 21 18 20 19 42 19 455 l0 433 -23 23 c-21 22 -31 23 -165 25 -78 0 -152 -1 -164 -4z m167 -478 c0 -228 -1 -235 -20 -235 -19 0 -20 7 -20 235 0 228 1 235 20 235 19 0 20 -7 20 -235z"/>
<path d="M3510 8231 l0 -481 95 0 95 0 0 190 c0 183 1 190 20 190 19 0 20 -7 20 -190 l0 -190 95 0 95 0 0 224 c0 184 -3 227 -15 239 -13 13 -13 17 1 28 13 10 15 43 12 215 -4 268 15 248 -233 252 l-185 4 0 -481z"/>
<path d="M4930 8230 l0 -480 95 0 95 0 0 355 c0 348 0 355 20 355 20 0 20 -7 20 -355 l0 -355 95 0 95 0 0 355 c0 348 0 355 20 355 20 0 20 -7 20 -355 l0 -355 95 0 95 0 0 436 c0 389 -2 439 -17 464 -26 45 -58 57 -139 52 -17 -1 -43 -13 -58 -27 l-27 -25 -23 27 c-21 24 -31 27 -81 27 -41 -1 -64 -7 -86 -23 l-29 -22 0 26 c0 25 0 25 -95 25 l-95 0 0 -480z"/>
<path d="M5870 8230 l0 -480 95 0 95 0 0 480 0 480 -95 0 -95 0 0 -480z"/>
<path d="M6350 8230 l0 -480 95 0 95 0 0 355 c0 348 0 355 20 355 20 0 20 -7 20 -355 l0 -355 95 0 95 0 0 449 0 450 -24 28 c-21 24 -30 27 -80 26 -37 -1 -69 -9 -91 -22 l-35 -20 0 24 c0 25 -1 25 -95 25 l-95 0 0 -480z"/>
<path d="M670 8075 l0 -625 95 0 95 0 0 150 0 150 84 0 c155 0 146 -30 146 475 0 427 -2 452 -45 469 -9 3 -97 6 -196 6 l-179 0 0 -625z m230 150 c0 -228 -1 -235 -20 -235 -19 0 -20 7 -20 235 0 228 1 235 20 235 19 0 20 -7 20 -235z"/>
<path d="M2830 8680 c-11 -11 -22 -30 -25 -42 -3 -13 -4 -209 -3 -436 l3 -414 24 -19 c19 -15 39 -19 112 -19 l89 0 0 -30 0 -30 -115 0 -115 0 0 -120 0 -120 179 0 c99 0 187 3 196 6 44 17 45 30 45 654 l0 590 -185 0 c-171 0 -187 -2 -205 -20z m200 -455 c0 -228 -1 -235 -20 -235 -19 0 -20 7 -20 235 0 228 1 235 20 235 19 0 20 -7 20 -235z"/>
<path d="M4262 8693 c-30 -12 -42 -61 -42 -178 l0 -115 95 0 c95 0 95 0 95 25 0 18 5 25 20 25 18 0 20 -7 20 -55 l0 -55 -89 0 c-73 0 -93 -3 -112 -19 l-24 -19 0 -257 0 -257 24 -19 c21 -17 41 -19 207 -19 l184 0 0 440 c0 464 -2 487 -45 504 -20 7 -314 7 -333 -1z"/>
<path d="M7090 8680 c-11 -11 -22 -30 -25 -42 -3 -13 -4 -209 -3 -436 l3 -414 24 -19 c19 -15 39 -19 112 -19 l89 0 0 -30 0 -30 -115 0 -115 0 0 -120 0 -120 179 0 c99 0 187 3 196 6 44 17 45 30 45 654 l0 590 -185 0 c-171 0 -187 -2 -205 -20z m200 -455 c0 -228 -1 -235 -20 -235 -19 0 -20 7 -20 235 0 228 1 235 20 235 19 0 20 -7 20 -235z"/>
<path d="M700 7045 c0 -31 -3 -35 -25 -35 l-25 0 0 -135 0 -135 25 0 25 0 0 -315 c0 -335 4 -371 48 -394 13 -7 89 -11 195 -11 l175 0 26 31 26 31 0 299 0 299 -105 0 -105 0 0 -195 c0 -188 -1 -195 -20 -195 -19 0 -20 7 -20 225 l0 225 125 0 125 0 0 135 0 135 -125 0 -125 0 0 35 0 35 -110 0 -110 0 0 -35z"/>
<path d="M1492 6576 l3 -504 24 -26 24 -26 182 0 182 0 24 26 24 26 3 504 3 504 -106 0 -105 0 0 -395 c0 -388 0 -395 -20 -395 -20 0 -20 7 -20 395 l0 395 -110 0 -111 0 3 -504z"/>
<path d="M2300 7045 c0 -31 -3 -35 -25 -35 l-25 0 0 -135 0 -135 25 0 25 0 0 -315 c0 -335 4 -371 48 -394 13 -7 89 -11 195 -11 l175 0 26 31 26 31 0 299 0 299 -105 0 -105 0 0 -195 c0 -188 -1 -195 -20 -195 -19 0 -20 7 -20 225 l0 225 125 0 125 0 0 135 0 135 -125 0 -125 0 0 35 0 35 -110 0 -110 0 0 -35z"/>
<path d="M3138 7064 c-47 -25 -49 -53 -46 -541 l3 -451 24 -26 25 -26 184 2 185 3 21 28 c21 28 21 39 24 483 3 496 2 507 -54 533 -39 17 -332 14 -366 -5z m202 -514 c0 -253 -1 -260 -20 -260 -19 0 -20 7 -20 253 0 140 3 257 7 260 3 4 12 7 20 7 10 0 13 -50 13 -260z"/>
<path d="M3880 6550 l0 -530 110 0 110 0 0 210 c0 203 1 210 20 210 19 0 20 -7 20 -210 l0 -210 105 0 105 0 0 243 c0 192 -3 247 -14 263 -12 17 -12 22 0 39 18 24 20 404 3 454 -19 55 -45 61 -264 61 l-195 0 0 -530z"/>
<path d="M4660 6550 l0 -530 110 0 110 0 0 530 0 530 -110 0 -110 0 0 -530z"/>
<path d="M5247 7069 c-35 -20 -47 -72 -47 -199 l0 -120 105 0 105 0 0 30 c0 25 4 30 25 30 24 0 25 -2 25 -65 l0 -65 -96 0 c-165 0 -164 2 -164 -330 0 -266 5 -296 49 -320 12 -6 102 -10 220 -10 l201 0 0 485 c0 517 -2 539 -48 564 -27 15 -351 14 -375 0z"/>
<path d="M5980 6550 l0 -530 175 0 175 0 0 135 0 135 -65 0 -65 0 0 395 0 395 -110 0 -110 0 0 -530z"/>
<path d="M3750 4905 l0 -825 130 0 130 0 0 490 0 490 30 0 30 0 0 -490 0 -490 130 0 130 0 0 605 c0 657 1 649 -55 693 -25 20 -40 22 -146 22 l-119 0 0 165 0 165 -130 0 -130 0 0 -825z"/>
<path d="M651 5378 c0 -13 28 -309 62 -658 l62 -635 168 -3 167 -2 1 22 c1 44 57 563 59 548 1 -8 14 -139 28 -290 l27 -275 162 -3 c162 -2 163 -2 167 20 5 20 126 1269 126 1291 0 4 -58 7 -128 7 l-129 0 -28 -330 c-16 -181 -30 -328 -31 -327 -1 1 -15 150 -30 330 l-28 327 -133 0 c-120 0 -133 -2 -134 -17 0 -10 -13 -157 -28 -328 -31 -350 -29 -351 -61 35 -12 135 -23 260 -26 278 l-5 32 -134 0 c-133 0 -135 0 -134 -22z"/>
<path d="M2060 4740 l0 -660 130 0 130 0 0 660 0 660 -130 0 -130 0 0 -660z"/>
<path d="M2760 5360 c0 -39 -1 -40 -35 -40 l-35 0 0 -170 0 -170 35 0 35 0 0 -405 c0 -341 2 -411 15 -435 30 -58 40 -60 273 -60 134 0 221 4 234 11 11 6 28 29 39 52 17 39 19 70 19 405 l0 362 -135 0 -135 0 0 -250 0 -250 -25 0 -25 0 0 285 0 285 160 0 160 0 0 170 0 170 -160 0 -160 0 0 40 0 40 -130 0 -130 0 0 -40z"/>
<path d="M5512 4494 c-46 -24 -102 -124 -217 -389 -22 -51 -81 -258 -100 -348 -5 -25 -10 -28 -30 -23 -25 6 -89 -12 -162 -46 -86 -40 -196 -158 -268 -287 -26 -45 -36 -54 -60 -55 -17 -1 -40 -5 -52 -10 -19 -6 -23 -3 -29 21 -11 47 -43 90 -78 107 -44 21 -112 20 -155 -3 -30 -16 -37 -16 -75 -4 -55 20 -137 3 -214 -42 -70 -42 -234 -190 -277 -251 l-32 -45 -6 39 c-10 57 -45 104 -101 131 -63 32 -117 31 -182 -2 -59 -30 -95 -68 -166 -177 l-52 -79 -27 47 c-37 65 -94 97 -175 97 -50 0 -68 -5 -103 -28 -52 -35 -228 -210 -236 -236 -4 -14 -15 -19 -43 -18 -20 1 -47 -2 -59 -6 -19 -7 -23 -4 -29 20 -11 47 -43 90 -78 107 -44 21 -112 20 -155 -3 -30 -16 -37 -16 -75 -4 -93 32 -207 -18 -364 -161 -197 -180 -293 -372 -262 -528 6 -35 16 -68 21 -74 7 -9 -8 -18 -51 -32 l-60 -21 0 22 c0 12 5 63 10 112 6 50 13 161 16 248 5 148 4 161 -16 203 -15 30 -36 52 -65 70 -105 61 -169 53 -237 -28 -24 -28 -66 -75 -95 -104 -28 -29 -63 -70 -76 -91 -14 -21 -37 -51 -51 -67 -82 -87 -101 -168 -57 -239 43 -69 108 -95 185 -74 l28 8 -8 -58 c-8 -61 -11 -92 -13 -147 -1 -23 -13 -49 -36 -78 -86 -107 -116 -150 -144 -205 -16 -32 -43 -85 -60 -119 -40 -79 -71 -224 -74 -349 -4 -195 61 -309 198 -351 66 -19 103 -5 172 70 42 44 68 84 88 132 58 144 42 128 168 167 128 41 133 42 752 216 253 71 528 148 610 170 468 125 1224 323 1245 326 38 5 165 33 249 55 87 22 532 122 666 150 50 10 209 43 355 73 146 30 283 60 306 66 23 6 70 12 105 13 l64 3 -3 -70 c-4 -99 -29 -336 -52 -500 -11 -77 -24 -198 -29 -267 -5 -70 -12 -131 -15 -136 -3 -5 -12 -69 -21 -143 -17 -134 -17 -134 -54 -170 -45 -44 -61 -96 -61 -201 0 -54 6 -88 24 -131 13 -31 26 -60 30 -64 3 -3 6 -13 6 -22 0 -18 101 -85 142 -95 34 -8 127 23 167 56 45 37 111 212 111 296 0 16 11 87 24 158 13 71 34 215 45 319 38 340 80 727 96 876 8 81 18 154 21 163 4 11 18 16 43 16 20 0 108 10 196 22 136 19 205 23 455 23 212 0 315 -4 365 -14 93 -18 145 -39 146 -60 7 -157 40 -215 138 -249 101 -35 201 7 253 107 50 95 35 249 -32 349 -77 115 -157 171 -325 227 -178 60 -627 77 -940 36 -88 -11 -182 -21 -209 -21 l-49 0 6 123 c3 67 14 201 24 297 19 192 21 613 2 682 -13 48 -77 112 -147 145 -80 38 -132 30 -225 -33 -77 -52 -137 -107 -137 -124 0 -5 -11 -31 -23 -58 -70 -141 -100 -194 -137 -243 -22 -29 -40 -58 -40 -63 0 -5 -11 -24 -25 -42 -14 -18 -28 -46 -31 -61 -3 -15 -17 -41 -30 -58 l-25 -30 4 50 c5 55 18 91 62 175 16 30 41 93 57 140 16 47 33 94 38 105 5 11 14 40 21 65 6 25 15 50 19 55 12 14 50 250 51 316 2 69 -19 111 -72 146 -52 34 -147 43 -197 17z m-335 -1028 c1 -1 -16 -30 -37 -64 -22 -35 -40 -66 -40 -70 0 -17 -160 -173 -171 -167 -43 27 79 257 159 298 21 11 75 13 89 3z m739 -406 c-8 -127 -16 -234 -18 -235 -2 -2 -96 -18 -208 -35 -208 -33 -792 -150 -975 -197 -55 -14 -125 -29 -155 -33 -102 -16 -268 -58 -653 -166 -210 -58 -634 -170 -942 -249 -308 -79 -760 -200 -1005 -270 -245 -70 -449 -128 -454 -129 -11 -1 -8 88 4 119 5 13 29 31 61 45 43 18 63 21 108 16 30 -4 60 -11 67 -17 46 -38 152 -24 213 27 39 33 56 92 42 148 -10 40 -9 41 27 70 54 42 211 208 218 229 5 17 11 14 44 -21 84 -87 215 -65 340 57 56 55 133 160 149 202 5 16 16 22 39 23 30 1 32 -2 42 -48 17 -80 47 -121 124 -173 64 -43 77 -48 127 -48 31 0 67 6 80 13 29 16 72 76 116 160 18 34 51 89 73 122 22 32 40 62 40 66 0 11 105 145 137 175 29 27 104 69 123 69 7 0 8 -6 1 -17 -24 -47 -34 -131 -22 -193 36 -183 176 -262 339 -190 46 21 246 215 257 252 6 18 10 17 45 -20 81 -83 212 -66 327 44 25 24 48 44 50 44 3 0 25 -22 49 -49 62 -69 131 -86 233 -56 39 12 69 32 121 82 39 36 70 70 70 75 0 5 14 29 30 53 17 24 30 47 30 52 1 4 9 18 19 31 l19 22 62 -42 c60 -41 64 -43 138 -43 64 0 86 5 130 28 30 15 61 27 71 27 24 0 110 66 170 131 108 116 106 114 109 97 2 -8 -4 -120 -12 -248z m-1669 96 c1 -1 -16 -30 -37 -64 -22 -35 -40 -66 -40 -70 0 -17 -160 -173 -171 -167 -43 27 79 257 159 298 21 11 75 13 89 3z m-2060 -460 c1 -1 -16 -30 -37 -64 -22 -35 -40 -66 -40 -70 0 -17 -160 -173 -171 -167 -43 27 79 257 159 298 21 11 75 13 89 3z" style="
stroke: #ee7ead;
"/>
<path d="M1319 3315 c-112 -36 -141 -145 -68 -252 43 -63 83 -87 144 -88 58 0 128 27 149 60 28 43 47 126 36 165 -25 93 -153 149 -261 115z" style="
stroke: #ee7ead;
"/>
</g>
</svg>
</div>
<script>
!function(t){"function"==typeof define&&define.amd?define(["jquery"],t):"object"==typeof module&&module.exports?module.exports=function(e,n){return void 0===n&&(n="undefined"!=typeof window?require("jquery"):require("jquery")(e)),t(n),n}:t(jQuery)}(function(t){"use strict";var e="drawsvg",n={duration:1e3,stagger:200,easing:"swing",reverse:!1,callback:t.noop},a=function(){var a=function(a,o){var i=this,r=t.extend(n,o);i.$elm=t(a),i.$elm.is("svg")&&(i.options=r,i.$paths=i.$elm.find("path"),i.totalDuration=r.duration+r.stagger*i.$paths.length,i.duration=r.duration/i.totalDuration,i.$paths.each(function(t,e){var n=e.getTotalLength();e.pathLen=n,e.delay=r.stagger*t/i.totalDuration,e.style.strokeDasharray=[n,n].join(" "),e.style.strokeDashoffset=n}),i.$elm.attr("class",function(t,n){return[n,e+"-initialized"].join(" ")}))};return a.prototype.getVal=function(e,n){return 1-t.easing[n](e,e,0,1,1)},a.prototype.progress=function(t){var e=this,n=e.options,a=e.duration;e.$paths.each(function(o,i){var r=i.style;if(1===t)r.strokeDashoffset=0;else if(0===t)r.strokeDashoffset=i.pathLen+"px";else if(t>=i.delay&&t<=a+i.delay){var s=(t-i.delay)/a;r.strokeDashoffset=e.getVal(s,n.easing)*i.pathLen*(n.reverse?-1:1)+"px"}})},a.prototype.animate=function(){var n=this;n.$elm.attr("class",function(t,n){return[n,e+"-animating"].join(" ")}),t({len:0}).animate({len:1},{easing:"linear",duration:n.totalDuration,step:function(t,e){n.progress.call(n,t/e.end)},complete:function(){n.options.callback.call(this),n.$elm.attr("class",function(t,n){return n.replace(e+"-animating","")})}})},a}();t.fn[e]=function(n,o){return this.each(function(){var i=t.data(this,e);i&&""+n===n&&i[n]?i[n](o):t.data(this,e,new a(this,n))})}});
jQuery(document).ready(function($){
var $svg = $('#mysvglogo').drawsvg({
callback: function() {
setTimeout(function() {
$('#preloader').fadeOut();
}, 800);
}
});
$svg.drawsvg('animate');
});
</script>
<style>
div#preloader {
background: #000;
width: 100%;
height: 100%;z-index:99999999;
position: fixed;
}
#mysvglogo {
margin: 6% auto;
display: block;
}
</style>
