[SVG] loadingアニメーション #Indicator

2019年11月24日

テクノロジー プログラミング

転職するのが当たり前の世の中になっていますが、終身雇用がどーたらだとか、出世がどーたらというのは、一昔前の思考になっているようです。 出世して金儲けをするよりも、自分でビジネスを立ち上げたほうがよほどしがらみもなく、ストレスも少ない上、リスクは大きいが、実入りもそれ以上に大きいというのが今どきの思考なのですね。 自分で会社を立ち上げてそれまでのサラリーマン生活と全く違う感覚を得ることができ、人は仕事によって人生観がこれほどまでに変わるのかということを体験できた下駄です。 一概にどれがいいと言い切れるものではないですが、人生に憤りを感じている人は是非今の自分の環境をガラッと変えて見ることをおすすめします。 そんな人生のIndicatorがあるといいなあと思いつつ、今回のloadingアニメーションは、パズルを解きすすめる様なおもしろいアニメーションです。

Odd-Indicator

<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.

解説

全部で8つのcudeを用意しているのですが、全て同じアニメーションで動作しているのがポイントです。 タイミングをずらすだけで、それぞれが独立して突き進んでいるように見えるのが、見ていて飽きない感じを覚えませんか? 微妙に設定している色味の変更も大幅に返るとまた違った効果に感じるので、お好みの色に変更してお使いください。

関連リンク

他のNowLoadingも見る

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。