SVGでローディングアニメーション
SVGはCSSアニメーションとほぼ同じようにしてアニメーションを設定できます。 以下の例は丸の大きさが徐々に変わっていくローディングアニメーションです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>SVG</title> <style> svg { background-color: #f00; } #svg01 .loading01{ animation: 1s infinite load01; } @keyframes load01 { 0%, 100%{ /* 1秒のとき */ r: 3; } 50%{ /* 0.5秒のとき */ r: 10; } } #svg01 .loading02{ animation: 1s infinite .2s load02; } @keyframes load02 { 0%, 100%{ r: 3; } 50%{ r: 10; } } #svg01 .loading03{ animation: 1s infinite .4s load03; } @keyframes load03 { 0%, 100%{ r: 3; } 50%{ r: 10; } } </style> </head> <body> <svg id="svg01" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 300 300" version="1.1"> <circle cx="110" cy="150" r="10" class="loading01" fill="rgba(255,255,255,1)" /> <circle cx="140" cy="150" r="10" class="loading02" fill="rgba(255,255,255,1)" /> <circle cx="170" cy="150" r="10" class="loading03" fill="rgba(255,255,255,1)" /> </svg> </body> </html> |
CSSのinfiniteは無限ループです。デュレーションの値(infiniteの後)を書くことで3つのアニメーションを少しずつずらしています。 SVGは特別にローディングアニメーシ […]
Read More