alpha_full/admin/adminInclude/spinner/spinnerAdmin.php

<style>
#spinnerAdminOverlay{
	font-family: Comfortaa, cursive;
/*	color: #FF8C00;*/
	color: black;
	font-size:1.2rem;
	fill: #fff;
	resize:none;
	height:100%;
	opacity:1;
	position: fixed; 
	display: none; 
	width: 100%; 
	height: 100%; 
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background-color: rgba(0,0,0,0.5);
	background-color: lightgrey;
	z-index: 20;
}

#spinnerAdminOverlay:target{
	display: block;
	resize:none;
	opacity:0.8;
}

.spinnerAdmPopup{
	background: #fff;
	padding: 20px;
	border: 2px solid #ddd;
	position: relative;
	margin: 10% auto;
	width: 60%;
	box-shadow: 0px 0px 20px #000;
	border-radius: 10px;
	text-align:center;
	resize:none;
	overflow:visible;
	opacity:0.8;
}

.loaderAdmin{
	position:relative;
	top:20%;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	background:white;

	/* mode montre
	border: 18px solid green;
	border-bottom: 1px solid ;
	*/

	/* mode 4 couleur anneau */
	/* background:linear-gradient(90deg, rgba(255,212,9,0.9) 10%, rgba(251,139,8,0.8) 44%, rgba(245,9,0,0.8) 92%); --> pas de fonds en couleur */

	border-top: 5px solid green;
	border-bottom: 5px solid #EFE622; /* jaune */
	border-left: 5px solid #2244EF; /* bleu */
	border-right: 5px solid red;
	width: 35px;
	height: 35px;

	/* mode ballon basket
	border-top: 16px solid green;
	border-bottom: 16px solid #E0E24B;
	*/

	/* mode terre gradient
	background:linear-gradient(90deg, rgba(255,212,9,0.9) 10%, rgba(251,139,8,0.8) 44%, rgba(245,9,0,0.8) 92%);
	/*border-top: 16px solid linear-gradient(90deg, rgba(255,212,9,0.9) 10%, rgba(251,139,8,0.8) 44%, rgba(245,9,0,0.8) 92%);
	border-bottom: 16px solid linear-gradient(90deg, rgba(255,212,9,0.9) 10%, rgba(251,139,8,0.8) 44%, rgba(245,9,0,0.8) 92%);
	border-left: 16px solid linear-gradient(90deg, rgba(255,212,9,0.9) 10%, rgba(251,139,8,0.8) 44%, rgba(245,9,0,0.8) 92%);
	border-right: 16px solid linear-gradient(90deg, rgba(255,212,9,0.9) 10%, rgba(251,139,8,0.8) 44%, rgba(245,9,0,0.8) 92%);
	width: 36px;
	height: 36px;
	*/

	/* mode sablier
	border-bottom: 10px solid lightblue;
	border-top: 10px solid lightblue;
	*/

	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}

@keyframes spin	{
	0% {transform: rotate(0deg); }
	100% {transform: rotate(360deg); }
}

.flexSpinner{
	display:flex;
	justify-content: center;
	align-items: center;
	margin-top:25px;
	width:100%;
	gap: 50px;
}

.spinnerMsgClass{
	width:100%;
	text-align:center;
	margin-top:45px;
	display:block;
	font-size:18px;
}

.logo123{
	text-align:center;
	display:block;
}

/* garder les sauts de ligne pour le responsive */
.spinner_close {
	position:absolute;
	opacity:1;
	font-size:40px;
	z-index:20;
	box-shadow: 0px 0px 20px grey;
	color:#440add;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    
    border: 3px solid;
    border-radius: 50%; /* Forme ronde */
    display: flex; /* Utilisation du Flexbox pour centrer l'icône */
    justify-content: center; /* Centrer horizontalement */
    cursor: pointer;
}

.spinner_close:hover {color:red; cursor:pointer; }

.fa-times-circle {
	--fa-primary-color: red;
	--fa-secondary-color: red;
}

</style>

<?php
	$referant='';
	if (empty($spinnerMsg)  ) {$spinnerMsg="Traitement en cours... ";}
	if (isset($_SERVER['HTTP_REFERER']) && !empty($_SERVER['HTTP_REFERER'])) {
		// echo '<input type="hidden" name="referant" id="referant" value="' .$_SERVER['HTTP_REFERER']. '" >';
		$referant=$_SERVER['HTTP_REFERER'];
	}

	echo '<div id="spinnerAdminOverlay" class="spinnerAdminOverlay" style="display:none;" >';
		echo '<div class="spinnerAdmPopup" id="spinnerAdmPopup" >';
		
				// -----------------------------------------------------
				// Bouton fermer
				// -----------------------------------------------------
				echo '<a href="' .$referant. '" target="top" >';
					echo '<span id="FermerSpinner" class="fad fa-times-circle spinner_close"  onClick="offSpinnerAdmin();" alt="Fermer" ></span>';
				echo '</a>';

				// -----------------------------------------------------
				// Message
				// -----------------------------------------------------
				echo '<span id="spinnerMsg" class="spinnerMsgClass" >' .$spinnerMsg. '</span>';

				echo '<div class="flexSpinner flexToColumn" >';
				// -----------------------------------------------------
				// Loader
				// -----------------------------------------------------
				echo '<div class="loaderAdmin" id="loaderAdmin"></div>';

				// -----------------------------------------------------
				// Logo 123Ventes
				// -----------------------------------------------------
				echo '<div class="logo123"  >';
					echo '<a href="https://123ventes.com" >'; include ($includeAdminDesign. "/123ventes.html"); echo '</a>';
				echo '</div>';
			echo '</div>';

			// -----------------------------------------------------
			// Bouton Off ( debug)
			// -----------------------------------------------------
			// -----------------------------------------------------
			// echo '<div >&#160;';
			// -----------------------------------------------------
				// echo '<span onClick="offSpinnerAdmin();"  class="boutonsWebmaster">Off ()</span>';
			// echo '</div>';
			
		echo '</div>';
	echo '</div>';
?>

<script language="javascript" >
	function onSpinnerAdmin() {
		// alert('on Spinner Admin');
		if (document.getElementById('spinnerAdminOverlay')) {
			if(document.getElementById('spinnerAdminOverlay').style.display != 'block') {
				document.getElementById('spinnerAdminOverlay').style.display = 'block';
				// alert('on Spinner! ')
			}
		}
		else	alert('on Spinner Admin ne trouve pas son overlay ( le script spinnerAdmin.php existe t-il? ) ! ');
	}

	function offSpinnerAdmin() {
		if (document.getElementById('spinnerAdminOverlay')) {
			if(document.getElementById('spinnerAdminOverlay').style.display != 'none') {
				document.getElementById('spinnerAdminOverlay').style.display = 'none';
			}
		}
	}
</script>

<?php
	function flushSpinner($spinnerMsg) {
		//echo 'flushSpinner : ' .$spinnerMsg;
		usleep(1000); // 0,01 seconde
		echo '<script type="text/javascript">';
			echo "if (document.getElementById('spinnerMsg')) document.getElementById('spinnerMsg').innerHTML +='&#160;".$spinnerMsg."';";
		echo "</script>";
		ob_flush();
		flush();
		ob_flush();
		sleep(1); // ← PAUSE ici (3 secondes) avant la suite du traitement PHP
	}
?>