不需要图片，css+svg绘制动态loading加载图标

<div id="refershDiv" class="refershDiv">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <rect transform="rotate(0 50 50) translate(0 -25)">
                        <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0s" repeatCount="indefinite"></animate>
                    </rect>
                    <rect transform="rotate(30 50 50) translate(0 -25)">
                        <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.083s" repeatCount="indefinite"></animate>
                    </rect>
                    <rect transform="rotate(60 50 50) translate(0 -25)">
                        <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.166s" repeatCount="indefinite"></animate>
                    </rect>
                    <rect transform="rotate(90 50 50) translate(0 -25)">
                        <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.25s" repeatCount="indefinite"></animate>
                    </rect>
                    <rect transform="rotate(120 50 50) translate(0 -25)">
                        <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.333s" repeatCount="indefinite"></animate>
                    </rect>
                    <rect transform="rotate(150 50 50) translate(0 -25)">
                        <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.416s" repeatCount="indefinite"></animate>
                    </rect>
                    <rect transform="rotate(180 50 50) translate(0 -25)">
                        <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.5s" repeatCount="indefinite"></animate>
                    </rect>
                    <rect transform="rotate(210 50 50) translate(0 -25)">
                        <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.583s" repeatCount="indefinite"></animate>
                    </rect>
                    <rect transform="rotate(240 50 50) translate(0 -25)">
                        <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.666s" repeatCount="indefinite"></animate>
                    </rect>
                    <rect transform="rotate(270 50 50) translate(0 -25)">
                        <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.75s" repeatCount="indefinite"></animate>
                    </rect>
                    <rect transform="rotate(300 50 50) translate(0 -25)">
                        <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.833s" repeatCount="indefinite"></animate>
                    </rect>
                    <rect transform="rotate(330 50 50) translate(0 -25)">
                        <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.916s" repeatCount="indefinite"></animate>
                    </rect>
    </svg>
</div>

2、css部分：

#refershDiv{text-align: center;position: absolute;width: 100%;left:0;top: 45%;}
        .refershDiv svg {
            fill: #a0a0a0;
            width: 80px;
            height: 80px;
        }
        .refershDiv svg rect {
            x: 47.5;
            y: 41;
            rx: 3;
            ry: 3;
            width: 5px;
            height: 18px;
        }

标签：loading,svg,height,width,80px,refershDiv,css
来源： https://www.cnblogs.com/zyfenblog/p/11465956.html