CSSだけでloadingを作る方法　その他の回転系

Loadingアイコンメーカーはじめました（2015年9月3日）

CSSだけでシリーズは矢印回転・床屋クルクル看板・ボール回転とloadingばかりを取り上げていますが、これはある程度作ったloadingを一旦まとめて提供できればと考えているためです。
今回は、回転系のloadingでその他のものをご紹介いたします。

扇回転タイプ

HTMLは左が
<span class="loading1"></span>
右がspanを内包して
<span class="loading2"><span></span></span>
です。
左のCSSは以下です。

span.loading1 {
position: relative;
display: inline-block;
width: 100px; /*100px=全体の直径*/
height: 100px; /*同上*/
border: 1px solid #666; /*1px=外枠線の太さ、#666=外枠線の色*/
border-radius: 52px; /*52px=全体の半径+外枠線の幅x2*/

-webkit-animation: animation1 2s linear infinite; /*2s=回転速度(秒)*/
animation: animation1 2s linear infinite; /*同上*/
}

span.loading1:before, span.loading1:after {
position: absolute;
display: inline-block;
content: " ";
width: 0;
height: 0;
border: 50px solid transparent; /*50px=全体の半径*/
border-radius: 50px; /*50px=全体の半径*/
}

span.loading1:before {
left: 0;
top: 0;
border-top: 50px solid #666; /*50px=全体の半径、#666=扇の色*/
}
span.loading1:after {
left: 0;
bottom: 0;
border-bottom: 50px solid #666; /*50px=全体の半径、#666=扇の色*/
}

