[CSS] NowLoadingサンプル : Ring

2022年8月5日

CSS テクノロジー プログラミング 特集

eyecatch CSSを笑うものはCSSに泣くかもしれないし、泣かないかもしれない、ユゲタです。 よくHTMLはマークアップ言語で、CSSは設定補助的な言語であると、つぶやかれていますが、 ホームページ制作のシステム担当で、デザインが苦手という人で、まともにCSSを構築できない人がいるようです。 実際に、そうした人は、他人がデザインしたWEBページしか構築できないため、独創性が欠けた仕事しかできなくなってしまいます。 慣れると簡単なCSSを覚えると、自分でも簡単で、見た目の良いデザインのホームページが作れる様になるのにね。 ということで、cssを使って、コピペで使えるコードをブログでもたくさん掲載して行こう計画を開始してみようと思います。 初回の今回は、システムの人がよく使う「NowLoadingアニメーション」です。 コピペしてどんどんお使いください。 もちろん、著作権は、MITですよ。

コード

sample.html <div class="ring"></div> <style> .ring{ display:block; position:relative; width:64px; height:64px; border:1px solid #1DA9F1; border-radius:50%; animation: anim-ring 2s ease-in-out infinite; } .ring:before{ content:""; position:absolute; top:calc(8% / 2 * -1 - 2px); left:calc((100% - 8%) / 2 - 2px); width:8%; height:8%; border:2px solid #1DA9F1; border-radius:50%; background-color:white; } @keyframes anim-ring{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(360deg); } } </style>

Sample

関連リンク

他のNowLoadingも見る

このブログを検索

ごあいさつ

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