[svg + css] spinner

2022年8月15日

テクノロジー

eyecatch SVG、それは安定した軽量画像システム件、DOMコントロールが簡単なHTMLの、とっても強い武器でもあります。 同じコンテンツを、色々な常識で作るのが、密かに好きな、ユゲタです。 前回作った「spinner」というwindows8のローディングアニメーション処理を、今回はsvgファイルで扱えるようにしてみました。 基本的に名称などは合わせてみたのですが、やはり描画記述ができるsvgは楽でいいですね。 学習などにも使えると思うので、是非内部を見て色々な事を汲み取ってください。

ソース

<svg class="spinner" width="128px" height="128px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> <style> svg.spinner circle{ transform-origin:center; fill : red; cx : 32px; cy : 8px; r : 3; animation-name: anim-spinner; animation-duration: 5.5s; animation-iteration-count: infinite; opacity:0; } svg.spinner .orbit-1{animation-delay: 0s;} svg.spinner .orbit-2{animation-delay: 240ms;} svg.spinner .orbit-3{animation-delay: 480ms;} svg.spinner .orbit-4{animation-delay: 720ms;} svg.spinner .orbit-5{animation-delay: 960ms;} @keyframes anim-spinner{ 0% { transform:rotate(225deg); opacity: 1; animation-timing-function: ease-out; } 7% { transform:rotate(345deg); animation-timing-function: linear; } 30% { transform:rotate(455deg); animation-timing-function: ease-in-out; } 39% { transform:rotate(690deg); animation-timing-function: linear; } 70% { transform:rotate(815deg); opacity: 1; animation-timing-function: ease-out; } 75% { transform:rotate(945deg); animation-timing-function: ease-out; } 76% { transform:rotate(945deg); opacity: 0; } 100% { transform:rotate(945deg); opacity: 0; } } </style> <circle class="orbit-1"></circle> <circle class="orbit-2"></circle> <circle class="orbit-3"></circle> <circle class="orbit-4"></circle> <circle class="orbit-5"></circle> </svg>

サンプル

解説

svg内部にstyleを書いているので、まるでhtmlですよね。 この辺理解できると、svgって全く怖くないし、めちゃくちゃ使いやすい素材になるので、オススメです。 でも、javascriptで扱う時に、ほんの少し苦労すると思うので、その辺を乗り越えると、もはやシステムで利用できるいい武器に成り得ます。 そして、今回のコードは、svgのciecleタグで実装できるので、html版のbefore属性で記述する手間よりも遥かに楽に実装ができてしまいました。 アニメーション方式については、まるで同じなので、見比べてもらうとその違いが明確だと思います。 前回との差別化の為に色を変えていますので、虹色にしたり、色自体をアニメーションさせることで、もっと面白いコンテンツになるかもしれませんね。 その辺は独自に改良して使ってください。

関連リンク

他のNowLoadingも見る

このブログを検索

ごあいさつ

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