|
<svg width="100%" height="100%" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<style>
|
|
.rotate-45 {
|
|
transform-origin: 0px 0px;
|
|
transform: rotate(45deg);
|
|
stroke:#ff00ff;
|
|
}
|
|
|
|
.rotate {
|
|
transform-origin: 0px 0px;
|
|
animation: rotate 1s ease-in-out infinite;
|
|
}
|
|
|
|
.rotate-back {
|
|
transform-origin: 0px 0px;
|
|
animation: rotate 1s ease-in-out infinite;
|
|
animation-direction: alternate;
|
|
}
|
|
|
|
.left {
|
|
animation: move 1s ease-in-out infinite;
|
|
}
|
|
|
|
.right {
|
|
animation: move 1s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
100% {
|
|
transform: rotate(135deg);
|
|
}
|
|
}
|
|
|
|
@keyframes move {
|
|
50% {
|
|
transform: translate(-30px, -30px);
|
|
}
|
|
}
|
|
</style>
|
|
<g transform="translate(500,500)">
|
|
<rect class="rotate-45 rotate-back" x="-5" y="-5" width="10" height="10" stroke="#00a99d" stroke-width="20" fill="none"/>
|
|
<rect class="rotate-45 rotate" x="-50" y="-50" width="100" height="100" stroke="#00a99d" stroke-width="20" stroke-linejoin="bevel" fill="none"/>
|
|
<g transform="translate(-50,0) rotate(-45)"><polyline class="left" points="40,-40 50,-50 -40,-50 -50,-40 -50,50 -40,40" stroke="#00a99d" stroke-width="20" fill="none"/></g>
|
|
<g transform="translate(50,0) rotate(135)"><polyline class="right" points="40,-40 50,-50 -40,-50 -50,-40 -50,50 -40,40" stroke="#00a99d" stroke-width="20" fill="none"/></g>
|
|
<text y="-140" text-anchor="middle" font-weight="bold" font-size="3em" font-family="sans-serif">loading data...</text>
|
|
</g>
|
|
</svg>
|
