gsap.to('.loader',{
delay:0.2,duration:3,background:'#00f',
onUpdate:function(){
$('.loader').html(this.progress()*100);}
})
->loader라는 태그를 만들어 놓고 gsap을 이용해서 %상승값을 구해 나타낸다! duration은
loader 옆에 바로 쓸 수도 있다.
gsap.to('.loader',2{
delay:0.2,background:'#00f',
onUpdate:function(){
$('.loader').html(this.progress()*100);}
})
✅ Timeline을 사용하여 100% 가 되면 화면이 사라지게도 할 수 있다, 모션을 잘 연결해서 쓰면 좋을듯~!
EX)
const percentMotion = gsap.timeline({})
percentMotion
.to('.loader',{
delay:0.2,duration:2,background:'#00f',
onUpdate:function(){
$('.loader').html(this.progress()*100);}
})
.to('.loader',{
delay:.5,
opacity:0,
})
