Untitled
unknown
css
a year ago
16 kB
3
Indexable
Never
<!-- Loading 1 -->
<svg width="38" height="38" viewBox="0 0 38 38" stroke="#fff">
<g fill="none" fill-rule="evenodd">
<g transform="translate(1 1)" stroke-width="2">
<circle stroke-opacity="0.5" cx="18" cy="18" r="18" />
<path d="M36 18c0-9.94-8.06-18-18-18">
<animateTransform attributeName="transform" type="rotate" values="0 18 18;360 18 18" dur="1s"
repeatCount="indefinite" />
</path>
</g>
</g>
</svg>
<!-- Loading 2 -->
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<path opacity="0.2" fill="#000"
d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z" />
<path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
C22.32,8.481,24.301,9.057,26.013,10.047z">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" values="0 20 20;360 20 20"
dur="0.5s" repeatCount="indefinite" />
</path>
</svg>
<!-- Loading 3 -->
<svg viewBox="0 0 36 36" height="200" width="200" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Group-3" sketch:type="MSLayerGroup" fill="#4990E2">
<rect id="Rectangle-1" sketch:type="MSShapeGroup" x="16.5873418" y="0" width="3" height="9.13705584"></rect>
<rect id="Rectangle-2" fill-opacity="0.58" sketch:type="MSShapeGroup" x="16.678481" y="26.8629442" width="3"
height="9.13705584"></rect>
<rect id="Rectangle-4" fill-opacity="0.79" sketch:type="MSShapeGroup"
transform="translate(31.530380, 17.954315) rotate(-270.000000) translate(-31.530380, -17.954315) "
x="30.0303797" y="13.3857868" width="3" height="9.13705584"></rect>
<rect id="Rectangle-3" fill-opacity="0.37" sketch:type="MSShapeGroup"
transform="translate(4.735443, 18.045685) rotate(-270.000000) translate(-4.735443, -18.045685) "
x="3.23544304" y="13.4771574" width="3" height="9.13705584"></rect>
<rect id="Rectangle-4" fill-opacity="0.72" sketch:type="MSShapeGroup"
transform="translate(29.758244, 24.676171) rotate(-240.000000) translate(-29.758244, -24.676171) "
x="28.2582441" y="20.1076435" width="3" height="9.13705584"></rect>
<rect id="Rectangle-3" fill-opacity="0.3" sketch:type="MSShapeGroup"
transform="translate(6.507579, 11.323829) rotate(-240.000000) translate(-6.507579, -11.323829) "
x="5.00757864" y="6.75530065" width="3" height="9.13705584"></rect>
<rect id="Rectangle-4" fill-opacity="0.65" sketch:type="MSShapeGroup"
transform="translate(24.871110, 29.609153) rotate(-210.000000) translate(-24.871110, -29.609153) "
x="23.37111" y="25.0406255" width="3" height="9.13705584"></rect>
<rect id="Rectangle-3" fill-opacity="0.23" sketch:type="MSShapeGroup"
transform="translate(11.394713, 6.390847) rotate(-210.000000) translate(-11.394713, -6.390847) "
x="9.89471277" y="1.82231869" width="3" height="9.13705584"></rect>
<rect id="Rectangle-4" fill-opacity="0.51" sketch:type="MSShapeGroup"
transform="translate(11.473642, 29.654839) rotate(-150.000000) translate(-11.473642, -29.654839) "
x="9.97364166" y="25.0863108" width="3" height="9.13705584"></rect>
<rect id="Rectangle-3" fill-opacity="0.93" sketch:type="MSShapeGroup"
transform="translate(24.792181, 6.345161) rotate(-150.000000) translate(-24.792181, -6.345161) "
x="23.2921811" y="1.77663341" width="3" height="9.13705584"></rect>
<rect id="Rectangle-4" fill-opacity="0.44" sketch:type="MSShapeGroup"
transform="translate(6.553148, 24.755301) rotate(-120.000000) translate(-6.553148, -24.755301) "
x="5.05314826" y="20.1867727" width="3" height="9.13705584"></rect>
<rect id="Rectangle-3" fill-opacity="0.86" sketch:type="MSShapeGroup"
transform="translate(29.712675, 11.244699) rotate(-120.000000) translate(-29.712675, -11.244699) "
x="28.2126745" y="6.67617143" width="3" height="9.13705584"></rect>
</g>
<animateTransform attributeName="transform" type="rotate" values="0 18 18;360 18 18" begin="0s" dur="0.85s"
repeatCount="indefinite" />
</g>
</svg>
<!-- Planet -->
<svg viewBox="0 0 160 160" width="300" height="300">
<defs>
<clipPath id="svgPath">
<path
d="M122.4,55.5C108.9,32.1,78.9,24,55.5,37.6S24,81.1,37.6,104.5L122.4,55.5L160,0v160H0V0h160L122.4,55.5z">
</path>
</clipPath>
<linearGradient id="dope" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="blue"></stop>
<stop offset="100%" stop-color="pink"></stop>
</linearGradient>
</defs>
<circle cx="80" cy="80" r="49" fill="url(#dope)">
<animateTransform attributeName="transform" type="rotate" values="360 80 80;0 80 80" dur="10s"
repeatCount="indefinite"></animateTransform>
</circle>
<g id="fuckthisshit">
<g id="inner" transform=" matrix(0.866, -0.5, 0.25, 0.433, 80, 80)">
<path id="" d="M 0,70 A 65,70 0 0,0 65,0 5,5 0 0,1 75,0 75,70 0 0,1 0,70Z" fill="#FFF">
<animateTransform attributeName="transform" type="rotate" values="360 0 0;0 0 0" dur="4s"
repeatCount="indefinite"></animateTransform>
</path>
</g>
</g>
</svg>
<!-- Heart -->
<svg viewBox="0 0 200 200">
<g transform="translate(100 100)">
<path transform="translate(-50 -50)" fill="#03FF13"
d="M92.71,7.27L92.71,7.27c-9.71-9.69-25.46-9.69-35.18,0L50,14.79l-7.54-7.52C32.75-2.42,17-2.42,7.29,7.27v0 c-9.71,9.69-9.71,25.41,0,35.1L50,85l42.71-42.63C102.43,32.68,102.43,16.96,92.71,7.27z">
</path>
<animateTransform attributeName="transform" type="scale" values="1; 1.5; 1.25; 1.5; 1.5; 1;" dur="1s"
repeatCount="indefinite" additive="sum">
</animateTransform>
</g>
</svg>
<!-- A lot of loading -->
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
<defs>
<radialGradient id="Gradient1" cx="50%" cy="50%" fx="0.441602%" fy="50%" r=".5">
<animate attributeName="fx" dur="34s" values="0%;3%;0%" repeatCount="indefinite"></animate>
<stop offset="0%" stop-color="rgba(255, 0, 255, 1)"></stop>
<stop offset="100%" stop-color="rgba(255, 0, 255, 0)"></stop>
</radialGradient>
<radialGradient id="Gradient2" cx="50%" cy="50%" fx="2.68147%" fy="50%" r=".5">
<animate attributeName="fx" dur="23.5s" values="0%;3%;0%" repeatCount="indefinite"></animate>
<stop offset="0%" stop-color="rgba(255, 255, 0, 1)"></stop>
<stop offset="100%" stop-color="rgba(255, 255, 0, 0)"></stop>
</radialGradient>
<radialGradient id="Gradient3" cx="50%" cy="50%" fx="0.836536%" fy="50%" r=".5">
<animate attributeName="fx" dur="21.5s" values="0%;3%;0%" repeatCount="indefinite"></animate>
<stop offset="0%" stop-color="rgba(0, 255, 255, 1)"></stop>
<stop offset="100%" stop-color="rgba(0, 255, 255, 0)"></stop>
</radialGradient>
<radialGradient id="Gradient4" cx="50%" cy="50%" fx="4.56417%" fy="50%" r=".5">
<animate attributeName="fx" dur="23s" values="0%;5%;0%" repeatCount="indefinite"></animate>
<stop offset="0%" stop-color="rgba(0, 255, 0, 1)"></stop>
<stop offset="100%" stop-color="rgba(0, 255, 0, 0)"></stop>
</radialGradient>
<radialGradient id="Gradient5" cx="50%" cy="50%" fx="2.65405%" fy="50%" r=".5">
<animate attributeName="fx" dur="24.5s" values="0%;5%;0%" repeatCount="indefinite"></animate>
<stop offset="0%" stop-color="rgba(0,0,255, 1)"></stop>
<stop offset="100%" stop-color="rgba(0,0,255, 0)"></stop>
</radialGradient>
<radialGradient id="Gradient6" cx="50%" cy="50%" fx="0.981338%" fy="50%" r=".5">
<animate attributeName="fx" dur="25.5s" values="0%;5%;0%" repeatCount="indefinite"></animate>
<stop offset="0%" stop-color="rgba(255,0,0, 1)"></stop>
<stop offset="100%" stop-color="rgba(255,0,0, 0)"></stop>
</radialGradient>
</defs>
<rect x="13.744%" y="1.18473%" width="100%" height="100%" fill="url(#Gradient1)" transform="rotate(334.41 50 50)">
<animate attributeName="x" dur="20s" values="25%;0%;25%" repeatCount="indefinite"></animate>
<animate attributeName="y" dur="21s" values="0%;25%;0%" repeatCount="indefinite"></animate>
<animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="7s"
repeatCount="indefinite"></animateTransform>
</rect>
<rect x="-2.17916%" y="35.4267%" width="100%" height="100%" fill="url(#Gradient2)"
transform="rotate(255.072 50 50)">
<animate attributeName="x" dur="23s" values="-25%;0%;-25%" repeatCount="indefinite"></animate>
<animate attributeName="y" dur="24s" values="0%;50%;0%" repeatCount="indefinite"></animate>
<animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="12s"
repeatCount="indefinite"></animateTransform>
</rect>
<rect x="9.00483%" y="14.5733%" width="100%" height="100%" fill="url(#Gradient3)" transform="rotate(139.903 50 50)">
<animate attributeName="x" dur="25s" values="0%;25%;0%" repeatCount="indefinite"></animate>
<animate attributeName="y" dur="12s" values="0%;25%;0%" repeatCount="indefinite"></animate>
<animateTransform attributeName="transform" type="rotate" values="360 50 50;0 50 50" dur="9s"
repeatCount="indefinite"></animateTransform>
</rect>
</svg>
<!-- Xyeta -->
<svg version="1.1" id="Layer_1" viewBox="50 45 100 100" enable-background="new 0 0 200 200"
xmlns="http://www.w3.org/2000/svg">
<g style="" transform="matrix(2.455843, 0, 0, 2.455843, -145.593094, -145.632889)">
<path fill="none" stroke="#E51CB5" stroke-width="3" stroke-miterlimit="10"
d="M138.768,100c0,21.411-17.356,38.768-38.768,38.768 c-21.411,0-38.768-17.356-38.768-38.768c0-21.411,17.357-38.768,38.768-38.768" />
<animateTransform attributeType="xml" attributeName="transform" type="rotate" values="0 100 100;360 100 100"
dur="8s" repeatCount="indefinite" />
</g>
<g style="" transform="matrix(2.455843, 0, 0, 2.455843, -145.593094, -145.632889)">
<path fill="none" stroke="#C813E2" stroke-width="3" stroke-miterlimit="10"
d="M132.605,100c0,18.008-14.598,32.605-32.605,32.605 c-18.007,0-32.605-14.598-32.605-32.605c0-18.007,14.598-32.605,32.605-32.605" />
<animateTransform attributeType="xml" attributeName="transform" type="rotate" values="0 100 100;360 100 100"
dur="4s" repeatCount="indefinite" />
</g>
<g style="" transform="matrix(2.455843, 0, 0, 2.455843, -145.593094, -145.632889)">
<path fill="none" stroke="#9E31F4" stroke-width="3" stroke-miterlimit="10"
d="M126.502,100c0,14.638-11.864,26.502-26.502,26.502 c-14.636,0-26.501-11.864-26.501-26.502c0-14.636,11.865-26.501,26.501-26.501" />
<animateTransform attributeType="xml" attributeName="transform" type="rotate" values="0 100 100;360 100 100"
dur="2s" repeatCount="indefinite" />
</g>
<g style="" transform="matrix(2.455843, 0, 0, 2.455843, -145.593094, -145.632889)">
<path fill="none" stroke="#7847FC" stroke-width="3" stroke-miterlimit="10"
d="M120.494,100c0,11.32-9.174,20.494-20.494,20.494 c-11.319,0-20.495-9.174-20.495-20.494c0-11.319,9.176-20.495,20.495-20.495" />
<animateTransform attributeType="xml" attributeName="transform" type="rotate" values="0 100 100;360 100 100"
dur="1s" repeatCount="indefinite" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="20.1 6.7 10 10">
<circle style="transform-origin:25px 12px;" cx="25" cy="12" r="2" fill="none" stroke="rgb(3, 255, 19)">
<animateTransform attributeName="transform" type="scale" values="0 0;2 2;0 0" dur="1s" repeatCount="indefinite">
</animateTransform>
</circle>
</svg>
<!-- Gear -->
<svg width="50" height="50" xmlns="http://w3.org/2000/svg" version="1.1" viewbox="0 0 500 500">
<g>
<g>
<path
d="M236.6,118.7c-56-41.6-135.1-30-176.7,26c-41.6,56-30,135.1,26,176.7s135.1,30,176.7-26 C304.2,239.4,292.6,160.3,236.6,118.7z M118,278.2c-32.1-23.9-38.8-69.3-14.9-101.5s69.3-38.8,101.5-14.9s38.8,69.3,14.9,101.5 C195.5,295.5,150.1,302.1,118,278.2z" />
<g>
<path
d="M195,174.7c-25-18.6-60.4-13.4-79.1,11.6c-18.6,25-13.4,60.4,11.6,79.1s60.4,13.4,79.1-11.6 C225.2,228.7,220,193.3,195,174.7z M135.8,254.3c-18.9-14.1-22.8-40.8-8.8-59.7s40.8-22.8,59.7-8.8c18.9,14.1,22.8,40.8,8.8,59.7 S154.7,268.4,135.8,254.3z" />
</g>
<circle cx="161.2" cy="220" id="XMLID_22_" r="27.5" />
<g>
<path
d="M241,150.7L207.8,126l28.5-33.6c2.9-3.4,7.8-4,11.2-1.4l15.5,11.5c3.4,2.5,4.2,7.5,1.8,11.2L241,150.7z"
id="XMLID_21_" />
<path
d="M266.7,227.4l-6-40.9l43.9-3.6c4.4-0.4,8.4,2.7,9,6.9l2.8,19.1c0.6,4.2-2.3,8.3-6.6,9.2L266.7,227.4z"
id="XMLID_20_" />
<path
d="M230.6,299.8l24.6-33.1l33.6,28.5c3.4,2.9,4,7.8,1.4,11.2l-11.5,15.5c-2.5,3.4-7.5,4.2-11.2,1.8 L230.6,299.8z"
id="XMLID_19_" />
<path
d="M153.9,325.5l40.9-6l3.6,43.9c0.4,4.4-2.7,8.4-6.9,9l-19.1,2.8c-4.2,0.6-8.3-2.3-9.2-6.6L153.9,325.5z"
id="XMLID_18_" />
<path
d="M81.5,289.4l33.1,24.6l-28.5,33.6c-2.9,3.4-7.8,4-11.2,1.4l-15.5-11.5c-3.4-2.5-4.2-7.5-1.8-11.2 L81.5,289.4z"
id="XMLID_17_" />
<path
d="M55.8,212.7l6,40.9l-43.9,3.6c-4.4,0.4-8.4-2.7-9-6.9l-2.8-19.1c-0.6-4.2,2.3-8.3,6.6-9.2L55.8,212.7z"
id="XMLID_16_" />
<path
d="M91.9,140.3l-24.6,33.1l-33.6-28.5c-3.4-2.9-4-7.8-1.4-11.2l11.5-15.5c2.5-3.4,7.5-4.2,11.2-1.8 L91.9,140.3z"
id="XMLID_15_" />
<path
d="M168.6,114.6l-40.9,6l-3.6-43.9c-0.4-4.4,2.7-8.4,6.9-9l19.1-2.8c4.2-0.6,8.3,2.3,9.2,6.6L168.6,114.6z"
id="XMLID_14_" />
</g>
<animateTransform attributeName="transform" attributeType="XML" type="rotate"
values="0 161.2 220;360 161.2 220" dur="3s" repeatCount="indefinite" />
</g>
</g>
</svg>