animated css loading svg

loading.php

<?php
/**
 * Loading spinner SVG, pass in a 3, 6, or 8 digit hex color code as a query parameter "c" to set the color
 * example usage in a background image:
 * style="background:url('/wp-content/themes/tenet2025/loading.php?c=58d') no-repeat center center/15% #000;"
 */
$color = 'currentColor';
$qc = $_GET['c'] ?? null;
if ($qc && preg_match('/^[a-fA-F0-9]{3,8}$/', $qc)) {
    $color = '#' . $qc;
}
header('Content-Type: image/svg+xml');
?>
<svg xmlns="http://www.w3.org/2000/svg" display="block" preserveAspectRatio="xMidYMid" style="background:rgba(255,255,255,0)" viewBox="0 0 10 10">
<style>g { transform-origin: 5px 5px; animation: 4s linear infinite r; } @keyframes r { to { transform: rotate(360deg); } }</style>
<g><circle cx="5" cy="5" r="3" fill="none" stroke="<?php echo $color; ?>" stroke-dasharray="10 5" stroke-width="1" /></g>
</svg>

loading.svg

<svg xmlns="http://www.w3.org/2000/svg" display="block" preserveAspectRatio="xMidYMid" style="background:rgba(255,255,255,0)" viewBox="0 0 10 10">
  <style>
    g { 
      transform-origin: 5px 5px; 
      animation: 4s linear infinite r; 
    } 
    @keyframes r { 
      to { transform: rotate(360deg); } 
    }
  </style>
  <g>
    <circle cx="5" cy="5" r="3" fill="none" stroke="#000" stroke-dasharray="10 5" stroke-width="1" />
  </g>
</svg>