misc/babystats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Convert the spinner to CSS animation from SMIL, and shrink it while doing so.

Browse Source
This commit is contained in:
Ian Gulliver
2016-01-07 18:19:45 -08:00
parent 7035605669
commit 65cb36d3e8
2 changed files with 46 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
static/babystats.html
View File

@@ -11,7 +11,7 @@
<link rel="stylesheet" href="/static/babystats.css">
</head>
<body>
<div id="container" style="background-size: contain; background-position: center; background-repeat: no-repeat; background-image: url(&quot;data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E %3Cg transform='rotate(0 50 50)'%3E %3Ccircle r='5' cx='30' cy='50'%3E %3CanimateTransform attributeName='transform' type='translate' begin='0s' repeatCount='indefinite' dur='1s' values='0 0;13.819660112501051 -19.02113032590307' keyTimes='0;1'/%3E %3Canimate attributeName='fill' dur='1s' begin='0s' repeatCount='indefinite' keyTimes='0;1' values='%23430a39;%23bc1550'/%3E %3C/circle%3E %3C/g%3E%3Cg transform='rotate(72 50 50)'%3E %3Ccircle r='5' cx='30' cy='50'%3E %3CanimateTransform attributeName='transform' type='translate' begin='0s' repeatCount='indefinite' dur='1s' values='0 0;13.819660112501051 -19.02113032590307' keyTimes='0;1'/%3E %3Canimate attributeName='fill' dur='1s' begin='0s' repeatCount='indefinite' keyTimes='0;1' values='%23bc1550;%23e87f02'/%3E %3C/circle%3E %3C/g%3E%3Cg transform='rotate(144 50 50)'%3E %3Ccircle r='5' cx='30' cy='50'%3E %3CanimateTransform attributeName='transform' type='translate' begin='0s' repeatCount='indefinite' dur='1s' values='0 0;13.819660112501051 -19.02113032590307' keyTimes='0;1'/%3E %3Canimate attributeName='fill' dur='1s' begin='0s' repeatCount='indefinite' keyTimes='0;1' values='%23e87f02;%23f5c700'/%3E %3C/circle%3E %3C/g%3E%3Cg transform='rotate(216 50 50)'%3E %3Ccircle r='5' cx='30' cy='50'%3E %3CanimateTransform attributeName='transform' type='translate' begin='0s' repeatCount='indefinite' dur='1s' values='0 0;13.819660112501051 -19.02113032590307' keyTimes='0;1'/%3E %3Canimate attributeName='fill' dur='1s' begin='0s' repeatCount='indefinite' keyTimes='0;1' values='%23f5c700;%2388990f'/%3E %3C/circle%3E %3C/g%3E%3Cg transform='rotate(288 50 50)'%3E %3Ccircle r='5' cx='30' cy='50'%3E %3CanimateTransform attributeName='transform' type='translate' begin='0s' repeatCount='indefinite' dur='1s' values='0 0;13.819660112501051 -19.02113032590307' keyTimes='0;1'/%3E %3Canimate attributeName='fill' dur='1s' begin='0s' repeatCount='indefinite' keyTimes='0;1' values='%2388990f;%23430a39'/%3E %3C/circle%3E %3C/g%3E%3C/svg%3E&quot;);"></div>
<div id="container" style="background-size: contain; background-position: center; background-repeat: no-repeat; background-image: url(&quot;data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E %3Cstyle type='text/css' %3E %3C![CDATA[ @keyframes coloredBounce { 0% { fill: %23430a39; transform: translate(0, -20px); } 20% { fill: %23bc1550; transform: translate(19px, -6px); } 40% { fill: %23e87f02; transform: translate(12px, 16px); } 60% { fill: %23f5c700; transform: translate(-12px, 16px); } 80% { fill: %2388990f; transform: translate(-19px, -6px); } 100% { fill: %23430a39; transform: translate(0, -20px); } } circle { animation: coloredBounce 5s linear infinite; } ]]%3E %3C/style%3E %3Ccircle r='5' cx='50' cy='50'%3E%3C/circle%3E %3Ccircle r='5' cx='50' cy='50' style='animation-delay: -1s'%3E%3C/circle%3E %3Ccircle r='5' cx='50' cy='50' style='animation-delay: -2s'%3E%3C/circle%3E %3Ccircle r='5' cx='50' cy='50' style='animation-delay: -3s'%3E%3C/circle%3E %3Ccircle r='5' cx='50' cy='50' style='animation-delay: -4s'%3E%3C/circle%3E %3C/svg%3E&quot;);"></div>
<script>
new BabyStats(document.getElementById('container'));
</script>