پیشنمایش زنده
کد HTML
<div class="loader">
<svg
class="legl"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
width="20.69332"
height="68.19944"
viewBox="0,0,20.69332,68.19944"
>
<g transform="translate(-201.44063,-235.75466)">
<g stroke-miterlimit="10">
<path d="" fill="#ffffff" stroke="none" stroke-width="0.5"></path>
<path
d=""
fill-opacity="0.26667"
fill="#97affd"
stroke-opacity="0.48627"
stroke="#ffffff"
stroke-width="0"
></path>
<path
d="M218.11971,301.20087c-2.20708,1.73229 -4.41416,0 -4.41416,0l-1.43017,-1.1437c-1.42954,-1.40829 -3.04351,-2.54728 -4.56954,-3.87927c-0.95183,-0.8308 -2.29837,-1.49883 -2.7652,-2.55433c-0.42378,-0.95815 0.14432,-2.02654 0.29355,-3.03399c0.41251,-2.78499 1.82164,-5.43386 2.41472,-8.22683c1.25895,-4.44509 2.73863,-8.98683 3.15318,-13.54796c0.22615,-2.4883 -0.21672,-5.0155 -0.00278,-7.50605c0.30636,-3.56649 1.24602,-7.10406 1.59992,-10.6738c0.29105,-2.93579 -0.00785,-5.9806 -0.00785,-8.93046c0,0 0,-2.44982 3.12129,-2.44982c3.12129,0 3.12129,2.44982 3.12129,2.44982c0,3.06839 0.28868,6.22201 -0.00786,9.27779c-0.34637,3.56935 -1.30115,7.10906 -1.59992,10.6738c-0.2103,2.50918 0.22586,5.05326 -0.00278,7.56284c-0.43159,4.7371 -1.94029,9.46317 -3.24651,14.07835c-0.47439,2.23403 -1.29927,4.31705 -2.05805,6.47156c-0.18628,0.52896 -0.1402,1.0974 -0.327,1.62624c-0.09463,0.26791 -0.64731,0.47816 -0.50641,0.73323c0.19122,0.34617 0.86423,0.3445 1.2346,0.58502c1.88637,1.22503 3.50777,2.79494 5.03,4.28305l0.96971,0.73991c0,0 2.20708,1.73229 0,3.46457z"
fill="none"
stroke="#191e2e"
stroke-width="7"
></path>
</g>
</g>
</svg>
<svg
class="legr"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
width="41.02537"
height="64.85502"
viewBox="0,0,41.02537,64.85502"
>
<g transform="translate(-241.54137,-218.44347)">
<g stroke-miterlimit="10">
<path
d="M279.06674,279.42662c-2.27967,1.98991 -6.08116,0.58804 -6.08116,0.58804l-2.47264,-0.92915c-2.58799,-1.18826 -5.31176,-2.08831 -7.99917,-3.18902c-1.67622,-0.68654 -3.82471,-1.16116 -4.93147,-2.13229c-1.00468,-0.88156 -0.69132,-2.00318 -0.92827,-3.00935c-0.65501,-2.78142 0.12275,-5.56236 -0.287,-8.37565c-0.2181,-4.51941 -0.17458,-9.16283 -1.60696,-13.68334c-0.78143,-2.46614 -2.50162,-4.88125 -3.30086,-7.34796c-1.14452,-3.53236 -1.40387,-7.12078 -2.48433,-10.66266c-0.88858,-2.91287 -2.63779,-5.85389 -3.93351,-8.74177c0,0 -1.07608,-2.39835 3.22395,-2.81415c4.30003,-0.41581 2.41605,1.98254 2.41605,1.98254c1.34779,3.00392 3.13072,6.05282 4.06444,9.0839c1.09065,3.54049 1.33011,7.13302 2.48433,10.66266c0.81245,2.48448 2.5308,4.917 3.31813,7.40431c1.48619,4.69506 1.48366,9.52281 1.71137,14.21503c0.32776,2.25028 0.10631,4.39942 0.00736,6.60975c-0.02429,0.54266 0.28888,1.09302 0.26382,1.63563c-0.01269,0.27488 -0.68173,0.55435 -0.37558,0.78529c0.41549,0.31342 1.34191,0.22213 1.95781,0.40826c3.13684,0.94799 6.06014,2.26892 8.81088,3.52298l1.66093,0.59519c0,0 6.76155,1.40187 4.48187,3.39177z"
fill="none"
stroke="#000000"
stroke-width="7"
></path>
<path d="" fill="#ffffff" stroke="none" stroke-width="0.5"></path>
<path
d=""
fill-opacity="0.26667"
fill="#97affd"
stroke-opacity="0.48627"
stroke="#ffffff"
stroke-width="0"
></path>
</g>
</g>
</svg>
<div class="bod">
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
width="144.10576"
height="144.91623"
viewBox="0,0,144.10576,144.91623"
>
<g transform="translate(-164.41679,-112.94712)">
<g stroke-miterlimit="10">
<path
d="M166.9168,184.02633c0,-36.49454 35.0206,-66.07921 72.05288,-66.07921c37.03228,0 67.05288,29.58467 67.05288,66.07921c0,6.94489 -1.08716,13.63956 -3.10292,19.92772c-2.71464,8.46831 -7.1134,16.19939 -12.809,22.81158c-2.31017,2.68194 -7.54471,12.91599 -7.54471,12.91599c0,0 -5.46714,-1.18309 -8.44434,0.6266c-3.86867,2.35159 -10.95356,10.86714 -10.95356,10.86714c0,0 -6.96906,-3.20396 -9.87477,-2.58085c-2.64748,0.56773 -6.72538,5.77072 -6.72538,5.77072c0,0 -5.5023,-4.25969 -7.5982,-4.25969c-3.08622,0 -9.09924,3.48259 -9.09924,3.48259c0,0 -6.0782,-5.11244 -9.00348,-5.91884c-4.26461,-1.17561 -12.23343,0.75049 -12.23343,0.75049c0,0 -5.18164,-8.26065 -7.60688,-9.90388c-3.50443,-2.37445 -8.8271,-3.95414 -8.8271,-3.95414c0,0 -5.33472,-8.81718 -7.27019,-11.40895c-4.81099,-6.44239 -13.46422,-9.83437 -15.65729,-17.76175c-1.53558,-5.55073 -2.35527,-21.36472 -2.35527,-21.36472z"
fill="#191e2e"
stroke="#000000"
stroke-width="5"
stroke-linecap="butt"
></path>
<path
d="M167.94713,180c0,-37.03228 35.0206,-67.05288 72.05288,-67.05288c37.03228,0 67.05288,30.0206 67.05288,67.05288c0,7.04722 -1.08716,13.84053 -3.10292,20.22135c-2.71464,8.59309 -7.1134,16.43809 -12.809,23.14771c-2.31017,2.72146 -7.54471,13.1063 -7.54471,13.1063c0,0 -5.46714,-1.20052 -8.44434,0.63584c-3.86867,2.38624 -10.95356,11.02726 -10.95356,11.02726c0,0 -6.96906,-3.25117 -9.87477,-2.61888c-2.64748,0.5761 -6.72538,5.85575 -6.72538,5.85575c0,0 -5.5023,-4.32246 -7.5982,-4.32246c-3.08622,0 -9.09924,3.5339 -9.09924,3.5339c0,0 -6.0782,-5.18777 -9.00348,-6.00605c-4.26461,-1.19293 -12.23343,0.76155 -12.23343,0.76155c0,0 -5.18164,-8.38236 -7.60688,-10.04981c-3.50443,-2.40943 -8.8271,-4.0124 -8.8271,-4.0124c0,0 -5.33472,-8.9471 -7.27019,-11.57706c-4.81099,-6.53732 -13.46422,-9.97928 -15.65729,-18.02347c-1.53558,-5.63252 -2.35527,-21.67953 -2.35527,-21.67953z"
fill="#191e2e"
stroke="none"
stroke-width="0"
stroke-linecap="butt"
></path>
<path
d=""
fill="#ffffff"
stroke="none"
stroke-width="0.5"
stroke-linecap="butt"
></path>
<path
d=""
fill-opacity="0.26667"
fill="#97affd"
stroke-opacity="0.48627"
stroke="#ffffff"
stroke-width="0"
stroke-linecap="butt"
></path>
<path
d="M216.22445,188.06994c0,0 1.02834,11.73245 -3.62335,21.11235c-4.65169,9.3799 -13.06183,10.03776 -13.06183,10.03776c0,0 7.0703,-3.03121 10.89231,-10.7381c4.34839,-8.76831 5.79288,-20.41201 5.79288,-20.41201z"
fill="none"
stroke="#2f3a50"
stroke-width="3"
stroke-linecap="round"
></path>
</g>
</g>
</svg>
<svg
class="head"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
width="115.68559"
height="88.29441"
viewBox="0,0,115.68559,88.29441"
>
<g transform="translate(-191.87889,-75.62023)">
<g stroke-miterlimit="10">
<path
d=""
fill="#ffffff"
stroke="none"
stroke-width="0.5"
stroke-linecap="butt"
></path>
<path
d="M195.12889,128.77752c0,-26.96048 21.33334,-48.81626 47.64934,-48.81626c26.316,0 47.64935,21.85578 47.64935,48.81626c0,0.60102 -9.22352,20.49284 -9.22352,20.49284l-7.75885,0.35623l-7.59417,6.15039l-8.64295,-1.74822l-11.70703,6.06119l-6.38599,-4.79382l-6.45999,2.36133l-7.01451,-7.38888l-8.11916,1.29382l-6.19237,-6.07265l-7.6263,-1.37795l-4.19835,-7.87062l-4.24236,-4.16907c0,0 -0.13314,-2.0999 -0.13314,-3.29458z"
fill="none"
stroke="#2f3a50"
stroke-width="6"
stroke-linecap="butt"
></path>
<path
d="M195.31785,124.43649c0,-26.96048 21.33334,-48.81626 47.64934,-48.81626c26.316,0 47.64935,21.85578 47.64935,48.81626c0,1.03481 -0.08666,2.8866 -0.08666,2.8866c0,0 16.8538,15.99287 16.21847,17.23929c-0.66726,1.30905 -23.05667,-4.14265 -23.05667,-4.14265l-2.29866,4.5096l-7.75885,0.35623l-7.59417,6.15039l-8.64295,-1.74822l-11.70703,6.06119l-6.38599,-4.79382l-6.45999,2.36133l-7.01451,-7.38888l-8.11916,1.29382l-6.19237,-6.07265l-7.6263,-1.37795l-4.19835,-7.87062l-4.24236,-4.16907c0,0 -0.13314,-2.0999 -0.13314,-3.29458z"
fill="#191e2e"
stroke-opacity="0.48627"
stroke="#ffffff"
stroke-width="0"
stroke-linecap="butt"
></path>
<path
d="M271.10348,122.46768l10.06374,-3.28166l24.06547,24.28424"
fill="none"
stroke="#2f3a50"
stroke-width="6"
stroke-linecap="round"
></path>
<path
d="M306.56448,144.85764l-41.62024,-8.16845l2.44004,-7.87698"
fill="none"
stroke="#000000"
stroke-width="3.5"
stroke-linecap="round"
></path>
<path
d="M276.02738,115.72434c-0.66448,-4.64715 2.56411,-8.95308 7.21127,-9.61756c4.64715,-0.66448 8.95309,2.56411 9.61757,7.21126c0.46467,3.24972 -1.94776,8.02206 -5.96624,9.09336c-2.11289,-1.73012 -5.08673,-5.03426 -5.08673,-5.03426c0,0 -4.12095,1.16329 -4.60481,1.54229c-0.16433,-0.04891 -0.62732,-0.38126 -0.72803,-0.61269c-0.30602,-0.70328 -0.36302,-2.02286 -0.44303,-2.58239z"
fill="#ffffff"
stroke="none"
stroke-width="0.5"
stroke-linecap="butt"
></path>
<path
d="M242.49281,125.6424c0,-4.69442 3.80558,-8.5 8.5,-8.5c4.69442,0 8.5,3.80558 8.5,8.5c0,4.69442 -3.80558,8.5 -8.5,8.5c-4.69442,0 -8.5,-3.80558 -8.5,-8.5z"
fill="#ffffff"
stroke="none"
stroke-width="0.5"
stroke-linecap="butt"
></path>
<path
d=""
fill-opacity="0.26667"
fill="#97affd"
stroke-opacity="0.48627"
stroke="#ffffff"
stroke-width="0"
stroke-linecap="butt"
></path>
</g>
</g>
</svg>
</div>
<svg
id="gnd"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
width="475"
height="530"
viewBox="0,0,163.40011,85.20095"
>
<g transform="translate(-176.25,-207.64957)">
<g
stroke="#000000"
stroke-width="2.5"
stroke-linecap="round"
stroke-miterlimit="10"
>
<path
d="M295.5,273.1829c0,0 -57.38915,6.69521 -76.94095,-9.01465c-13.65063,-10.50609 15.70098,-20.69467 -2.5451,-19.94465c-30.31027,2.05753 -38.51396,-26.84135 -38.51396,-26.84135c0,0 6.50084,13.30023 18.93224,19.17888c9.53286,4.50796 26.23632,-1.02541 32.09529,4.95137c3.62417,3.69704 2.8012,6.33005 0.66517,8.49452c-3.79415,3.84467 -11.7312,6.21103 -6.24682,10.43645c22.01082,16.95812 72.55412,12.73944 72.55412,12.73944z"
fill="#000000"
></path>
<path
d="M338.92138,217.76285c0,0 -17.49626,12.55408 -45.36424,10.00353c-8.39872,-0.76867 -17.29557,-6.23066 -17.29557,-6.23066c0,0 3.06461,-2.23972 15.41857,0.72484c26.30467,6.31228 47.24124,-4.49771 47.24124,-4.49771z"
fill="#000000"
></path>
<path
d="M209.14443,223.00182l1.34223,15.4356l-10.0667,-15.4356"
fill="none"
></path>
<path
d="M198.20391,230.41806l12.95386,7.34824l6.71113,-12.08004"
fill="none"
></path>
<path d="M211.19621,238.53825l8.5262,-6.09014" fill="none"></path>
<path
d="M317.57068,215.80173l5.27812,6.49615l0.40601,-13.39831"
fill="none"
></path>
<path d="M323.66082,222.70389l6.09014,-9.33822" fill="none"></path>
</g>
</g>
</svg>
</div>
کد CSS
.loader {
scale: 0.75;
position: relative;
width: 200px;
height: 200px;
translate: 10px -20px;
}
.loader svg {
position: absolute;
top: 0;
left: 0;
}
.head {
translate: 27px -30px;
z-index: 3;
animation: bob 1s infinite ease-in;
}
.bod {
translate: 0px 30px;
z-index: 3;
animation: bob 1s infinite ease-in-out;
}
.legr {
translate: 75px 135px;
z-index: 0;
animation: rstep 1s infinite ease-in;
}
.legr {
animation-delay: 0.45s;
}
.legl {
translate: 30px 155px;
z-index: 3;
animation: lstep 1s infinite ease-in;
}
@keyframes bob {
0% {
transform: translateY(0) rotate(3deg);
}
5% {
transform: translateY(0) rotate(3deg);
}
25% {
transform: translateY(5px) rotate(0deg);
}
50% {
transform: translateY(0px) rotate(-3deg);
}
70% {
transform: translateY(5px) rotate(0deg);
}
100% {
transform: translateY(0) rotate(3deg);
}
}
@keyframes lstep {
0% {
transform: translateY(0) rotate(-5deg);
}
33% {
transform: translateY(-15px) translate(32px) rotate(35deg);
}
66% {
transform: translateY(0) translate(25px) rotate(-25deg);
}
100% {
transform: translateY(0) rotate(-5deg);
}
}
@keyframes rstep {
0% {
transform: translateY(0) translate(0px) rotate(-5deg);
}
33% {
transform: translateY(-10px) translate(30px) rotate(35deg);
}
66% {
transform: translateY(0) translate(20px) rotate(-25deg);
}
100% {
transform: translateY(0) translate(0px) rotate(-5deg);
}
}
#gnd {
translate: -140px 0;
rotate: 10deg;
z-index: -1;
filter: blur(0.5px) drop-shadow(1px 3px 5px #000000);
opacity: 0.25;
animation: scroll 5s infinite linear;
}
@keyframes scroll {
0% {
transform: translateY(25px) translate(50px);
opacity: 0;
}
33% {
opacity: 0.25;
}
66% {
opacity: 0.25;
}
to {
transform: translateY(-50px) translate(-100px);
opacity: 0;
}
}