79 lines
2.0 KiB
XML
79 lines
2.0 KiB
XML
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
|
||
|
|
<!-- SYNTAXIS Loading Spinner -->
|
||
|
|
<style>
|
||
|
|
.spinner {
|
||
|
|
animation: spin 3s linear infinite;
|
||
|
|
transform-origin: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.orbit {
|
||
|
|
animation: orbit 2s ease-in-out infinite;
|
||
|
|
transform-origin: 100px 100px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fade {
|
||
|
|
animation: fade 2s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes spin {
|
||
|
|
from {
|
||
|
|
transform: rotate(0deg);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: rotate(360deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes orbit {
|
||
|
|
0%, 100% {
|
||
|
|
transform: rotate(0deg);
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
transform: rotate(180deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fade {
|
||
|
|
0%, 100% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
opacity: 0.3;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.orbit-1 { animation-delay: 0s; }
|
||
|
|
.orbit-2 { animation-delay: -0.5s; }
|
||
|
|
.orbit-3 { animation-delay: -1s; }
|
||
|
|
.orbit-4 { animation-delay: -1.5s; }
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<!-- Center triangle (static) -->
|
||
|
|
<path d="M 100 85 L 115 110 L 85 110 Z" fill="#D97706"/>
|
||
|
|
|
||
|
|
<!-- Orbiting diamonds -->
|
||
|
|
<g class="orbit orbit-1 fade" transform-origin="100 100">
|
||
|
|
<path d="M 100 30 L 110 40 L 100 50 L 90 40 Z" fill="#2C5F8E"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g class="orbit orbit-2 fade" transform-origin="100 100">
|
||
|
|
<path d="M 150 100 L 160 110 L 150 120 L 140 110 Z" fill="#2C5F8E"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g class="orbit orbit-3 fade" transform-origin="100 100">
|
||
|
|
<path d="M 100 150 L 110 160 L 100 170 L 90 160 Z" fill="#2C5F8E"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g class="orbit orbit-4 fade" transform-origin="100 100">
|
||
|
|
<path d="M 40 100 L 50 110 L 40 120 L 30 110 Z" fill="#2C5F8E"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Rotating squares -->
|
||
|
|
<g class="spinner">
|
||
|
|
<rect x="90" y="50" width="20" height="20" fill="#6B7280" opacity="0.6"/>
|
||
|
|
<rect x="130" y="90" width="20" height="20" fill="#6B7280" opacity="0.6"/>
|
||
|
|
<rect x="90" y="130" width="20" height="20" fill="#6B7280" opacity="0.6"/>
|
||
|
|
<rect x="50" y="90" width="20" height="20" fill="#6B7280" opacity="0.6"/>
|
||
|
|
</g>
|
||
|
|
</svg>
|