SOURCE

<svg class="di" width="800" height="800"  >
<circle r=280 cx="400" cy="300" fill="#333333"/>    
<circle r=250 cx="400" cy="300" fill="#fff" stroke="black" stroke-width="15"/>
<circle r=10 cx="400" cy="300"fill="#fff" stroke="black" stroke-width="2"/>
<rect width="10" height="130" x="395" y="290" rx="13" ry="13"/>
<rect width="190" height="10" x="385" y="290" rx="13" ry="13"/>
<rect width="5" height="180" x="395" y="120" rx="13" ry="13" fill="red" transform-origin="400 300" class="miao" />
<text fill="black" stroke="black" stroke-width="2" font-size="35" x="380" y="110">12</text>
<text fill="black" stroke="black" stroke-width="2" font-size="35" x="480" y="150">1</text>
<text fill="black" stroke="black" stroke-width="2" font-size="35" x="540" y="220">2</text>
<text fill="black" stroke="black" stroke-width="2" font-size="35" x="580" y="300">3</text>
<text fill="black" stroke="black" stroke-width="2" font-size="35" x="570" y="390">4</text>
<text fill="black" stroke="black" stroke-width="2" font-size="35" x="550" y="450">5</text>














</svg>

.di{
    background-color: #999999
}
@keyframes zhuan{
    from{transform: rotate(0deg) 
    }
    to{transform: rotate(360deg)
    }
}
.miao{
    animation: zhuan 60s infinite linear
}