nfreear/loading-spinner.css.html

## loading-spinner.css.html
<!doctype html><html lang="en"> <title> Spinner animation </title>

<script> console.time('my-timer') </script>

<style>
body { font: 1rem sans-serif; margin: auto; max-width: 32rem; }
button { font: inherit; padding: .3rem 1rem; }

:root {
  --my-spinner-size: 5rem;
  --my-spinner-color: #134;
  --my-spinner-text: 'Loading. \APlease wait…';
}

.my-prefix-loading {
  X-opacity: 0.3;
}

.my-prefix-loading:before {
    display: block;
    position: absolute;
    z-index: 999;
    content: '';
    border: 8px solid #c0c0c0;
    border-top: 8px solid var(--my-spinner-color, black);
    border-radius: 50%;
    width: var(--my-spinner-size, 60px);
    height: var(--my-spinner-size, 60px);
    animation: Spin 2s linear infinite;
    top: 50vh;
    left: 50%;
    margin-top: calc(-0.5 * var(--my-spinner-size, 60px));
    margin-left: calc(-0.5 * var(--my-spinner-size, 60px));
}

@keyframes Spin {
  from { transform: rotate(0);     }
  to   { transform: rotate(1turn); }
}

.my-prefix-loading:after,
[ lang ^= en ] .my-prefix-loading:after {
  display: block;
  position: absolute;
  z-index: 998;
  background: rgba(252, 252, 252, 0.8);
  color: var(--my-spinner-color, black);
  content: var(--my-spinner-text, 'Loading…');
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  padding-left: .5rem;
  padding-top: calc(50vh + 2rem + calc(0.5 * var(--my-spinner-size, 60px)));
  line-height: 1.5;
  text-align: center;
  white-space: pre-wrap;
}

.my-prefix-loading.lang-fr:after,
[ lang ^= fr ] .my-prefix-loading:after {
  content: var(--my-spinner-text-fr, "Chargement. \AS’il vous plaît, attendez.");
}

.my-prefix-loading.lang-zh:after,
[ lang ^= zh ] .my-prefix-loading:after {
  content: var(--my-spinner-text-zh, '正在加载。请稍等');
}
</style>


<div id="loading-target" class="X-my-prefix-loading">

  <h1> Spinner animation </h1>

  <p> <a href="#" >Hello world!</a> </p>

  <p> <button id="start-button">Start</button>

<pre>


NDF, 22-June-2022.

* https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate,
* https://translate.google.com/?sl=auto&tl=fr&text=Loading.%20Please%20wait&op=translate,
* https://stackoverflow.com/questions/11296150/get-time-of-page-loading-start-in-javascript,

</pre>

</div>


<script>
  const SPINNER_TEXT = getComputedStyle(document.documentElement).getPropertyValue('--my-spinner-text');
  document.documentElement.style.setProperty('--my-spinner-text', '"Loading. Hello!"');

  const TARGET = document.querySelector('#loading-target');
  const BUTTON = document.querySelector('#start-button');

  BUTTON.addEventListener('click', ev => {
    ev.preventDefault();

    TARGET.classList.add('my-prefix-loading');

    setTimeout(() => {
      TARGET.classList.remove('my-prefix-loading');
    },
    4000);

    console.debug('Start click:', ev);

    console.timeLog('my-timer');
  });

  console.debug(`Loading/Spinner text: ${SPINNER_TEXT}`);
</script>


<script>
  console.debug('Performance:', new Date(performance.timing.connectStart).toISOString(), performance);

  const observer = new PerformanceObserver((list, obs) => {
    // Process the "measure" event
    console.debug('Perf observer:', list.getEntries(), observer);
  });
  observer.observe({ entryTypes: [ 'navigation' ] });
</script>

</html>
	<!doctype html><html lang="en"> <title> Spinner animation </title>

	<script> console.time('my-timer') </script>

	<style>
	body { font: 1rem sans-serif; margin: auto; max-width: 32rem; }
	button { font: inherit; padding: .3rem 1rem; }

	:root {
	--my-spinner-size: 5rem;
	--my-spinner-color: #134;
	--my-spinner-text: 'Loading. \APlease wait…';
	}

	.my-prefix-loading {
	X-opacity: 0.3;
	}

	.my-prefix-loading:before {
	display: block;
	position: absolute;
	z-index: 999;
	content: '';
	border: 8px solid #c0c0c0;
	border-top: 8px solid var(--my-spinner-color, black);
	border-radius: 50%;
	width: var(--my-spinner-size, 60px);
	height: var(--my-spinner-size, 60px);
	animation: Spin 2s linear infinite;
	top: 50vh;
	left: 50%;
	margin-top: calc(-0.5 * var(--my-spinner-size, 60px));
	margin-left: calc(-0.5 * var(--my-spinner-size, 60px));
	}

	@keyframes Spin {
	from { transform: rotate(0); }
	to { transform: rotate(1turn); }
	}

	.my-prefix-loading:after,
	[ lang ^= en ] .my-prefix-loading:after {
	display: block;
	position: absolute;
	z-index: 998;
	background: rgba(252, 252, 252, 0.8);
	color: var(--my-spinner-color, black);
	content: var(--my-spinner-text, 'Loading…');
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	padding-left: .5rem;
	padding-top: calc(50vh + 2rem + calc(0.5 * var(--my-spinner-size, 60px)));
	line-height: 1.5;
	text-align: center;
	white-space: pre-wrap;
	}

	.my-prefix-loading.lang-fr:after,
	[ lang ^= fr ] .my-prefix-loading:after {
	content: var(--my-spinner-text-fr, "Chargement. \AS’il vous plaît, attendez.");
	}

	.my-prefix-loading.lang-zh:after,
	[ lang ^= zh ] .my-prefix-loading:after {
	content: var(--my-spinner-text-zh, '正在加载。请稍等');
	}
	</style>


	<div id="loading-target" class="X-my-prefix-loading">

	<h1> Spinner animation </h1>

	<p> <a href="#" >Hello world!</a> </p>

	<p> <button id="start-button">Start</button>

	<pre>


	NDF, 22-June-2022.

	* https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate,
	* https://translate.google.com/?sl=auto&tl=fr&text=Loading.%20Please%20wait&op=translate,
	* https://stackoverflow.com/questions/11296150/get-time-of-page-loading-start-in-javascript,

	</pre>

	</div>


	<script>
	const SPINNER_TEXT = getComputedStyle(document.documentElement).getPropertyValue('--my-spinner-text');
	document.documentElement.style.setProperty('--my-spinner-text', '"Loading. Hello!"');

	const TARGET = document.querySelector('#loading-target');
	const BUTTON = document.querySelector('#start-button');

	BUTTON.addEventListener('click', ev => {
	ev.preventDefault();

	TARGET.classList.add('my-prefix-loading');

	setTimeout(() => {
	TARGET.classList.remove('my-prefix-loading');
	},
	4000);

	console.debug('Start click:', ev);

	console.timeLog('my-timer');
	});

	console.debug(`Loading/Spinner text: ${SPINNER_TEXT}`);
	</script>


	<script>
	console.debug('Performance:', new Date(performance.timing.connectStart).toISOString(), performance);

	const observer = new PerformanceObserver((list, obs) => {
	// Process the "measure" event
	console.debug('Perf observer:', list.getEntries(), observer);
	});
	observer.observe({ entryTypes: [ 'navigation' ] });
	</script>

	</html>