円形プログレスのアップロードアイコン

<div class="d04-04-02-wrap">
          <svg class="d04-04-02-svg" viewBox="0 0 64 64" width="64" height="64">
            <circle class="d04-04-02-bg" cx="32" cy="32" r="27"></circle>
            <circle class="d04-04-02-bar" cx="32" cy="32" r="27"></circle>
          </svg>
          <svg class="d04-04-02-file" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#7c3aed" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
            <polyline points="14 2 14 8 20 8"></polyline>
          </svg>
          <svg class="d04-04-02-check" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="#16a34a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="4 12 10 18 20 6"></polyline>
          </svg>
        </div>

.d04-04-02 .d04-04-02-wrap{position:relative;width:64px;height:64px;display:flex;align-items:center;justify-content:center}
        .d04-04-02 .d04-04-02-bg{fill:none;stroke:#e5e7eb;stroke-width:4}
        .d04-04-02 .d04-04-02-bar{fill:none;stroke:#8b5cf6;stroke-width:4;stroke-linecap:round;stroke-dasharray:169.6;stroke-dashoffset:169.6;transform:rotate(-90deg);transform-origin:32px 32px;animation:d542fill 3.6s ease-in-out infinite}
        .d04-04-02 .d04-04-02-file,.d04-04-02 .d04-04-02-check{position:absolute}
        .d04-04-02 .d04-04-02-file{animation:d542filefade 3.6s ease-in-out infinite}
        .d04-04-02 .d04-04-02-check{opacity:0;animation:d542checkfade 3.6s ease-in-out infinite}
        @keyframes d542fill{0%{stroke-dashoffset:169.6}65%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
        @keyframes d542filefade{0%{opacity:1}60%{opacity:1}70%{opacity:0}95%{opacity:0}100%{opacity:1}}
        @keyframes d542checkfade{0%{opacity:0}65%{opacity:0}75%{opacity:1}92%{opacity:1}100%{opacity:0}}