반응형

div 2개만 이용하고 Percent를 변경하여 사용하고 싶어서 아래와 같이 만들었습니다.

 

 

HTML (React)

uploadPercent는 useState로 변경 하는 로직을 사용 하였습니다.

<div className="progress-bg">
    <div className="progress-bar" style={{width:`${uploadPercent}%`}}></div>
</div>

 

CSS (SASS)

/* 프로그레스바 배경 */
.progress-bg {
    width: 100%;
    height: 10px;
    background-color: #aeb5c4; /* 배경색 */
    border-radius: 15px;
    overflow: hidden;

    /* 진행 부분 */
    .progress-bar {
        height: 100%;
        width: 0%; /* 진행 상태: 0% ~ 100% */
        background-color: #193263; /* 진행바 색상 */
        opacity: 0.9;
        border-radius: 15px 0 0 15px;
        transition: width 0.3s ease;
    }
}

 

반응형
<div class="loading-ispinner">
    <div class="ispinner ispinner-large">
        <div class="ispinner-blade"></div>
        <div class="ispinner-blade"></div>
        <div class="ispinner-blade"></div>
        <div class="ispinner-blade"></div>
        <div class="ispinner-blade"></div>
        <div class="ispinner-blade"></div>
        <div class="ispinner-blade"></div>
        <div class="ispinner-blade"></div>
        <div class="ispinner-blade"></div>
        <div class="ispinner-blade"></div>
        <div class="ispinner-blade"></div>
        <div class="ispinner-blade"></div>
    </div>
</div>

 

/* Progress Bar (iSpinner) - 로딩 바 */
.loading{position: fixed;width: 100%;height: 100%;z-index: 12000;top: 0;left:0;background: rgba(0,0,0,.7);}
.ispinner {width: 52px;height: 52px;position: absolute;top: 50%;left: 50%;margin: -26px 0 0 -26px}
.ispinner .ispinner-blade {position: absolute;top: 37%;left: 44.5%;width: 10%;height: 25%;background-color: #fff;border-radius: 50%/20%;
    -webkit-animation: iSpinnerBlade 1s linear infinite;
            animation: iSpinnerBlade 1s linear infinite;
    will-change: opacity; 
}
.ispinner .ispinner-blade:nth-child(1) {
  -webkit-transform: rotate(30deg) translate(0, -150%);
          transform: rotate(30deg) translate(0, -150%);
  -webkit-animation-delay: -1.6666666667s;
          animation-delay: -1.6666666667s; }
.ispinner .ispinner-blade:nth-child(2) {
  -webkit-transform: rotate(60deg) translate(0, -150%);
          transform: rotate(60deg) translate(0, -150%);
  -webkit-animation-delay: -1.5833333333s;
          animation-delay: -1.5833333333s; }
.ispinner .ispinner-blade:nth-child(3) {
  -webkit-transform: rotate(90deg) translate(0, -150%);
          transform: rotate(90deg) translate(0, -150%);
  -webkit-animation-delay: -1.5s;
          animation-delay: -1.5s; }
.ispinner .ispinner-blade:nth-child(4) {
  -webkit-transform: rotate(120deg) translate(0, -150%);
          transform: rotate(120deg) translate(0, -150%);
  -webkit-animation-delay: -1.4166666667s;
          animation-delay: -1.4166666667s; }
.ispinner .ispinner-blade:nth-child(5) {
  -webkit-transform: rotate(150deg) translate(0, -150%);
          transform: rotate(150deg) translate(0, -150%);
  -webkit-animation-delay: -1.3333333333s;
          animation-delay: -1.3333333333s; }
.ispinner .ispinner-blade:nth-child(6) {
  -webkit-transform: rotate(180deg) translate(0, -150%);
          transform: rotate(180deg) translate(0, -150%);
  -webkit-animation-delay: -1.25s;
          animation-delay: -1.25s; }
