自宅で乗っている車の17年目の車検を行った、ユゲタです。
17年乗っているけど車の走行メーターは5万キロをちょっと超えたぐらい。
最近は、毎日スポジムに行く往復10キロぐらい乗っていますが、リーマン時代は週末に近所のスーパーに行く（往復5キロ程度）ぐらいしか乗っていなかったので、ペパドラ寸前でしたね。
野ざらし車庫なんで、車のボディもボロボロになってきたんですが、まだまだ可愛がってやろうと思います。
先日メーカーから、「交換パーツがだんだん無くなってきてますよ。」と早く買い換えろメッセージをいただきましたが、そんなことには負けません！！！
そして、今回のloadingアニメ素材は、素材をくるくる回すだけの比較的スタンダード系を２つです。
ソース
<svg class="double-roll" viewBox="-50 -50 612 612" xmlns="http://www.w3.org/2000/svg">
<style>
svg.double-roll .roll-1{
transform-origin:256px 256px;
animation : anim-roll-1 2.0s linear infinite;
}
@keyframes anim-roll-1 {
00.0% {transform : rotate(0deg);}
100.0% {transform : rotate(360deg);}
}
svg.double-roll .roll-2{
transform-origin:256px 256px;
animation : anim-roll-2 2.0s linear infinite;
}
@keyframes anim-roll-2 {
00.0% {transform : rotate(0deg);}
100.0% {transform : rotate(360deg);}
}
</style>
<g class="roll-1">
<path d="m256 512c-141.164062 0-256-114.835938-256-256s114.835938-256 256-256c101.867188 0 185.921875 60.800781 243.070312 175.765625 2.625 5.269531.472657 11.691406-4.796874 14.3125-5.292969 2.605469-11.691407.449219-14.292969-4.820313-37.1875-74.773437-106.199219-163.925781-223.980469-163.925781-129.386719 0-234.667969 105.28125-234.667969 234.667969s105.28125 234.667969 234.667969 234.667969 234.667969-105.28125 234.667969-234.667969c0-5.886719 4.777343-10.667969 10.664062-10.667969 5.890625 0 10.667969 4.78125 10.667969 10.667969 0 141.164062-114.835938 256-256 256zm0 0"/>
<path d="m501.332031 192h-85.332031c-5.886719 0-10.667969-4.777344-10.667969-10.667969 0-5.886719 4.78125-10.664062 10.667969-10.664062h74.667969v-73.773438c0-5.886719 4.777343-10.664062 10.664062-10.664062 5.890625 0 10.667969 4.777343 10.667969 10.664062v84.4375c0 5.890625-4.777344 10.667969-10.667969 10.667969zm0 0"/>
</g>
<g class="roll-2">
<path d="m256 405.332031c-51.050781 0-98.046875-25.769531-125.695312-68.90625-3.179688-4.949219-1.75-11.5625 3.21875-14.71875 4.972656-3.199219 11.566406-1.75 14.742187 3.222657 23.703125 36.992187 63.980469 59.070312 107.734375 59.070312 70.59375 0 128-57.40625 128-128s-57.40625-128-128-128-128 57.40625-128 128c0 3.308594.257812 6.550781.511719 9.792969l-21.269531 1.683593c-.296876-3.859374-.574219-7.613281-.574219-11.476562 0-82.324219 66.984375-149.332031 149.332031-149.332031s149.332031 67.007812 149.332031 149.332031-66.984375 149.332031-149.332031 149.332031zm0 0"/>
<path d="m138.667969 405.332031c-5.890625 0-10.667969-4.777343-10.667969-10.664062v-64c0-5.890625 4.777344-10.667969 10.667969-10.667969h64c5.886719 0 10.664062 4.777344 10.664062 10.667969 0 5.886719-4.777343 10.664062-10.664062 10.664062h-53.335938v53.335938c0 5.886719-4.777343 10.664062-10.664062 10.664062zm0 0"/>
</g>
</svg>
<svg class="short-bar" xmlns="http://www.w3.org/2000/svg" viewBox="0 7.5 330 337.5">
<style>
svg.short-bar .bars{
fill : black;
transform-origin:165px 172.5px;
animation : anim-cycle4 0.7s linear infinite;
}
@keyframes anim-cycle4 {
00.0% {transform : rotate(0deg);}
12.49% {transform : rotate(0deg);}
12.5% {transform : rotate(45deg);}
24.99% {transform : rotate(45deg);}
25.0% {transform : rotate(90deg);}
37.49% {transform : rotate(90deg);}
37.5% {transform : rotate(135deg);}
49.99% {transform : rotate(135deg);}
50.0% {transform : rotate(180deg);}
62.49% {transform : rotate(180deg);}
62.5% {transform : rotate(225deg);}
74.99% {transform : rotate(225deg);}
75.0% {transform : rotate(270deg);}
87.49% {transform : rotate(270deg);}
87.5% {transform : rotate(315deg);}
99.99% {transform : rotate(315deg);}
100.0% {transform : rotate(0deg);}
}
</style>
<g class="bars">
<path d="M165,7.5c-8.284,0-15,6.716-15,15v60c0,8.284,6.716,15,15,15c8.284,0,15-6.716,15-15v-60 C180,14.216,173.284,7.5,165,7.5z"/>
<path d="M165,262.5c-8.284,0-15,6.716-15,15v30c0,8.284,6.716,15,15,15c8.284,0,15-6.716,15-15v-30 C180,269.216,173.284,262.5,165,262.5z"/>
<path d="M315,157.5h-60c-8.284,0-15,6.716-15,15s6.716,15,15,15h60c8.284,0,15-6.716,15-15S323.284,157.5,315,157.5 z"/>
<path d="M90,172.5c0-8.284-6.716-15-15-15H15c-8.284,0-15,6.716-15,15s6.716,15,15,15h60 C83.284,187.5,90,180.784,90,172.5z"/>
<path d="M281.673,55.827c-5.857-5.858-15.355-5.858-21.213,0l-42.427,42.427c-5.858,5.858-5.858,15.355,0,21.213 c2.929,2.929,6.768,4.394,10.606,4.394c3.839,0,7.678-1.464,10.607-4.394l42.427-42.427 C287.531,71.182,287.531,61.685,281.673,55.827z"/>
<path d="M90.753,225.533L48.328,267.96c-5.857,5.858-5.857,15.355,0,21.213c2.929,2.929,6.768,4.393,10.607,4.393 c3.839,0,7.678-1.464,10.607-4.393l42.426-42.427c5.857-5.858,5.857-15.355,0-21.213 C106.109,219.675,96.612,219.675,90.753,225.533z"/>
<path d="M69.541,55.827c-5.858-5.858-15.355-5.857-21.213,0c-5.858,5.858-5.858,15.355,0,21.213l42.426,42.427 c2.93,2.929,6.768,4.394,10.607,4.394c3.838,0,7.678-1.465,10.606-4.393c5.858-5.858,5.858-15.355,0-21.213L69.541,55.827z"/>
</g>
</svg>
See the Pen svg-loading rolling by YugetaKoji (@geta1972) on CodePen.
