みなさんこんにちは!おさかなです!
今回は「CSS loaders and Spinners」について、書いていこうと思います!
それでは、レッツゴー!!!!!
想定読者
・読み込み中のデザインを探している方
・ローディングアイコンを探している方
・HTML/CSSを学習中の方
・読み込み中のデザインを探している方
・ローディングアイコンを探している方
・HTML/CSSを学習中の方
「読み込み中」のデザインが決まらない!
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
おさかな
読み込み中のデザイン、どんな風にしたらいいか決まらない💦
![ナビまる](https://osakanav.com/wp-content/uploads/2019/09/navmaru-2.jpg)
ナビまる
それじゃあ「
CSS loaders and Spinners」を参考にしてみたら?
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
おさかな
おお!なんか凄そう!
![](https://osakanav.com/wp-content/uploads/2021/11/nomad-code-top-160x90.png)
【HTML/CSS】コードをコピーするだけで、デザイン実装できちゃう!【Nomad Code】とは?
みなさんこんにちは!おさかなです!今回は「Nomad Code」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・HTML/CSSを学習している方・Webデザインを学んでいる方・Webサービ...
「CSS loaders and Spinners」って何?
「CSS loaders and Spinners」とは、Webサイトの読み込み中に表示される、ぐるぐる回る「ローディング」アニメーションのデザインを探せるサイトことです。
HTML/CSSコードを「コピペ」するだけで、デザインを実装でき、CSSを変更してカスタマイズすることもできます!(使いやすそう!)
CSS loaders and Spinners
CSS Loader is a collection of different types of loaders, spinners and their source code. There are no image dependencies in this. It's is done using pure CSS. ...
![](https://osakanav.com/wp-content/uploads/2021/02/nizima-top-160x90.jpg)
【アバター モデル販売】Live2D公式マーケット「nizima」とは?
みなさんこんにちは!おさかなです!今回は「nizima」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・Live2Dのモデルを探している方・Live2Dモデルを販売したい方・オーダーメイド...
実際につかってみよう!
それでは早速サイトにアクセスします!
![](https://osakanav.com/wp-content/uploads/2021/11/cssloadgin.png)
しばらく待っていると何か表示されそうですが、何も出てきません!笑
(ぐるぐる…。)
![](https://osakanav.com/wp-content/uploads/2021/11/cssload1.gif)
ページをスクロールしてみると、色々な種類のローディングアイコンが表示されます!(おお!)
![](https://osakanav.com/wp-content/uploads/2021/11/load.gif)
丸だけではなく、横棒や…。
![](https://osakanav.com/wp-content/uploads/2021/11/load-bar.png)
テキストも…!
![](https://osakanav.com/wp-content/uploads/2021/11/load-text.png)
さらに、少しトリッキーなものまで、色々な場面で使用できそうなものが揃っています!(どれもいい感じ✨)
![](https://osakanav.com/wp-content/uploads/2021/11/cssload.gif)
気になるものを見つけたら、クリックしましょう!(ポチッと)
![](https://osakanav.com/wp-content/uploads/2021/11/load-click.png)
すると、HTML/CSSコードが表示されました!(ふむふむ…。)
![](https://osakanav.com/wp-content/uploads/2021/11/load-code.png)
右上のボタンから、それぞれコードを「コピー」しましょう!(よいしょ!)
![](https://osakanav.com/wp-content/uploads/2021/11/load-copy.png)
ローディングアイコンを実装したいところに、コピーしたコードを貼り付ければOKです!
↓どこに貼り付ければ良いかわからない方は、こちらも参考になります。
![](https://www15.a8.net/0.gif?a8mat=3H5R2D+EGCW9M+3L4M+601S2)
![](https://osakanav.com/wp-content/uploads/2021/11/load-edit.gif)
↓実際のアイコンがこちら
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
おさかな
読み込み中のデザインも、きれいにしよう〜!
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
![](https://osakanav.com/wp-content/uploads/2021/11/css-bg-p-top-160x90.png)
【背景】デザインに使えそうな「模様パターン」が探せる?!【CSS background patterns】とは?
みなさんこんにちは!おさかなです!今回は「CSS background patterns」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・模様パターンを探している方・背景デザインを探してい...