<!DOCTYPE html>
<html> <head> <meta charset="UFT-8" /> <title>loading</title> <style> svg { border: 1px solid black; } circle, path { fill: transparent; stroke: orange; stroke-width: 10px; stroke-linecap: round; } circle { stroke:rgba(255, 150, 0, 0.5); } </style> </head> <body> <svg width="100" height="100"> <circle r="40" cx="50" cy="50"></circle> <path d="M 10 50 A 40 40 0 0 1 50 10"> <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="0.5s" repeatCount="indefinite"/> </path> </svg> </body> </html>