CSS svg loader is a feature in web development that helps to reduce the time it takes to load a website's styling and formatting. CSS Loader can be used to improve website performance and user experience by ensuring that all styling and formatting is loaded before the user interacts with the website.
<div class="loaders-container-03">
<div class="svg-loader loader-1">
<svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
<path fill="#fff"
d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50"
to="360 50 50" repeatCount="indefinite" />
</path>
</svg>
</div>
<div class="svg-loader loader-2">
<svg version="1.1" id="L5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
<circle fill="#fff" stroke="none" cx="6" cy="50" r="6">
<animateTransform attributeName="transform" dur="1s" type="translate" values="0 15 ; 0 -15; 0 15"
repeatCount="indefinite" begin="0.1" />
</circle>
<circle fill="#fff" stroke="none" cx="30" cy="50" r="6">
<animateTransform attributeName="transform" dur="1s" type="translate" values="0 10 ; 0 -10; 0 10"
repeatCount="indefinite" begin="0.2" />
</circle>
<circle fill="#fff" stroke="none" cx="54" cy="50" r="6">
<animateTransform attributeName="transform" dur="1s" type="translate" values="0 5 ; 0 -5; 0 5"
repeatCount="indefinite" begin="0.3" />
</circle>
</svg>
</div>
<div class="svg-loader loader-3">
<svg version="1.1" id="L4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
<circle fill="#fff" stroke="none" cx="6" cy="50" r="6">
<animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.1" />
</circle>
<circle fill="#fff" stroke="none" cx="26" cy="50" r="6">
<animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.2" />
</circle>
<circle fill="#fff" stroke="none" cx="46" cy="50" r="6">
<animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.3" />
</circle>
</svg>
</div>
<div class="svg-loader loader-4">
<svg version="1.1" id="L3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
<circle fill="none" stroke="#fff" stroke-width="4" cx="50" cy="50" r="44" style="opacity:0.5;" />
<circle fill="#fff" stroke="#fff" stroke-width="3" cx="8" cy="54" r="6">
<animateTransform attributeName="transform" dur="2s" type="rotate" from="0 50 48" to="360 50 52"
repeatCount="indefinite" />
</circle>
</svg>
</div>
<div class="svg-loader loader-5">
<svg version="1.1" id="L2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<circle fill="none" stroke="#fff" stroke-width="4" stroke-miterlimit="10" cx="50" cy="50" r="48" />
<line fill="none" stroke-linecap="round" stroke="#fff" stroke-width="4" stroke-miterlimit="10" x1="50" y1="50"
x2="85" y2="50.5">
<animateTransform attributeName="transform" dur="2s" type="rotate" from="0 50 50" to="360 50 50"
repeatCount="indefinite" />
</line>
<line fill="none" stroke-linecap="round" stroke="#fff" stroke-width="4" stroke-miterlimit="10" x1="50" y1="50"
x2="49.5" y2="74">
<animateTransform attributeName="transform" dur="15s" type="rotate" from="0 50 50" to="360 50 50"
repeatCount="indefinite" />
</line>
</svg>
</div>
<div class="svg-loader loader-6">
<svg version="1.1" id="L7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<path fill="#fff" d="M31.6,3.5C5.9,13.6-6.6,42.7,3.5,68.4c10.1,25.7,39.2,38.3,64.9,28.1l-3.1-7.9c-21.3,8.4-45.4-2-53.8-23.3
c-8.4-21.3,2-45.4,23.3-53.8L31.6,3.5z">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="2s" from="0 50 50"
to="360 50 50" repeatCount="indefinite" />
</path>
<path fill="#fff" d="M42.3,39.6c5.7-4.3,13.9-3.1,18.1,2.7c4.3,5.7,3.1,13.9-2.7,18.1l4.1,5.5c8.8-6.5,10.6-19,4.1-27.7
c-6.5-8.8-19-10.6-27.7-4.1L42.3,39.6z">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50"
to="-360 50 50" repeatCount="indefinite" />
</path>
<path fill="#fff" d="M82,35.7C74.1,18,53.4,10.1,35.7,18S10.1,46.6,18,64.3l7.6-3.4c-6-13.5,0-29.3,13.5-35.3s29.3,0,35.3,13.5
L82,35.7z">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="2s" from="0 50 50"
to="360 50 50" repeatCount="indefinite" />
</path>
</svg>
</div>
<div class="svg-loader loader-7">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<rect fill="#fff" width="3" height="100" transform="translate(0) rotate(180 3 50)">
<animate attributeName="height" attributeType="XML" dur="1s" values="30; 100; 30" repeatCount="indefinite" />
</rect>
<rect x="17" fill="#fff" width="3" height="100" transform="translate(0) rotate(180 20 50)">
<animate attributeName="height" attributeType="XML" dur="1s" values="30; 100; 30" repeatCount="indefinite"
begin="0.1s" />
</rect>
<rect x="40" fill="#fff" width="3" height="100" transform="translate(0) rotate(180 40 50)">
<animate attributeName="height" attributeType="XML" dur="1s" values="30; 100; 30" repeatCount="indefinite"
begin="0.3s" />
</rect>
<rect x="60" fill="#fff" width="3" height="100" transform="translate(0) rotate(180 58 50)">
<animate attributeName="height" attributeType="XML" dur="1s" values="30; 100; 30" repeatCount="indefinite"
begin="0.5s" />
</rect>
<rect x="80" fill="#fff" width="3" height="100" transform="translate(0) rotate(180 76 50)">
<animate attributeName="height" attributeType="XML" dur="1s" values="30; 100; 30" repeatCount="indefinite"
begin="0.1s" />
</rect>
</svg>
</div>
</div>.svg-loader svg {
width: 100px;
height: 100px;
display: inline-block;
}.svg-loader {
svg {
width: 100px;
height: 100px;
display: inline-block;
}
}