.ispinner .ispinner-blade:nth-child(7) {
  -webkit-transform: rotate(210deg) translate(0, -150%);
          transform: rotate(210deg) translate(0, -150%);
  -webkit-animation-delay: -1.1666666667s;
          animation-delay: -1.1666666667s; }
.ispinner .ispinner-blade:nth-child(8) {
  -webkit-transform: rotate(240deg) translate(0, -150%);
          transform: rotate(240deg) translate(0, -150%);
  -webkit-animation-delay: -1.0833333333s;
          animation-delay: -1.0833333333s; }
.ispinner .ispinner-blade:nth-child(9) {
  -webkit-transform: rotate(270deg) translate(0, -150%);
          transform: rotate(270deg) translate(0, -150%);
  -webkit-animation-delay: -1s;
          animation-delay: -1s; }
.ispinner .ispinner-blade:nth-child(10) {
  -webkit-transform: rotate(300deg) translate(0, -150%);
          transform: rotate(300deg) translate(0, -150%);
  -webkit-animation-delay: -0.9166666667s;
          animation-delay: -0.9166666667s; }
.ispinner .ispinner-blade:nth-child(11) {
  -webkit-transform: rotate(330deg) translate(0, -150%);
          transform: rotate(330deg) translate(0, -150%);
  -webkit-animation-delay: -0.8333333333s;
          animation-delay: -0.8333333333s; }
.ispinner .ispinner-blade:nth-child(12) {
  -webkit-transform: rotate(360deg) translate(0, -150%);
          transform: rotate(360deg) translate(0, -150%);
  -webkit-animation-delay: -0.75s;
          animation-delay: -0.75s; }
.ispinner.ispinner-large {width: 50px;height: 50px; }
.ispinner.ispinner-large .ispinner-blade {
   width: 5.5714285714%;
   height: 25.7142857143%;
border-radius: 50%/16.67%; 
}
@-webkit-keyframes iSpinnerBlade {
  0% {opacity: 0.9;}
  50% {opacity: 0.25;}
  100% {opacity: 0.25;} 
}
@keyframes iSpinnerBlade {
  0% {opacity: 0.9;}
  50% {opacity: 0.25;}
  100% {opacity: 0.25;} 
}
/* Progress Bar - iSpinner */

 

반응형
btn.addEventListener('click', () => {
  anime(box, {
    prop: 'margin-left',
    value: 500,
    duration: 1000,
  });
});

function anime(selector, option) {
  let startTime = performance.now();
  requestAnimationFrame(move);

  function move(time) {
    //각 사이클 마다 걸리는 누적 시간
    let timelast = time - startTime;

    //매 반복횟수마다 현재 걸리는 누적시간값을 전체시간으로 나누면 0~1사이의 실수로 반환 가능
    //progress : 설정한 시간 대비 현재 반복되는 모션 진행상황을 0~1사이의 소수점으로 나타내주는 진행률 (x100 -백분율)
    let progress = timelast / option.duration;

    console.log('진행률', progress);

    if (progress < 1) {
      requestAnimationFrame(move);
    }

    //고정된 반복횟수 안에서 제어할 수 있는건 각 반복 사이클 마다의 변화량이기 때문에
    //변경하려고 하는 targetValue값에 진행률을 곱해서 변화량을 제어
    box.style[option.prop] = option.value * progress + 'px';
  }
}

 

반응형
$.ajax({
	type: "POST",
	url: 유알엘(Url),
	dataType: "json",
	data: 데이터,
	success: function (result, status, xhr) {
		//결과 값 
	},
	beforeSend: function (){  
		$("#Progress_Bar").show(); //프로그래스 바
	},
	complete : function (){
		$("#Progress_Bar").hide(); //프로그래스 바
	},
	error: function (xhr, status, error) {
		alert("[Error]관리자에게 문의 해 주세요. " + status);
		return;
	}
});

 

beforeSend는 Ajax를 보내기 전에 쓰는 함수

complete는 ajax 작업이 끝나고 나서 쓰는 함수.

ajax에 async: false 로 되어있다면 프로그래스는 되지 않을 것 입니다.

 

+ Recent posts