CSSのみでローダーを作成

今回は画像を使わずに、CSSだけでローダーを作成する方法を紹介します。
ローダーと言ってもデザインは沢山あるため、以下の3つをサンプルとして取り上げます。

共通コード

サンプルとして共通スタイルは以下の通りとします。

スタイル(CSS)

  1. .load-container {
  2.     width: 240px;
  3.     height: 240px;
  4. }

設置タグ(HTML)

  1. <div class=”load-container load01“><div class=”loader”></div></div>

※青字箇所は各ローダーのスタイル名を設定してください。

サンプル01

設定スタイル(CSS)

  1. .load01 .loader {
  2.     font-size: 10px;
  3.     margin: 50px auto;
  4.     text-indent: -9999em;
  5.     width: 11em;
  6.     height: 11em;
  7.     border-radius: 50%;
  8.     background: #33ccff;
  9.     background: -moz-linear-gradient(left, #33ccff 10%, rgba(255, 255, 255, 0) 42%);
  10.     background: -webkit-linear-gradient(left, #33ccff 10%, rgba(255, 255, 255, 0) 42%);
  11.     background: -o-linear-gradient(left, #33ccff 10%, rgba(255, 255, 255, 0) 42%);
  12.     background: -ms-linear-gradient(left, #33ccff 10%, rgba(255, 255, 255, 0) 42%);
  13.     background: linear-gradient(to right, #33ccff 10%, rgba(255, 255, 255, 0) 42%);
  14.     position: relative;
  15.     -webkit-animation: load01 1.4s infinite linear;
  16.     animation: load01 1.4s infinite linear;
  17.     -webkit-transform: translateZ(0);
  18.     -ms-transform: translateZ(0);
  19.     transform: translateZ(0);
  20. }
  21. .load01 .loader:before {
  22.     width: 50%;
  23.     height: 50%;
  24.     background: #33ccff;
  25.     border-radius: 100% 0 0 0;
  26.     position: absolute;
  27.     top: 0;
  28.     left: 0;
  29.     content: ”;
  30. }
  31. .load01 .loader:after {
  32.     background: #ffffff;
  33.     width: 75%;
  34.     height: 75%;
  35.     border-radius: 50%;
  36.     content: ”;
  37.     margin: auto;
  38.     position: absolute;
  39.     top: 0;
  40.     left: 0;
  41.     bottom: 0;
  42.     right: 0;
  43. }
  44. @-webkit-keyframes load01 {
  45.     0% {
  46.         -webkit-transform: rotate(0deg);
  47.         transform: rotate(0deg);
  48.     }
  49.     100% {
  50.         -webkit-transform: rotate(360deg);
  51.         transform: rotate(360deg);
  52.     }
  53. }
  54. @keyframes load01 {
  55.     0% {
  56.         -webkit-transform: rotate(0deg);
  57.         transform: rotate(0deg);
  58.     }
  59.     100% {
  60.         -webkit-transform: rotate(360deg);
  61.         transform: rotate(360deg);
  62.     }
  63. }

サンプル02

設定スタイル(CSS)

  1. .load02 .loader {
  2.     color: #33ccff;
  3.     font-size: 20px;
  4.     margin: 100px auto;
  5.     width: 1em;
  6.     height: 1em;
  7.     border-radius: 50%;
  8.     position: relative;
  9.     text-indent: -9999em;
  10.     -webkit-animation: load02 1.3s infinite linear;
  11.     animation: load02 1.3s infinite linear;
  12.     -webkit-transform: translateZ(0);
  13.     -ms-transform: translateZ(0);
  14.     transform: translateZ(0);
  15. }
  16. @-webkit-keyframes load02 {
  17.     0%,
  18.     100% {
  19.         box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  20.     }
  21.     12.5% {
  22.         box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  23.     }
  24.     25% {
  25.         box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  26.     }
  27.     37.5% {
  28.         box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  29.     }
  30.     50% {
  31.         box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  32.     }
  33.     62.5% {
  34.         box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  35.     }
  36.     75% {
  37.         box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  38.     }
  39.     87.5% {
  40.         box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  41.     }
  42. }
  43. @keyframes load02 {
  44.     0%,
  45.     100% {
  46.         box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  47.     }
  48.     12.5% {
  49.         box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  50.     }
  51.     25% {
  52.         box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  53.     }
  54.     37.5% {
  55.         box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  56.     }
  57.     50% {
  58.         box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  59.     }
  60.     62.5% {
  61.         box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  62.     }
  63.     75% {
  64.         box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  65.     }
  66.     87.5% {
  67.         box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  68.     }
  69. }

サンプル03

設定スタイル(CSS)

  1. .load03 .loader:before,
  2. .load03 .loader:after,
  3. .load03 .loader {
  4.     border-radius: 50%;
  5.     width: 2.5em;
  6.     height: 2.5em;
  7.     -webkit-animation-fill-mode: both;
  8.     animation-fill-mode: both;
  9.     -webkit-animation: load03 1.8s infinite ease-in-out;
  10.     animation: load03 1.8s infinite ease-in-out;
  11. }
  12. .load03 .loader {
  13.     color: #33ccff;
  14.     font-size: 10px;
  15.     margin: 80px auto;
  16.     position: relative;
  17.     text-indent: -9999em;
  18.     -webkit-transform: translateZ(0);
  19.     -ms-transform: translateZ(0);
  20.     transform: translateZ(0);
  21.     -webkit-animation-delay: -0.16s;
  22.     animation-delay: -0.16s;
  23. }
  24. .load03 .loader:before {
  25.     left: -3.5em;
  26.     -webkit-animation-delay: -0.32s;
  27.     animation-delay: -0.32s;
  28. }
  29. .load03 .loader:after {
  30.     left: 3.5em;
  31. }
  32. .load03 .loader:before,
  33. .load03 .loader:after {
  34.     content: ”;
  35.     position: absolute;
  36.     top: 0;
  37. }
  38. @-webkit-keyframes load03 {
  39.     0%,
  40.     80%,
  41.     100% {
  42.         box-shadow: 0 2.5em 0 -1.3em;
  43.     }
  44.     40% {
  45.         box-shadow: 0 2.5em 0 0;
  46.     }
  47. }
  48. @keyframes load03 {
  49.     0%,
  50.     80%,
  51.     100% {
  52.         box-shadow: 0 2.5em 0 -1.3em;
  53.     }
  54.     40% {
  55.         box-shadow: 0 2.5em 0 0;
  56.     }
  57. }

今回は以上となります。
コードの関係上で長文となってしまいましたが、最後まで目を通していただきありがとうございました！

次々に新しい技術が増えていく現代は、とても素晴らしいですね！

その反面で、日々の最新技術探索＆勉強が必要なのだと改めて気づかされましたけれども、頑張るしかないですね！
(;´･ω･)はふぅ～

タイトルとURLをコピーしました