web-html5-scripts/loading-icons/loading-animation/index.html

34 lines
3.2 KiB
HTML
Raw Permalink Normal View History

2020-01-20 21:00:54 +01:00
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Loading animation</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<button></button>
<svg xmlns="http://www.w3.org/2000/svg" id="svg8" version="1.1" viewBox="0 0 40 14">
<rect id="load" stroke-width="0" x="0" y="0" height="9" width="40"/>
<path id="mask" d="M0 0v14h40V0zm9 2.64c.44 0 .84.08 1.2.22.36.15.64.37.86.66.22.3.35.61.39.96.04.34.06.94.06 1.8v1.44c0 .84-.02 1.43-.06 1.78a1.99 1.99 0 01-1.21 1.62c-.36.16-.78.24-1.25.24a3.2 3.2 0 01-1.2-.22 2 2 0 01-1.25-1.62c-.04-.34-.06-.94-.06-1.8V6.28c0-.84.02-1.43.05-1.78a2.02 2.02 0 011.22-1.63c.36-.15.77-.23 1.24-.23zm25.73 0c.63 0 1.16.13 1.58.4.42.26.7.57.83.93.12.36.19.88.19 1.57v.36h-2.18v-.76c0-.48-.02-.78-.06-.9-.04-.12-.14-.18-.3-.18-.13 0-.22.05-.27.15-.05.1-.07.37-.07.8v4.01c0 .38.02.63.07.75.05.11.15.17.29.17.16 0 .27-.06.32-.2.06-.13.09-.4.09-.78v-1h-.44V6.7h2.55v4.5h-1.37l-.2-.6c-.15.25-.34.45-.57.58-.22.13-.49.19-.8.19a2.1 2.1 0 01-1.74-.93 2.09 2.09 0 01-.32-.82 9.97 9.97 0 01-.06-1.3V5.84c0-.8.05-1.38.13-1.74.09-.36.33-.7.74-1 .41-.3.94-.45 1.59-.45zm-32.06.18h2.18V9.5h1.32v1.67h-3.5zm10.27 0h3.14l1.25 8.36H15.1l-.1-1.5h-.79l-.13 1.5h-2.25zm4.76 0h1.63c1.05 0 1.76.05 2.13.14a1.5 1.5 0 011.2 1.21c.05.27.08.8.08 1.6V8.7c0 .75-.04 1.25-.11 1.5-.07.26-.2.46-.37.6-.17.14-.39.24-.65.3s-.65.08-1.17.08H17.7zm5.85 0h2.18v8.36h-2.18zm3.06 0h1.82l1.22 3.76V2.82h1.82v8.36h-1.91l-1.13-3.8v3.8H26.6zM9 4.06a.3.3 0 00-.27.13c-.06.09-.09.35-.09.78v3.9c0 .49.02.79.06.9.04.12.13.17.28.17.15 0 .24-.06.28-.2.04-.12.06-.44.06-.93V4.97c0-.4-.02-.64-.06-.75-.04-.1-.13-.16-.27-.16zm10.87.19v5.5c.3 0 .5-.06.57-.18.08-.13.11-.47.11-1.03V5.29c0-.38 0-.62-.03-.73a.34.34 0 00-.17-.23 1.04 1.04 0 00-.48-.08zm-5.28.44c-.22 1.6-.36 2.77-.41 3.5h.74a98.4 98.4 0 01-.33-3.5z" />
<g id="outline" >
<path d="M4.85 2.82V9.5h1.32v1.67h-3.5V2.82z"/>
<path d="M11.51 7.72q0 1.26-.06 1.78-.06.53-.37.96-.31.43-.85.67-.53.23-1.24.23-.67 0-1.2-.22-.54-.22-.86-.66-.33-.44-.4-.96-.05-.51-.05-1.8V6.28q0-1.26.05-1.78.07-.53.38-.96.31-.43.84-.67.53-.23 1.24-.23.67 0 1.2.22.54.22.87.66.33.44.39.96.06.51.06 1.8zM9.33 4.97q0-.59-.06-.75-.07-.16-.27-.16-.17 0-.26.13t-.09.78v3.9q0 .73.06.9.06.17.28.17.22 0 .28-.2.06-.19.06-.93z"/>
<path d="M16.08 2.82l1.25 8.36H15.1l-.1-1.5h-.79l-.13 1.5h-2.25l1.1-8.36zM14.93 8.2q-.16-1.42-.33-3.51-.33 2.4-.41 3.5z"/>
<path d="M17.7 2.82h1.63q1.57 0 2.13.14.56.15.84.48.3.33.37.74.07.4.07 1.59V8.7q0 1.12-.11 1.5-.1.38-.37.6-.26.21-.65.3-.39.08-1.17.08H17.7zm2.18 1.43v5.5q.47 0 .57-.18.11-.2.11-1.03V5.29q0-.57-.03-.73-.04-.16-.17-.23-.13-.08-.48-.08z"/>
<path d="M25.73 2.82v8.36h-2.18V2.82z"/>
<path d="M31.47 2.82v8.36h-1.91l-1.13-3.8v3.8H26.6V2.82h1.82l1.22 3.76V2.82z"/>
<path d="M37.33 5.9h-2.18v-.76q0-.72-.06-.9-.06-.18-.3-.18-.2 0-.27.15-.07.16-.07.8v4.01q0 .57.07.75.07.17.29.17.24 0 .32-.2.09-.2.09-.78v-1h-.44V6.7h2.55v4.5h-1.37l-.2-.6q-.23.38-.57.58-.33.19-.8.19-.54 0-1.02-.26-.48-.27-.72-.67-.25-.39-.31-.82-.07-.43-.07-1.3V5.84q0-1.2.13-1.74t.74-1q.62-.45 1.59-.45.95 0 1.58.4.63.39.83.93.19.54.19 1.56z"/>
</g>
</svg>
<script src="./script.js"></script>
</body>
</html>