転職するのが当たり前の世の中になっていますが、終身雇用がどーたらだとか、出世がどーたらというのは、一昔前の思考になっているようです。
出世して金儲けをするよりも、自分でビジネスを立ち上げたほうがよほどしがらみもなく、ストレスも少ない上、リスクは大きいが、実入りもそれ以上に大きいというのが今どきの思考なのですね。
自分で会社を立ち上げてそれまでのサラリーマン生活と全く違う感覚を得ることができ、人は仕事によって人生観がこれほどまでに変わるのかということを体験できた下駄です。
一概にどれがいいと言い切れるものではないですが、人生に憤りを感じている人は是非今の自分の環境をガラッと変えて見ることをおすすめします。
そんな人生の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.
0 件のコメント:
コメントを投稿