CSS3を使って画像なしでローディング中アイコンを作成する方法

2010年3月 4日17:33 | コメント() | |

「CSS3 loading spinners without images • CSS & (X)HTML • Kilian Valkhof」という記事がありました。画像を使わずにCSS3だけでローディング中に表示されるスピナーアイコンを実現しよう、というものです。

例ではCSS3 animationだけでやっているもののあるのですが、それだとFirefoxとWebkit系でちょっと動きが変わってくるので最終的には簡単なJavaScriptを絡めています。（上記リンクをFirefoxとChrome（Safari）でアクセスするとその動きの違いがわかります）。

で、こんな感じで書きます。

まず45度回転するとして四角い部分が8つ必要になるのでそのスタイルを定義します。


.bar1 {
  -moz-transform:rotate(0deg) translate(0, -40px);
  -webkit-transform:rotate(0deg) translate(0, -40px);opacity:0.12;
}
.bar2 {
  -moz-transform:rotate(45deg) translate(0, -40px);
  -webkit-transform:rotate(45deg) translate(0, -40px);opacity:0.25;
}
.bar3 {
  -moz-transform:rotate(90deg) translate(0, -40px);
  -webkit-transform:rotate(90deg) translate(0, -40px);opacity:0.37;
}
.bar4 {
  -moz-transform:rotate(135deg) translate(0, -40px);
  -webkit-transform:rotate(135deg) translate(0, -40px);opacity:0.50;
}
.bar5 {
  -moz-transform:rotate(180deg) translate(0, -40px);
  -webkit-transform:rotate(180deg) translate(0, -40px);opacity:0.62;
}
.bar6 {
  -moz-transform:rotate(225deg) translate(0, -40px);
  -webkit-transform:rotate(225deg) translate(0, -40px);opacity:0.75;
}
.bar7 {
  -moz-transform:rotate(270deg) translate(0, -40px);
  -webkit-transform:rotate(270deg) translate(0, -40px);opacity:0.87;
}
.bar8 {
  -moz-transform:rotate(315deg) translate(0, -40px);
  -webkit-transform:rotate(315deg) translate(0, -40px);opacity:1;
}

で、スピナーアイコン全体を囲むDIVタグを以下のように指定します。


#div1 {
  position:relative;
  width:100px;
  height:100px;
  margin-bottom:1.5em;
  margin-right:1.5em;
  -moz-border-radius:100px;
  float:left;
  -moz-transform:scale(0.5);
  -webkit-transform:scale(0.5);
}

#div1 div {
  width:10px;
  height:30px;
  background:#000;
  position:absolute;
  top:35px;
  left:45px;
}

で、HTMLはこんな感じに。

最後にJavaScriptはこんな感じに。

で、最終的にはこんなスピナーアイコンになります。

どうでしょうか？というか私は普通に素直にアニメーションGIFの方がいいや。

カテゴリ

\n「CSS3 loading spinners without images • CSS & (X)HTML • Kilian Valkhof」という記事がありました。画像を使わずにCSS3だけでローディング中に表示されるスピナーアイコンを実現しよう、というものです。\n\n

\n\n

で、こんな感じで書きます。

\n\n

まず45度回転するとして四角い部分が8つ必要になるのでそのスタイルを定義します。

\n\n

\n.bar1 {\n  -moz-transform:rotate(0deg) translate(0, -40px);\n  -webkit-transform:rotate(0deg) translate(0, -40px);opacity:0.12;\n}\n.bar2 {\n  -moz-transform:rotate(45deg) translate(0, -40px);\n  -webkit-transform:rotate(45deg) translate(0, -40px);opacity:0.25;\n}\n.bar3 {\n  -moz-transform:rotate(90deg) translate(0, -40px);\n  -webkit-transform:rotate(90deg) translate(0, -40px);opacity:0.37;\n}\n.bar4 {\n  -moz-transform:rotate(135deg) translate(0, -40px);\n  -webkit-transform:rotate(135deg) translate(0, -40px);opacity:0.50;\n}\n.bar5 {\n  -moz-transform:rotate(180deg) translate(0, -40px);\n  -webkit-transform:rotate(180deg) translate(0, -40px);opacity:0.62;\n}\n.bar6 {\n  -moz-transform:rotate(225deg) translate(0, -40px);\n  -webkit-transform:rotate(225deg) translate(0, -40px);opacity:0.75;\n}\n.bar7 {\n  -moz-transform:rotate(270deg) translate(0, -40px);\n  -webkit-transform:rotate(270deg) translate(0, -40px);opacity:0.87;\n}\n.bar8 {\n  -moz-transform:rotate(315deg) translate(0, -40px);\n  -webkit-transform:rotate(315deg) translate(0, -40px);opacity:1;\n}\n

\n\n\n

で、スピナーアイコン全体を囲むDIVタグを以下のように指定します。

\n\n

\n#div1 {\n  position:relative;\n  width:100px;\n  height:100px;\n  margin-bottom:1.5em;\n  margin-right:1.5em;\n  -moz-border-radius:100px;\n  float:left;\n  -moz-transform:scale(0.5);\n  -webkit-transform:scale(0.5);\n}\n\n#div1 div {\n  width:10px;\n  height:30px;\n  background:#000;\n  position:absolute;\n  top:35px;\n  left:45px;\n}\n

\n\n

で、HTMLはこんな感じに。

\n\n

\n<div id=\"div1\">\n<div class=\"bar1\"></div>\n<div class=\"bar2\"></div>\n<div class=\"bar3\"></div>\n<div class=\"bar4\"></div>\n<div class=\"bar5\"></div>\n<div class=\"bar6\"></div>\n<div class=\"bar7\"></div>\n<div class=\"bar8\"></div>\n</div>\n\n

\n\n

最後にJavaScriptはこんな感じに。

\n\n

\n\n<script>\n var count = 0;\n function rotate() {\n var elem2 = document.getElementById('div1');\n elem2.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';\n elem2.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';\n count+=45;\n window.setTimeout(rotate, 100);\n }\n window.setTimeout(rotate, 100);\n</script>\n\n

\n\n

で、最終的にはこんなスピナーアイコンになります。

\n\n

\n
\n

どうでしょうか？というか私は普通に素直にアニメーションGIFの方がいいや。

\n\n\n\n