그누보드 QA - 이니시스 결제 중 로딩화면 선배님들을 어떻게 구현들 하셨나요?

이니시스 결제 중 로딩화면 선배님들을 어떻게 구현들 하셨나요?

2021.06.07 15:31:39 조회 1443 (58.♡.♡.231)

본문

https://mobile.inicis.com/smart/payment/

요 url을 보낼 때 파라미터 P_NEXT_URL 의 페이지중 loader를 간단하게 넣었습니다.



<!DOCTYPE html>
<html>
<head>
  <title>결제결과</title>
  <meta charset="euc-kr">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes, target-densitydpi=medium-dpi"/>
  <link rel="stylesheet" type="text/css" href="./css/import.css"/>
  <style>
      .loader {
          border: 16px solid #f3f3f3;
          border-radius: 50%;
          border-top: 16px solid #3498db;
          width: 120px;
          height: 120px;
          -webkit-animation: spin 2s linear infinite; /* Safari */
          animation: spin 2s linear infinite;
          position: fixed;
          margin-top: 1rem;
          margin-left: 1rem;
      }

      /* Safari */
      @-webkit-keyframes spin {
          0% {
              -webkit-transform: rotate(0deg);
          }
          100% {
              -webkit-transform: rotate(360deg);
          }
      }

      @keyframes spin {
          0% {
              transform: rotate(0deg);
          }
          100% {
              transform: rotate(360deg);
          }
      }
  </style>
</head>
<body>
<div class="loader" id="loader"></div>
</body>
<script>
  setTimeout(function () {
    document.getElementById('loader').style.display = 'none';
  }, 5000);
</script>
</html>

위 소스는 로더만 따로 때온 html소스라 내용은 없습니다.

로더는 잘 돌아가는데... 보여지는 타이밍이 결제가 완료됐을때 결제결과와 같이 보여집니다.