【ローディングアニメーション】参考サイト②

参考サイト

こちらはローディングアニメーション参考サイト①の続編です。
引き続きご紹介します。

ダウンロードの手順は以下の通りです。

①Githubからcsspin-master.zipをダウンロード。

②csspin-master.zip解凍後に、csspin.cssファイルをローカルフォルダに入れる。
index.htmlでcsspin.cssファイルを読み込んで下さい。

  <link rel="stylesheet" href="csspin.css">

※右上の矢印ボタンを押すとソースをコピーできます

③最後にHTMLは上記サイトのアニメーション下にある
<div class="cp-spinner cp-pinwheel"></div>
などのソースを貼り付けてください。

ローディングアニメーションの実装方法についてはこちらから

ダウンロードの手順は以下の通りです。

①GithubをクリックしてCodeから『 loaders.css-master.zip 』をダウンロード

②loaders.css-master.zip解凍後、loaders.min.cssファイルをローカルフォルダに入れる。
index.htmlでloaders.min.cssを読み込んで下さい。

<link rel="stylesheet" href="loaders.min.css" />

③HTMLの要素は
loaders.css-masterフォルダ→demoフォルダ→demo.html
から参照して下さい。

④完成図は以下の通りです。

背景色が白だとアニメーションが分かりづらいため
bodyなどに色をつけて確認下さい。

body {
  background: #cfcfcf;
}

ダウンロードの手順は以下の通りです。
①Githubからcss-spinners-master.zipファイルをダウンロード。

②css-spinners-master.zip解凍後、
cssフォルダの中にあるspinners.cssファイルをローカルファイルに入れてください。
その後、index.htmlでspinners.cssを読み込む

  <link rel="stylesheet" href="spinners.css" type="text/css">

③最後にcss-spinners-masterのindex.htmlから
お好きなアニメーションのソースを貼り付けて下さい。
④完成図は以下のとおりです。

こちらはSVGアニメーション。

ダウンロードの手順は以下の通りです。

①svg-loaders-Githubからファイルをダウンロード。

②SVG-Loaders-master.zip解凍後、
index.htmlのheadタグの中にある<style>〜</style>の中身を
ローカルファイルのstyle.cssに移します。

お好きなアニメーションの要素を移す。
※今回は<ul>〜</ul>タグごとindex.htmlに貼り付けます。

③最後にsvg-loadersフォルダをローカルファイルに移します。

④完成図は以下となります。

以上となります！

ローディングアニメーションをつくってみようについてはこちら

ローディングアニメーションの参考サイト① についてはこちら