How can I use SVG for loading indicators?

How can I use SVG for loading indicators?

You can create a loading indicator using SVG by designing a simple shape or animation. Would you like an example?

Yes, please provide an example of an SVG loading spinner.

Here's a basic SVG spinner:

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="4" fill="none" />
  <circle cx="50" cy="50" r="40" stroke="lightblue" stroke-width="4" fill="none" stroke-dasharray="25, 100" />
</svg>

This creates a circular loading spinner.

How can I animate this SVG spinner?

You can animate it using CSS. For example, add this CSS:

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

circle {
  animation: spin 1s linear infinite;
}

This will make your spinner rotate continuously.