티스토리 뷰

IT tech Coding/php

php 코드 로딩할때 '로딩중입니다' 화면에 표시하는 코드

Coding Life 2023. 3. 22. 08:29
반응형

PHP 코드를 로딩 중일 때, 화면에 표시하는 방법은 여러 가지가 있습니다. 가장 간단한 방법은 아래와 같이 "로딩 중입니다" 메시지를 출력하는 것입니다.

 




<?php
echo "로딩 중입니다...";
?>
위 코드를 PHP 파일에 작성하고 웹 브라우저에서 해당 파일을 열면, 화면에 "로딩 중입니다..."라는 메시지가 출력됩니다. 이때, 화면에 출력되는 것이 모두 PHP 코드이기 때문에, 로딩이 완료될 때까지는 화면이 공백으로 남아 있게 됩니다.

만약 로딩 중에도 다른 내용을 화면에 출력하고 싶다면, 아래와 같이 JavaScript를 이용하여 구현할 수 있습니다.

<?php
echo "<script>document.write('로딩 중입니다...');</script>";
?>

위 코드를 PHP 파일에 작성하고 웹 브라우저에서 해당 파일을 열면, 화면에 "로딩 중입니다..."라는 메시지가 출력되며, 로딩이 완료되면 이 메시지가 사라지고 다른 내용이 출력됩니다. 이 방법은 로딩 중에도 화면을 다양한 방법으로 활용할 수 있기 때문에, 많이 사용됩니다.


스피너 이용해서 하는 방법 추가
스피너(Spinner)는 로딩 중임을 나타내는 그래픽 요소 중 하나로, 회전하는 원 형태로 표시됩니다. 이를 이용하여 로딩 중임을 표시하는 방법은 아래와 같습니다.

CSS 스타일링을 이용하여 스피너 구현하기
CSS를 이용하여 스피너를 구현할 수 있습니다. 아래는 스피너를 구현한 CSS 코드 예시입니다.

CSS Code :

.spinner {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.2);
  border-top-color: #333;
  border-radius: 50%;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
위 코드는 회전하는 스피너를 구현합니다. spinner 클래스를 가진 요소에 적용하면 스피너가 표시됩니다.

실제 실행하면 아래와 같이 나오죠~



PHP 코드에 스피너 삽입하기
스피너를 구현한 CSS 코드를 PHP 파일에 삽입하여 사용할 수 있습니다. 아래는 스피너를 사용한 PHP 코드 예시입니다.

<?php
echo "<div class='spinner'></div>";
?>


위 코드를 PHP 파일에 작성하고 웹 브라우저에서 해당 파일을 열면, 스피너가 표시되며 로딩이 완료되면 사라지게 됩니다.

위 방법은 로딩 중에 스피너를 활용하여 사용자 경험을 향상시키는 방법 중 하나입니다.

 

또 하나의 방법으로는 

PHP 페이지가 로딩 중일 때 스피너를 표시하고, 페이지가 로딩되면 스피너를 숨기는 방법은 JavaScript를 이용하여 구현할 수 있습니다.

먼저, 스피너를 구현한 CSS 코드를 작성합니다.

.spinner {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.2);
  border-top-color: #333;
  border-radius: 50%;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.spinner-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
}

 

위 코드는 spinner 클래스로 스피너를 구현하고, spinner-wrapper 클래스로 스피너를 감싸는 요소를 구현합니다. spinner-wrapper 클래스는 스피너를 감싸는 요소를 정의하고, 배경색과 투명도를 지정합니다. 또한, display: none;으로 초기에는 스피너를 표시하지 않습니다.

다음으로, PHP 파일에 아래와 같은 코드를 추가하여 스피너를 표시하고 숨기는 기능을 구현합니다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>PHP 페이지</title>
	<!-- CSS 파일 추가 -->
	<link rel="stylesheet" href="spinner.css">
	<!-- JavaScript 추가 -->
	<script type="text/javascript">
		// 페이지가 로딩될 때 실행되는 함수
		window.onload = function() {
			// 스피너를 감싸는 요소를 가져옵니다.
			var spinnerWrapper = document.getElementById('spinner-wrapper');
			// 스피너를 표시합니다.
			spinnerWrapper.style.display = 'flex';
			// 페이지 로딩이 완료되면 스피너를 숨깁니다.
			window.setTimeout(function() {
				spinnerWrapper.style.display = 'none';
			}, 1000); // 1초 후에 실행
		};
	</script>
</head>
<body>
	<!-- 스피너를 감싸는 요소 추가 -->
	<div id="spinner-wrapper">
		<div class="spinner"></div>
	</div>

	<!-- 페이지 내용 추가 -->
	<h1>PHP 페이지</h1>
	<p>내용입니다.</p>
</body>
</html>

 

반응형
저작자표시 비영리 변경금지

'IT tech Coding > php' 카테고리의 다른 글

PHP 업무용 레이져기계 작업공정도 제작(javascript 활용)  (1) 2023.04.15
php와 자바스크립트를 이용해서 checkbox 여러개를 체크하고 해제하고 하는 것을 배열에 저장해서 서버에 저장하는 코드  (0) 2023.04.12
[php] 전자결재 시스템 (작성함, 상신함, 미결함, 가결함, 부결함, 대기함, 참조함) 메뉴 제작하는 간단한 코드 구현  (0) 2023.03.18
흔히 틀리는 php url get 형식 '|' 문자 넘기는 코드 알아봅시다.  (0) 2023.03.06
php 문자열 끝에 개행문자 삭제  (0) 2023.02.28
댓글