@delvicons/icons/dist/vanilla/components/LoadingSpinner.ts

DelvIcons - Comprehensive icon library with static and animated SVG icons for all frameworks

export function createLoadingSpinner(options = {}) {
  const {
    size = 24,
    color = 'currentColor',
    className = '',
    animated = true,
    ...attrs
  } = options;

  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  svg.setAttribute('width', size.toString());
  svg.setAttribute('height', size.toString());
  svg.setAttribute('viewBox', '0 0 24 24');
  svg.setAttribute('fill', 'none');
  svg.className = [
    'delv-icon',
    'delv-icon-loading-spinner',
    animated ? 'delv-animated' : '',
    className
  ].filter(Boolean).join(' ');

  // Set additional attributes
  Object.entries(attrs).forEach(([key, value]) => {
    svg.setAttribute(key, value);
  });

  svg.innerHTML = `<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-dasharray="31.416" stroke-dashoffset="31.416">
    <animate attributeName="stroke-dasharray" dur="2s" values="0 31.416;15.708 15.708;0 31.416" repeatCount="indefinite"/>
    <animate attributeName="stroke-dashoffset" dur="2s" values="0;-15.708;-31.416" repeatCount="indefinite"/>
    <animateTransform attributeName="transform" type="rotate" dur="2s" values="0 12 12;360 12 12" repeatCount="indefinite"/>
  </circle>`;
  return svg;
}