| 提交 | 用户 | age | ||
| 4811cc | 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?> |
| V | 2 | <svg viewBox="0 0 200 200" version="1.1" |
| 3 | xmlns="http://www.w3.org/2000/svg" | |
| 4 | xmlns:xlink="http://www.w3.org/1999/xlink"> | |
| 5 | <style type="text/css"> | |
| 6 | .left-linear { | |
| 7 | fill: url(#left-linear); | |
| 8 | } | |
| 9 | ||
| 10 | .right-linear { | |
| 11 | fill: url(#right-linear); | |
| 12 | } | |
| 13 | ||
| 14 | .top { | |
| 15 | fill: #64acff; | |
| 16 | } | |
| 17 | ||
| 18 | .bottom { | |
| 19 | fill: #9dbfe4; | |
| 20 | } | |
| 21 | @keyframes load { | |
| 22 | 0% { | |
| 23 | transform: rotate(-360deg); | |
| 24 | } | |
| 25 | ||
| 26 | 100% { | |
| 27 | transform: rotate(0); | |
| 28 | } | |
| 29 | } | |
| 30 | ||
| 31 | .load { | |
| 32 | animation: load 1.4s linear infinite; | |
| 33 | transform-origin: center center; | |
| 34 | } | |
| 35 | ||
| 36 | svg { | |
| 37 | display: block; | |
| 38 | } | |
| 39 | ||
| 40 | .tip { | |
| 41 | display: block; | |
| 42 | min-width: 100px; | |
| 43 | margin-top: 4px; | |
| 44 | font-size: 13px; | |
| 45 | color: #303133; | |
| 46 | text-align: left; | |
| 47 | } | |
| 48 | </style> | |
| 49 | <circle cx="97" cy="97" r="81" stroke-width="16" stroke="#327fd8" fill="none"></circle> | |
| 50 | <g class="load"> | |
| 51 | <!--右半圆环--> | |
| 52 | <linearGradient id="left-linear" gradientUnits="userSpaceOnUse" x1="50" y1="0" x2="100" y2="180"> | |
| 53 | <stop offset="0" style="stop-color: #64acff;" /> | |
| 54 | <stop offset="1" style="stop-color: #9DBFE4;" /> | |
| 55 | </linearGradient> | |
| 56 | <path class="left-linear" d="M20,100c0-44.1,35.9-80,80-80V0C44.8,0,0,44.8,0,100s44.8,100,100,100v-20C55.9,180,20,144.1,20,100z" /> | |
| 57 | <!--左半圆环--> | |
| 58 | <circle class="bottom" cx="100" cy="190" r="10" /> | |
| 59 | <linearGradient id="right-linear" gradientUnits="userSpaceOnUse" x1="100" y1="120" x2="100" y2="180"> | |
| 60 | <stop offset="0" style="stop-color: transparent;" /> | |
| 61 | <stop offset="1" style="stop-color: transparent;" /> | |
| 62 | </linearGradient> | |
| 63 | <path class="right-linear" d="M100,0v20c44.1,0,80,35.9,80,80c0,44.1-35.9,80-80,80v20c55.2,0,100-44.8,100-100S155.2,0,100,0z" /> | |
| 64 | <!--左半圆环--> | |
| 65 | <circle class="top" cx="100" cy="10" r="10" /> | |
| 66 | </g> | |
| 67 | </svg> | |