@-webkit-keyframes animation1 {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes animation1 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

三角形を作る際、疑似クラスの設定する
width: 0;
height: 0;
border: 50px solid transparent;
border: 50px solid #666;
に
border-radius: 50px;
を加えて扇方を作っています。
これを:before/:afterの両疑似クラスで2つ設置し、全体を回転させています。
同じ理屈で、内包したspanにも2つの扇を設置し、内部の扇を逆回転させたものが右側のものです。CSSは以下です。

span.loading2 {
position: relative;
display: inline-block;
width: 100px; /*100px=全体の直径*/
height: 100px; /*同上*/
border: 1px solid #666; /*1px=外枠線の太さ、#666=外枠線の色*/
border-radius: 52px; /*52px=全体の半径+外枠線の幅x2*/

-webkit-animation: animation2 2s linear infinite; /*2s=回転速度(秒)*/
animation: animation2 2s linear infinite; /*同上*/
}

span.loading2 span {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;

-webkit-animation: animation2_2 1s linear infinite; /*1s=上の回転速度の半分*/
animation: animation2_2 1s linear infinite; /*同上*/
}

span.loading2:before, span.loading2:after, span.loading2 span:before, span.loading2 span:after {
position: absolute;
display: inline-block;
content: " ";
width: 0;
height: 0;
border: 50px solid transparent; /*50px=全体の半径*/
border-radius: 50px; /*50px=全体の半径*/
}
span.loading2:before, span.loading2 span:before {
z-index: 1;
left: 0;
top: 0;
border-top: 50px solid #666; /*50px=全体の半径、#666=扇の色*/
}
span.loading2:after, span.loading2 span:after {
z-index: 2;
left: 0;
bottom: 0;
border-bottom: 50px solid #666; /*50px=全体の半径、#666=扇の色*/
}

span.loading2 span:before {
border-top: 50px solid #666; /*50px=全体の半径、#666=扇の色その2（上と変えてもOK）*/
}
span.loading2 span:after {
border-bottom: 50px solid #666; /*50px=全体の半径、#666=扇の色その2（上と変えてもOK）*/
}

@-webkit-keyframes animation2 {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes animation2 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes animation2_2 {
0% {
-webkit-transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
@keyframes animation2_2 {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}

同色の砂時計型（扇2つ）の図形2枚が重なった状態で、それぞれ左右逆に回転することで錯覚が起き、シーソーのように行ったり来たりする動きに見えます。
内部の扇の色を変えるとまた別の見た目になります。

浮き輪回転タイプ

次はこちらです。HTMLは両方ともspanを内包し、
<span class="loading3"><span></span></span>
<span class="loading4"><span></span></span>
です。CSSは左から以下です。

span.loading3 {
position: relative;
display: inline-block;
width: 100px; /*100px=全体の直径*/
height: 100px; /*同上*/

-webkit-animation: animation3 2s linear infinite; /*2s=回転速度(秒)*/
animation: animation3 2s linear infinite; /*同上*/
}
span.loading3 span {
position: absolute;
display: inline-block;
left: 0;
top: 0;
width: 100%;
height: 100%;
}

span.loading3:before, span.loading3:after, span.loading3 span:before, span.loading3 span:after {
position: absolute;
display: inline-block;
content: " ";
width: 45px; /*45px=全体の半径-5px*/
height: 45px; /*同上*/
}
/*以下backgroundでの50=全体の半径*/
span.loading3:before {
left: 0;
top: 0;

background-image: -webkit-gradient(radial, 50 50, 0, 50 50, 50, from(transparent), color-stop(0.81, transparent), color-stop(0.82,#666), color-stop(0.98, #666), color-stop(0.99, transparent), to(transparent) );
background-image: -webkit-radial-gradient(50px 50px, 50px 50px, transparent, transparent 81%, #666 82%, #666 98%, transparent 99%, transparent);
background-image: radial-gradient(50px 50px at 50px 50px, transparent, transparent 81%, #666 82%, #666 98%, transparent);
}
span.loading3:after {
right: 0;
bottom: 0;

background-image: -webkit-gradient(radial, -5 -5, 0, -5 -5, 50, from(transparent), color-stop(0.81, transparent), color-stop(0.82,#666), color-stop(0.98, #666), color-stop(0.99, transparent), to(transparent) );
background-image: -webkit-radial-gradient(-5px -5px, 50px 50px, transparent, transparent 81%, #666 82%, #666 98%, transparent 99%, transparent);
background-image: radial-gradient(50px 50px at -5px -5px, transparent, transparent 81%, #666 82%, #666 98%, transparent);
}
span.loading3 span:before {
left: 0;
bottom: 0;

background-image: -webkit-gradient(radial, 50 -5, 0, 50 -5, 50, from(transparent), color-stop(0.81, transparent), color-stop(0.82,#666), color-stop(0.98, #666), color-stop(0.99, transparent), to(transparent) );
background-image: -webkit-radial-gradient(50px -5px, 50px 50px, transparent, transparent 81%, #666 82%, #666 98%, transparent 99%, transparent);
background-image: radial-gradient(50px 50px at 50px -5px, transparent, transparent 81%, #666 82%, #666 98%, transparent);
}
span.loading3 span:after {
right: 0;
top: 0;

background-image: -webkit-gradient(radial, -5 50, 0, -5 50, 50, from(transparent), color-stop(0.81, transparent), color-stop(0.82,#666), color-stop(0.98, #666), color-stop(0.99, transparent), to(transparent) );
background-image: -webkit-radial-gradient(-5px 50px, 50px 50px, transparent, transparent 81%, #666 82%, #666 98%, transparent 99%, transparent);
background-image: radial-gradient(50px 50px at -5px 50px, transparent, transparent 81%, #666 82%, #666 98%, transparent);
}

@-webkit-keyframes animation3 {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes animation3 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

:before/:afterの疑似クラス2つと、内部のspanの同疑似クラス2つ、計4つの疑似クラスを、外側の正方形の中に内包しています。それぞれの形は外側と同じく正方形で、隙間を空けて4隅に配置されています。
中身の正方形でradial-gradientを使い、1/4にカットされた外枠線を表現しています。
animationはシンプルに全体を回転させています。
次に右は、上の扇方で説明したのと同じ方法で、内包するspanの2つの疑似クラスで表現している1/4外枠線を逆回転させたものです。CSSは以下です。

span.loading4 {
position: relative;
display: inline-block;
width: 100px; /*100px=全体の直径*/
height: 100px; /*同上*/

-webkit-animation: animation4 2s linear infinite; /*2s=回転速度(秒)*/
animation: animation4 2s linear infinite; /*同上*/
}
span.loading4 span {
position: absolute;
display: inline-block;
left: 0;
top: 0;
width: 100%;
height: 100%;

-webkit-animation: animation4_2 1s linear infinite; /*1s=上の回転速度の半分*/
animation: animation4_2 1s linear infinite; /*同上*/
}

span.loading4:before, span.loading4:after, span.loading4 span:before, span.loading4 span:after {
position: absolute;
display: inline-block;
content: " ";
width: 45px; /*45px=全体の半径-5px*/
height: 45px; /*同上*/
}
/*以下backgroundでの50=全体の半径*/
span.loading4:before {
left: 0;
top: 0;

background-image: -webkit-gradient(radial, 50 50, 0, 50 50, 50, from(transparent), color-stop(0.81, transparent), color-stop(0.82,#666), color-stop(0.98, #666), color-stop(0.99, transparent), to(transparent) );
background-image: -webkit-radial-gradient(50px 50px, 50px 50px, transparent, transparent 81%, #666 82%, #666 98%, transparent 99%, transparent);
background-image: radial-gradient(50px 50px at 50px 50px, transparent, transparent 81%, #666 82%, #666 98%, transparent);
}
span.loading4:after {
right: 0;
bottom: 0;

background-image: -webkit-gradient(radial, -5 -5, 0, -5 -5, 50, from(transparent), color-stop(0.81, transparent), color-stop(0.82,#666), color-stop(0.98, #666), color-stop(0.99, transparent), to(transparent) );
background-image: -webkit-radial-gradient(-5px -5px, 50px 50px, transparent, transparent 81%, #666 82%, #666 98%, transparent 99%, transparent);
background-image: radial-gradient(50px 50px at -5px -5px, transparent, transparent 81%, #666 82%, #666 98%, transparent);
}
span.loading4 span:before {
left: 0;
bottom: 0;

background-image: -webkit-gradient(radial, 50 -5, 0, 50 -5, 50, from(transparent), color-stop(0.81, transparent), color-stop(0.82,#666), color-stop(0.98, #666), color-stop(0.99, transparent), to(transparent) );
background-image: -webkit-radial-gradient(50px -5px, 50px 50px, transparent, transparent 81%, #666 82%, #666 98%, transparent 99%, transparent);
background-image: radial-gradient(50px 50px at 50px -5px, transparent, transparent 81%, #666 82%, #666 98%, transparent);
}
span.loading4 span:after {
right: 0;
top: 0;

background-image: -webkit-gradient(radial, -5 50, 0, -5 50, 50, from(transparent), color-stop(0.81, transparent), color-stop(0.82,#666), color-stop(0.98, #666), color-stop(0.99, transparent), to(transparent) );
background-image: -webkit-radial-gradient(-5px 50px, 50px 50px, transparent, transparent 81%, #666 82%, #666 98%, transparent 99%, transparent);
background-image: radial-gradient(50px 50px at -5px 50px, transparent, transparent 81%, #666 82%, #666 98%, transparent);
}

@-webkit-keyframes animation4 {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes animation4 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

@-webkit-keyframes animation4_2 {
0% {
-webkit-transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
@keyframes animation4_2 {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}

波紋タイプ

最後は、中央から波紋のように円が広がるものです。回転していませんが、円なのでこちらで紹介します。
HTMLはspanを内包し
<span class="loading5"><span></span></span>
です。CSSは以下です。

span.loading5 {
position: relative;
display: inline-block;
width: 100px; /*100px=全体の直径*/
height: 100px; /*同上*/
}

span.loading5 span {
position: absolute;
display: inline-block;

border-radius: 50px; /*50px=全体の半径*/

/*以下backgroundでの50=全体の半径*/
background-image: -webkit-gradient(radial, center center, 0, center center, 50, from(transparent), color-stop(0.1, transparent), color-stop(0.11, #666), color-stop(0.2, #666), color-stop(0.21, transparent), color-stop(0.3, transparent), color-stop(0.31, #666), color-stop(0.4, #666), color-stop(0.41, transparent), color-stop(0.5, transparent), color-stop(0.51, #666), color-stop(0.6, #666), color-stop(0.61, transparent), color-stop(0.7, transparent), color-stop(0.71, #666), color-stop(0.8, #666), color-stop(0.81, transparent), color-stop(0.9, transparent), color-stop(0.91, #666), to(#666) );

background-image: -webkit-radial-gradient(center center, 50px 50px, transparent, transparent 10%, #666 11%, #666 20%, transparent 21%, transparent 30%, #666 31%, #666 40%, transparent 41%, transparent 50%, #666 51%, #666 60%, transparent 61%, transparent 70%, #666 71%, #666 80%, transparent 81%, transparent 90%, #666 91%, #666);

background-image: radial-gradient(50px 50px at center center, transparent, transparent 10%, #666 11%, #666 20%, transparent 21%, transparent 30%, #666 31%, #666 40%, transparent 41%, transparent 50%, #666 51%, #666 60%, transparent 61%, transparent 70%, #666 71%, #666 80%, transparent 81%, transparent 90%, #666 91%, #666);

-webkit-animation: animation5 1s linear infinite;
animation: animation5 1s linear infinite;
}

@-webkit-keyframes animation5 {
0% {
left: 49px; /*49px=全体の半径-1*/
right: 49px; /*同上*/
top: 49px; /*同上*/
bottom: 49px; /*同上*/
}
100% {
left: 0;
right: 0;
top: 0;
bottom: 0;
}
}
@keyframes animation5 {
0% {
left: 49px; /*49px=全体の半径-1*/
right: 49px; /*同上*/
top: 49px; /*同上*/
bottom: 49px; /*同上*/
}
100% {
left: 0;
right: 0;
top: 0;
bottom: 0;
}
}

渦巻きは全てradial-gradientで表現しており、内部のspanに設定しています。
内部のspanをanimationによって拡大しています。実際は、滑らかなanimationですが、縞々になっていることで、縞が1つずつ増えているような錯覚があります。

対応ブラウザとIE対策

IE11・IE10・Chrome・Safari・Firefox、Android標準ブラウザに対応しています。
未対応はIE9以下のみなので、こちらのブラウザシェアから計算すると対応範囲は概ね95％超です。
またIE9以下には、下記のコードにより意図を伝えることができます。
loading1～5のすべてを記載しているので、該当する部分の<!--[if lte IE 9 ]>～<![endif]-->のみを設定してください。

<!--[if lte IE 9 ]>
<style type="text/css">
span.loading1:before {
display: none;
}
span.loading1:after {
display: inline-block;
content: "loading";
left: 0;
right: 0;
top: 50%;
width: 100%;
height: 100%;
background: none;
border: none;
text-align: center;
line-height: 0;
}
</style>
<![endif]-->

<!--[if lte IE 9 ]>
<style type="text/css">
span.loading2:before, span.loading2 span {
display: none;
}
span.loading2:after {
display: inline-block;
content: "loading";
left: 0;
right: 0;
top: 50%;
width: 100%;
height: 100%;
background: none;
border: none;
text-align: center;
line-height: 0;
}
</style>
<![endif]-->

<!--[if lte IE 9 ]>
<style type="text/css">
span.loading3:before, span.loading3 span {
display: none;
}
span.loading3:after {
display: inline-block;
content: "loading";
left: 0;
right: 0;
top: 50%;
width: 100%;
height: 100%;
background: none;
border: none;
text-align: center;
line-height: 0;
}
</style>
<![endif]-->

<!--[if lte IE 9 ]>
<style type="text/css">
span.loading4:before, span.loading4 span {
display: none;
}
span.loading4:after {
display: inline-block;
content: "loading";
left: 0;
right: 0;
top: 50%;
width: 100%;
height: 100%;
background: none;
border: none;
text-align: center;
line-height: 0;
}
</style>
<![endif]-->

<!--[if lte IE 9 ]>
<style type="text/css">
span.loading5:before, span.loading5 span {
display: none;
}
span.loading5:after {
display: inline-block;
content: "loading";
left: 0;
right: 0;
top: 50%;
width: 100%;
height: 100%;
background: none;
border: none;
text-align: center;
line-height: 0;
}
</style>
<![endif]-->

CSSだけで作るloadingのメリットおさらい

  • 文字列のコピーだけで導入できるので手軽
  • 背景が透過しているので、どんな背景にも使える
  • 文字列だけでできているのでカスタマイズが容易
  • 高精細ブラウザでもきれいに表示（ギザギザしない）
2015/6/26