<svg width="200px" height="200px" class="loader" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M700,700.5 L700,300 L300,300 L300,700.5 L700,700.5"
    stroke="#A94005"
    stroke-width="40"
    stroke-linecap="square"
    fill="none"
    stroke-dasharray="1600"
    stroke-dashoffset="1600"
  >
    <animate
       fill="freeze"
       dur="4s"
       repeatCount="indefinite"          attributeName="stroke-dashoffset"
       values="1600; 1200; 1200; 800; 800; 400; 400; 0; 0; 0"
       keyTimes="0; 0.115; 0.125; 0.24; 0.25; 0.365; 0.375; 0.49; 0.5; 1"
    ></animate>
  </path>
  
  <circle fill="#F9C141" cx="0" cy="0" r="50">
    <animateMotion
       path="M700,700.5 L700,300 L300,300 L300,700.5 L700,700.5 C926.01092,451.207538 961.074865,338.373425 805.191837,361.99766 C675.217992,381.695332 220.510369,567.838892 124.783651,640.760981 C-62.8581216,783.701533 61.7032261,922.899504 451.788931,852.02978 C553.891878,833.479991 694.785354,782.970064 874.469359,700.5"
       dur="4s"
       calcMode="linear"
       repeatCount="indefinite"
       keyPoints="0; 0.103; 0.103; 0.206; 0.206; 0.309; 0.309; 0.412; 0.412; 1; 1"
                   keyTimes="0; 0.115; 0.125; 0.24; 0.25; 0.365; 0.375; 0.49; 0.6; 0.7; 1"
    ></animateMotion>
  </circle>
</svg>