WP-Admin-Reference/web/app/themes/wpadminref/template-parts/sections/spinners.php

<?php
/**
 * Section spinners view
 *
 * @package wpadminref
 */

?>
<section class="section section-spinners" id="spinners">
	<header class="section-header">
		<h2>Spinners</h2>
		<hr/>
	</header>
	<div class="section-content">

		<h3>@1x</h3>

		<div class="spinners-row">
			<div>
				<p>HTML spinner (20x20)</p>
			</div>
			<div>
				<img src="<?php echo esc_url( get_admin_url() . 'images/spinner.gif' ); ?>" />
			</div>
			<div>
				<pre class="line-numbers language-markup">
					<code class="language-markup">
						&lt;span class=&quot;spinner is-active&quot;&gt;&lt;/span&gt;
					</code>
				</pre>
			</div>
		</div>

		<div class="spinners-row">
			<div>
				<p>spinner.gif (20x20)</p>
			</div>
			<div>
				<img src="<?php echo esc_url( get_admin_url() . 'images/spinner.gif' ); ?>" />
			</div>
			<div>
				<pre class="line-numbers language-markup">
					<code class="language-markup">
						&lt;img src=&quot;&lt;?php echo esc_url( get_admin_url() . 'images/spinner.gif' ); ?&gt;&quot; /&gt;
					</code>
				</pre>
			</div>
		</div>

		<div class="spinners-row">
			<div>
				<p>loading.gif (16x16)</p>
			</div>
			<div>
				<img src="<?php echo esc_url( get_admin_url() . 'images/loading.gif' ); ?>" />
			</div>
			<div>
				<pre class="line-numbers language-markup">
					<code class="language-markup">
						&lt;img src=&quot;&lt;?php echo esc_url( get_admin_url() . 'images/loading.gif' ); ?&gt;&quot; /&gt;
					</code>
				</pre>
			</div>
		</div>

		<div class="spinners-row">
			<div>
				<p>wpspin_light.gif (16x16)</p>
			</div>
			<div>
				<img src="<?php echo esc_url( get_admin_url() . 'images/wpspin_light.gif' ); ?>" />
			</div>
			<div>
				<pre class="line-numbers language-markup">
					<code class="language-markup">
						&lt;img src=&quot;&lt;?php echo esc_url( get_admin_url() . 'images/wpspin_light.gif' ); ?&gt;&quot; /&gt;
					</code>
				</pre>
			</div>
		</div>

		<div class="spinners-row">
			<div>
				<p>loader.gif (31x31)</p>
			</div>
			<div>
				<img src="<?php echo esc_url( includes_url() . 'js/tinymce/skins/lightgray/img//loader.gif' ); ?>" />
			</div>
			<div>
				<pre class="line-numbers language-markup">
					<code class="language-markup">
						&lt;img src=&quot;&lt;?php echo esc_url( includes_url() . 'js/tinymce/skins/lightgray/img//loader.gif' ); ?&gt;&quot; /&gt;
					</code>
				</pre>
			</div>
		</div>

		<div class="spinners-row">
			<div>
				<p>loadingAnimation.gif (416x26)</p>
			</div>
			<div>
				<img src="<?php echo esc_url( includes_url() . 'js/thickbox/loadingAnimation.gif' ); ?>" class="img-fluid" />
			</div>
			<div>
				<pre class="line-numbers language-markup">
					<code class="language-markup">
						&lt;img src=&quot;&lt;?php echo esc_url( includes_url() . 'js/thickbox/loadingAnimation.gif' ); ?&gt;&quot; /&gt;
					</code>
				</pre>
			</div>
		</div>

		<h3>@2x</h3>

		<div class="spinners-row">
			<div>
				<p>spinner-2x.gif (40x40)</p>
			</div>
			<div>
				<img src="<?php echo esc_url( get_admin_url() . 'images/spinner-2x.gif' ); ?>" />
			</div>
			<div>
				<pre class="line-numbers language-markup">
					<code class="language-markup">
						&lt;img src=&quot;&lt;?php echo esc_url( get_admin_url() . 'images/spinner-2x.gif' ); ?&gt;&quot; /&gt;
					</code>
				</pre>
			</div>
		</div>

		<div class="spinners-row">
			<div>
				<p>wpspin_light-2x.gif (32x32)</p>
			</div>
			<div>
				<img src="<?php echo esc_url( get_admin_url() . 'images/wpspin_light-2x.gif' ); ?>" class="img-fluid" />
			</div>
			<div>
				<pre class="line-numbers language-markup">
					<code class="language-markup">
						&lt;img src=&quot;&lt;?php echo esc_url( get_admin_url() . 'images/wpspin_light-2x.gif' ); ?&gt;&quot; /&gt;
					</code>
				</pre>
			</div>
		</div>

	</div>
</section>