mahyargdz
157 lines
10 KiB
Vue
157 lines
10 KiB
Vue
<template>
|
|
<div class="preLoader">
|
|
<div class="relativePos">
|
|
<div class="txtBox">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
x="0px"
|
|
y="0px"
|
|
viewBox="0 0 157.9 81"
|
|
style="enable-background: new 0 0 157.9 81"
|
|
xml:space="preserve"
|
|
>
|
|
<g class="top-txt">
|
|
<path
|
|
class="st1 o"
|
|
d="M100.9,42.7c1.7,0,3.4,0.4,4.9,1.1c2.3,1,4.1,2.7,5.3,4.9c1,1.8,1.5,3.7,1.5,5.8c0,4.3-2.5,8.2-6.3,10.2
|
|
c-1.7,0.9-3.5,1.3-5.4,1.3c-4.7-0.1-8.8-2.8-10.7-7.1c-1.4-3.3-1.2-7,0.5-10.2c1.2-2.2,3-3.9,5.3-4.9C97.5,43,99.2,42.7,100.9,42.7
|
|
M99.7,43.7l-0.1,10.5l0.1,8.7v2c0.3,0.1,0.7,0.1,1.1,0.1c2.3,0,4.5-0.7,6.3-2c1.7-1.1,2.9-2.8,3.7-4.6c0.5-1.3,0.8-2.7,0.8-4.1
|
|
c0-1.8-0.5-3.6-1.4-5.2c-1-1.9-2.7-3.4-4.7-4.3c-1.5-0.7-3.1-1.1-4.7-1.1C100.4,43.6,100,43.7,99.7,43.7"
|
|
/>
|
|
<path
|
|
class="st1 x"
|
|
d="M123.4,52.7v6.2l0.1,6.4h-8.3v-0.9v-3.3l0.1-5.9l-0.1-6.6v-0.9h8.2V51c0.8-0.9,1.6-1.7,2.6-2.5c0.9-0.7,2-1.1,3.1-1.2
|
|
c0.5,0,1,0.1,1.5,0.4c0.4,0.2,0.6,0.6,0.6,1c0,0.3-0.1,0.6-0.4,0.8c-0.2,0.2-0.6,0.3-0.9,0.3c-0.3,0-0.5-0.1-0.8-0.2
|
|
c-0.4-0.2-0.8-0.3-1.2-0.3c-0.8,0-1.6,0.3-2.2,0.8C124.9,50.9,124.1,51.7,123.4,52.7"
|
|
/>
|
|
<path
|
|
class="st1 i"
|
|
d="M140.9,47.7v0.5v2.5v3.9v5.9l0.1,3.3v1.4h-8.3l0.1-5.9l0.1-5.2v-2.8l-0.1-3v-0.6L140.9,47.7z M136.7,42.1
|
|
c2.8,0,4.2,0.7,4.2,2.2c0,0.7-0.4,1.4-1.1,1.7c-1,0.4-2.1,0.7-3.1,0.6c-2.7,0-4-0.8-4-2.3S134,42,136.7,42.1"
|
|
/>
|
|
<path
|
|
class="st1 n"
|
|
d="M144.4,62.3c0.3,0.1,0.6,0.2,0.8,0.5c0.7,0.6,1.4,1,2.3,1.3c0.9,0.3,1.8,0.5,2.8,0.5c0.3,0,0.6,0,0.9-0.2
|
|
c0.2-0.1,0.3-0.4,0.3-0.6c0-0.3-0.2-0.7-0.4-0.9c-0.3-0.4-0.9-1-1.8-2.1c-1.6-1.6-3.1-3.4-4.5-5.2c-0.6-0.8-1-1.8-1-2.9
|
|
c0-0.8,0.2-1.6,0.7-2.3c0.5-0.8,1.2-1.4,2-1.9c1.4-0.9,3.1-1.3,4.8-1.3c1.4,0,2.8,0.3,4.2,0.8c1.1,0.4,1.7,0.9,1.7,1.4
|
|
c0,0.2-0.1,0.3-0.2,0.4c-0.1,0.1-0.3,0.2-0.5,0.2c-0.4-0.1-0.8-0.3-1.1-0.6c-1.1-0.8-2.4-1.2-3.7-1.2c-0.4,0-0.7,0-1.1,0.2
|
|
c-0.2,0.1-0.4,0.4-0.4,0.7c0.1,0.5,0.3,1,0.7,1.4c0.4,0.6,1.4,1.5,2.7,2.8s2.2,2.2,2.5,2.6c0.4,0.4,0.7,0.9,1,1.4
|
|
c0.6,0.9,0.9,1.9,0.9,2.9c0,1.7-0.9,3.2-2.4,4c-1.4,0.9-3.1,1.3-4.8,1.3c-2,0-3.9-0.5-5.6-1.4c-0.4-0.2-0.7-0.4-1-0.7
|
|
c-0.2-0.2-0.3-0.4-0.3-0.6C143.9,62.5,144.1,62.2,144.4,62.3C144.3,62.3,144.4,62.3,144.4,62.3"
|
|
/>
|
|
</g>
|
|
<g class="bottom-txt">
|
|
<path
|
|
class="st1 o0"
|
|
d="M101.2,73c-0.3,0.4-0.6,0.7-1,1s-0.8,0.5-1.3,0.5c-0.3,0-0.6-0.1-0.9-0.2c-0.3-0.2-0.5-0.4-0.7-0.6
|
|
c-0.2,0.7-0.5,1.4-0.9,2.1c-0.8,1.3-2,2.3-3.4,2.9c-0.7,0.3-1.4,0.4-2.2,0.4c-0.7,0-1.4-0.2-1.9-0.7s-0.8-1.2-0.7-1.9
|
|
c0-0.8,0.2-1.5,0.6-2.2s0.9-1.3,1.5-1.8s1.3-1,2.1-1.3c0.7-0.3,1.5-0.5,2.2-0.5s1.3,0.2,1.9,0.6c0.4,0.4,0.7,0.9,0.8,1.5
|
|
c0.1,0.4,0.2,0.7,0.5,1s0.6,0.4,1,0.4s0.8-0.1,1.1-0.4c0.4-0.3,0.8-0.6,1.1-1L101.2,73z M91,78.8c0.4,0,0.8-0.1,1.1-0.4
|
|
c0.4-0.3,0.7-0.6,1.1-1c0.3-0.4,0.7-0.9,0.9-1.3c0.3-0.5,0.5-1,0.7-1.5s0.4-0.9,0.5-1.4c0.1-0.4,0.2-0.8,0.2-1.1
|
|
c0-0.3-0.1-0.6-0.2-0.9c-0.2-0.2-0.5-0.3-0.7-0.3c-0.4,0-0.8,0.1-1.1,0.4c-0.4,0.3-0.7,0.6-1.1,1c-0.3,0.4-0.7,0.9-0.9,1.3
|
|
c-0.3,0.5-0.5,1-0.7,1.5s-0.4,0.9-0.5,1.4c-0.1,0.4-0.2,0.8-0.2,1.1c0,0.3,0.1,0.6,0.2,0.9C90.5,78.7,90.7,78.8,91,78.8"
|
|
/>
|
|
<path
|
|
class="st1 x"
|
|
d="M114.1,73.1c-0.5,0.6-1,1.3-1.6,2s-1.3,1.4-2,1.9c-0.7,0.6-1.5,1.1-2.3,1.5s-1.6,0.6-2.4,0.6c-0.6,0-1.1-0.2-1.6-0.5
|
|
c-0.4-0.4-0.6-0.9-0.7-1.4c-0.3,0.2-0.6,0.5-0.9,0.7s-0.7,0.4-1,0.6c-0.4,0.2-0.7,0.3-1.1,0.4s-0.8,0.2-1.2,0.1
|
|
c-0.6,0-1.3-0.1-1.8-0.5c-0.4-0.3-0.6-0.8-0.6-1.4c0-0.4,0.1-0.7,0.3-1c0.2-0.3,0.6-0.5,1-0.4c0.3,0,0.5,0.1,0.7,0.3
|
|
c0.2,0.2,0.3,0.4,0.3,0.7c0,0.3-0.1,0.5-0.3,0.7c-0.2,0.2-0.4,0.3-0.7,0.3c0,0.3,0.1,0.6,0.3,0.8c0.2,0.2,0.5,0.3,0.8,0.3
|
|
c0.7,0,1.3-0.2,1.9-0.6s1.2-1,1.7-1.6s0.9-1.3,1.2-2c0.3-0.6,0.4-1.3,0.5-1.9c0-0.3-0.1-0.6-0.2-0.9c-0.2-0.3-0.5-0.4-0.8-0.4
|
|
c-0.2,0-0.5,0.1-0.7,0.2s-0.5,0.3-0.6,0.4c-0.2,0.2-0.4,0.4-0.6,0.6s-0.3,0.4-0.5,0.6L101,73c0.2-0.3,0.4-0.5,0.6-0.8
|
|
s0.5-0.5,0.7-0.7c0.3-0.2,0.6-0.4,0.9-0.6c0.3-0.1,0.7-0.2,1.1-0.2c0.5,0,1.1,0.2,1.5,0.5c0.4,0.4,0.6,0.8,0.7,1.3
|
|
c0.5-0.5,1.1-0.9,1.7-1.3c0.6-0.3,1.3-0.5,2-0.5c0.2,0,0.5,0,0.7,0.1c0.2,0,0.5,0.1,0.7,0.2s0.4,0.3,0.5,0.4
|
|
c0.1,0.2,0.2,0.5,0.2,0.7c0,0.4-0.2,0.8-0.5,1s-0.7,0.3-1.1,0.3c-0.1,0-0.3,0-0.4-0.1c0.1-0.2,0.1-0.5,0.2-0.7
|
|
c0.1-0.3,0.1-0.5,0.1-0.8s-0.1-0.5-0.2-0.7s-0.3-0.3-0.6-0.3c-0.5,0-0.9,0.2-1.3,0.5c-0.5,0.4-1,0.8-1.4,1.3s-0.8,1.1-1.1,1.8
|
|
c-0.3,0.6-0.4,1.3-0.4,2c0,0.5,0.1,0.9,0.5,1.3c0.4,0.3,0.8,0.4,1.3,0.4c0.7,0,1.3-0.2,1.9-0.6c0.7-0.4,1.3-0.9,1.9-1.4
|
|
s1.2-1.1,1.7-1.7s0.9-1.1,1.3-1.5L114.1,73.1z"
|
|
/>
|
|
<path
|
|
class="st1 i"
|
|
d="M116.9,71c-0.7,1.1-1.3,2-1.8,2.8s-0.9,1.4-1.2,2s-0.5,1-0.7,1.3c-0.1,0.3-0.2,0.5-0.2,0.8c0,0.1,0,0.3,0.1,0.4
|
|
s0.2,0.2,0.3,0.2c0.4-0.1,0.9-0.2,1.2-0.5c0.7-0.5,1.4-1.1,2-1.7l0.9-1c0.3-0.3,0.6-0.6,0.9-1s0.5-0.6,0.7-0.8l0.5-0.6l0.2,0.1
|
|
c-0.2,0.2-0.4,0.5-0.6,0.8s-0.5,0.6-0.8,0.9s-0.6,0.7-0.9,1l-0.9,0.9c-0.6,0.7-1.4,1.3-2.2,1.8c-0.5,0.3-1.1,0.5-1.7,0.5
|
|
c-0.4,0-0.8-0.1-1.1-0.4c-0.3-0.3-0.4-0.6-0.4-1c0-0.3,0.1-0.6,0.2-0.9c0.2-0.4,0.3-0.8,0.6-1.2c0.3-0.5,0.6-1,1-1.7s1-1.6,1.6-2.6
|
|
L116.9,71z M118.2,66.2c0.3,0,0.5,0.1,0.7,0.3c0.2,0.2,0.3,0.4,0.3,0.7c0,0.3-0.1,0.6-0.4,0.8c-0.2,0.2-0.5,0.4-0.8,0.4
|
|
s-0.6-0.1-0.8-0.3c-0.2-0.2-0.4-0.5-0.4-0.8s0.1-0.6,0.4-0.8C117.6,66.3,117.9,66.2,118.2,66.2"
|
|
/>
|
|
<path
|
|
class="st1 n"
|
|
d="M119.8,75l0.9-1.1c0.4-0.5,0.9-1,1.3-1.4c0.5-0.5,1-0.9,1.6-1.2c0.5-0.3,1.1-0.5,1.7-0.5c0.4,0,0.8,0.1,1.1,0.4
|
|
c0.3,0.3,0.4,0.6,0.4,1c0,0.5-0.2,1.1-0.5,1.5c-0.3,0.5-0.7,1-1,1.6s-0.7,1-1,1.5c-0.3,0.4-0.4,0.8-0.5,1.3c0,0.2,0,0.3,0.1,0.4
|
|
s0.3,0.2,0.4,0.2c0.4-0.1,0.7-0.2,1-0.5c0.7-0.5,1.3-1.1,1.9-1.7c0.6-0.7,1.2-1.3,1.7-2l1.2-1.4l0.2,0.1l-1.4,1.7
|
|
c-0.6,0.7-1.1,1.3-1.8,2c-0.6,0.6-1.2,1.2-1.9,1.7c-0.5,0.3-1.1,0.5-1.6,0.5s-0.9-0.1-1.2-0.5c-0.3-0.3-0.4-0.7-0.4-1.1
|
|
c0-0.5,0.2-1.1,0.5-1.5c0.3-0.5,0.6-1,1-1.5s0.7-1,1-1.4c0.3-0.3,0.4-0.7,0.5-1.2c0-0.1-0.1-0.3-0.2-0.4s-0.3-0.2-0.5-0.2
|
|
c-0.4,0-0.7,0.2-1,0.4c-0.4,0.3-0.9,0.6-1.3,1c-0.5,0.5-0.9,1-1.3,1.5s-0.9,1.1-1.3,1.6s-0.8,1.1-1.1,1.6s-0.6,0.9-0.8,1.3
|
|
l-2.2,0.1c0.8-1.3,1.6-2.6,2.3-3.8s1.6-2.6,2.3-3.9l2.5-0.1l-2.9,4H119.8z"
|
|
/>
|
|
<path
|
|
class="st1 c"
|
|
d="M145.2,73.1c-0.5,0.6-1.1,1.3-1.8,2c-0.6,0.7-1.3,1.4-2,1.9c-0.7,0.6-1.5,1.1-2.3,1.4c-0.8,0.4-1.7,0.6-2.6,0.6
|
|
c-0.7,0-1.5-0.2-2-0.7c-0.5-0.6-0.7-1.3-0.7-2.1c0-0.7,0.2-1.4,0.6-2.1c0.4-0.7,1-1.3,1.6-1.8s1.4-1,2.1-1.3
|
|
c0.7-0.3,1.5-0.5,2.3-0.5c0.6,0,1.1,0.1,1.6,0.4c0.4,0.2,0.6,0.6,0.6,1c0,0.3-0.1,0.5-0.2,0.8c-0.1,0.2-0.2,0.4-0.4,0.6
|
|
s-0.4,0.3-0.6,0.4c-0.2,0.1-0.4,0.1-0.7,0.1c-0.2,0-0.3,0-0.5,0c0.1-0.3,0.2-0.7,0.3-1s0.2-0.7,0.2-1c0-0.2-0.1-0.4-0.2-0.6
|
|
c-0.1-0.1-0.3-0.2-0.5-0.2c-0.5,0-0.9,0.2-1.3,0.4c-0.5,0.3-1,0.7-1.4,1.2s-0.8,1.1-1.1,1.6c-0.3,0.6-0.4,1.3-0.4,2
|
|
c0,0.5,0.2,1,0.5,1.4c0.4,0.4,0.9,0.6,1.4,0.6c0.7,0,1.5-0.2,2.1-0.6c0.7-0.4,1.4-0.9,2-1.4s1.2-1.1,1.7-1.8L145,73L145.2,73.1z"
|
|
/>
|
|
<path
|
|
class="st1 o1"
|
|
d="M155.7,73c-0.3,0.4-0.6,0.7-1,1s-0.8,0.5-1.3,0.5c-0.3,0-0.6-0.1-0.9-0.2c-0.3-0.2-0.5-0.4-0.7-0.6
|
|
c-0.2,0.7-0.5,1.4-0.9,2.1c-0.8,1.3-2,2.3-3.4,2.9c-0.7,0.3-1.4,0.4-2.2,0.4c-0.7,0-1.4-0.2-1.9-0.7s-0.8-1.2-0.7-1.9
|
|
c0-0.8,0.2-1.5,0.6-2.2c0.4-0.7,0.9-1.3,1.5-1.9c0.6-0.5,1.3-1,2.1-1.3c0.7-0.3,1.5-0.5,2.2-0.5s1.3,0.2,1.9,0.6
|
|
c0.4,0.4,0.7,0.9,0.8,1.5c0.1,0.4,0.2,0.7,0.5,1s0.6,0.4,1,0.4s0.8-0.1,1.1-0.4c0.4-0.3,0.8-0.6,1.1-1L155.7,73z M145.5,78.8
|
|
c0.4,0,0.8-0.1,1.1-0.4c0.4-0.3,0.7-0.6,1.1-1c0.3-0.4,0.7-0.9,0.9-1.3c0.3-0.5,0.5-1,0.7-1.5s0.4-0.9,0.5-1.4
|
|
c0.1-0.4,0.2-0.8,0.2-1.1c0-0.3-0.1-0.6-0.2-0.9c-0.2-0.2-0.5-0.3-0.7-0.3c-0.4,0-0.8,0.1-1.1,0.4c-0.4,0.3-0.7,0.6-1.1,1
|
|
c-0.3,0.4-0.7,0.9-0.9,1.3c-0.3,0.5-0.5,1-0.7,1.5s-0.4,0.9-0.5,1.4c-0.1,0.4-0.2,0.8-0.2,1.1c0,0.3,0.1,0.6,0.2,0.9
|
|
C144.9,78.7,145.2,78.8,145.5,78.8"
|
|
/>
|
|
<path
|
|
class="st1 dot"
|
|
d="M153.6,77.6c0-0.7,0.6-1.2,1.2-1.2c0.7,0.1,1.2,0.7,1.1,1.3c-0.1,0.6-0.5,1.1-1.1,1.1c-0.3,0-0.6-0.1-0.9-0.4
|
|
C153.8,78.3,153.6,78,153.6,77.6"
|
|
/>
|
|
</g>
|
|
|
|
<path class="outer-circle-line" d="M40.5,25.2c19.4,0,19.4,30.1,0,30.1C21.1,55.3,21.1,25.2,40.5,25.2z" />
|
|
<circle class="st0 outer-circle" cx="40.5" cy="40.6" r="36.3" />
|
|
<circle class="st0 inner-circle" cx="51" cy="51" r="21.5" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
this.$gsap
|
|
.timeline()
|
|
.set($('.preLoader svg'), { opacity: 1 })
|
|
.from($('.preLoader .inner-circle,.preLoader .outer-circle'), { opacity: 0, duration: 0.5 })
|
|
.to(
|
|
$('.preLoader .inner-circle'),
|
|
{
|
|
motionPath: {
|
|
path: '.preLoader .outer-circle-line',
|
|
align: '.preLoader .outer-circle-line',
|
|
alignOrigin: [0.5, 0.5],
|
|
autoRotate: true,
|
|
start: 0.4,
|
|
end: 1.5
|
|
},
|
|
duration: 2,
|
|
ease: 'bounce'
|
|
},
|
|
'-=0.7'
|
|
)
|
|
.from($('.preLoader .top-txt path'), { opacity: 0, x: 5, duration: 0.15, stagger: 0.05 }, '+=0.4')
|
|
.from($('.preLoader .bottom-txt path'), { opacity: 0, x: 5, duration: 0.15, stagger: 0.05 })
|
|
.to($('.preLoader'), { autoAlpha: 0, duration: 0.3 }, '+=0.5')
|
|
.timeScale(1.5)
|
|
})
|
|
}
|
|
}
|
|
</script>
|