<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000px" height="400px"
     viewBox="0 0 1000 400" preserveAspectRatio="xMidYMid">
    <rect width="100%" height="100%" fill="#F4F6F8" />
    <circle cx="500" cy="180" r="32" stroke-width="5" stroke="#85a2b6"
            stroke-dasharray="50.26548245743669 50.26548245743669" fill="none" stroke-linecap="round">
        <animateTransform attributeName="transform" type="rotate" dur="3s" repeatCount="indefinite" keyTimes="0;1"
                          values="0 500 180;360 500 180"></animateTransform>
    </circle>
    <circle cx="500" cy="180" r="23" stroke-width="5" stroke="#bbcedd"
            stroke-dasharray="36.12831551628262 36.12831551628262" stroke-dashoffset="36.12831551628262" fill="none"
            stroke-linecap="round">
        <animateTransform attributeName="transform" type="rotate" dur="6s" repeatCount="indefinite" keyTimes="0;1"
                          values="0 500 180;-360 500 180"></animateTransform>
    </circle>
    <text x="500" y="245" text-anchor="middle" font-size="20" fill="#85a2b6">loading...</text>
</svg>