image lazy load

This commit is contained in:
xiaomlove
2022-08-31 23:08:26 +08:00
parent 8d3d404141
commit 138ee2b86a
7 changed files with 100 additions and 7 deletions

View File

@@ -0,0 +1,41 @@
<svg class="lds-spinner" width="128px" height="128px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background: none;"><g transform="rotate(0 50 50)">
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#b8da0b">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(36 50 50)">
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#b8da0b">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(72 50 50)">
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#b8da0b">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.7s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(108 50 50)">
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#b8da0b">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(144 50 50)">
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#b8da0b">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(180 50 50)">
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#b8da0b">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(216 50 50)">
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#b8da0b">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(252 50 50)">
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#b8da0b">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.2s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(288 50 50)">
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#b8da0b">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.1s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(324 50 50)">
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#b8da0b">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
</rect>
</g></svg>

After

Width:  |  Height:  |  Size: 2.6 KiB