[SVG] loadingアニメーション #Indicator
こんにちわ。
転職するのが当たり前の世の中になっていますが、終身雇用がどーたらだとか、出世がどーたらというのは、一昔前の思考になっているようです。
出世して金儲けをするよりも、自分でビジネスを立ち上げたほうがよほどしがらみもなく、ストレスも少ない上、リスクは大きいが、実入りもそれ以上に大きいというのが今どきの思考なのですね。
自分で会社を立ち上げてそれまでのサラリーマン生活と全く違う感覚を得ることができ、人は仕事によって人生観がこれほどまでに変わるのかということを体験できた下駄です。
一概にどれがいいと言い切れるものではないですが、人生に憤りを感じている人は是非今の自分の環境をガラッと変えて見ることをおすすめします。
そんな人生のIndicatorがあるといいなあと思いつつ、今回のloadingアニメーションは、パズルを解きすすめる様なおもしろいアニメーションです。
Odd-Indicator
|
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 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 |
<svg class="oddIndicator" width="64px" height="64px" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> <style> svg.oddIndicator g{ transform-origin:30px 30px; transform:rotate(45deg) scale(0.7); } svg.oddIndicator g rect{ fill:orange; rx : 2px; ry : 2px; width:18px; height:18px; animation: anim-oddIndicator 10.5s linear infinite both; } svg.oddIndicator rect.cube-2{ animation-delay: -9.0s; } svg.oddIndicator rect.cube-3{ animation-delay: -7.5s; } svg.oddIndicator rect.cube-4{ animation-delay: -6.0s; } svg.oddIndicator rect.cube-5{ animation-delay: -4.5s; } svg.oddIndicator rect.cube-6{ animation-delay: -3.0s; } svg.oddIndicator rect.cube-7{ animation-delay: -1.5s; } svg.oddIndicator rect.cube-8{ animation-delay: -0s; } @keyframes anim-oddIndicator{ 0% { x : 0; y : 0; fill : #80FFC6; } 10.5% { x : 0; y : 0; } 12.5% { x : 20px; y : 0; fill : #74E893; } 23% { x : 20px; y : 0; } 25% { x : 40px; y : 0; fill : #8EFF8C; } 35.5% { x : 40px; y : 0; } 37.5% { x : 40px; y : 20px; fill : #9EE874; } 48% { x : 40px; y : 20px; } 50% { x : 20px; y : 20px; fill : #80FFC6; } 60.5% { x : 20px; y : 20px; } 62.5% { x : 20px; y : 40px; fill : #74E893; } 73% { x : 20px; y : 40px; } 75% { x : 0; y : 40px; fill : #8EFF8C; } 85.5% { x : 0; y : 40px; } 87.5% { x : 0; y : 20px; fill : #9EE874; } 98% { x : 0; y : 20px; } 100% { x : 0; y : 0; fill : #80FFC6; } } </style> <g> <!-- <rect class="cube-1" x=" 0" y=" 0"></rect> --> <rect class="cube-2" x="20" y=" 0"></rect> <rect class="cube-3" x="40" y=" 0"></rect> <rect class="cube-4" x=" 0" y="20"></rect> <rect class="cube-5" x="20" y="20"></rect> <rect class="cube-6" x="40" y="20"></rect> <rect class="cube-7" x=" 0" y="40"></rect> <rect class="cube-8" x="20" y="40"></rect> </g> </svg> |
See the Pen
svg-loading oddIndicator by YugetaKoji (@geta1972)
on CodePen.
解説
全部で８つのcudeを用意しているのですが、全て同じアニメーションで動作しているのがポイントです。
タイミングをずらすだけで、それぞれが独立して突き進んでいるように見えるのが、見ていて飽きない感じを覚えませんか？
微妙に設定している色味の変更も大幅に返るとまた違った効果に感じるので、お好みの色に変更してお使いください。