生活情報オンライン

ソフトウェアエンジニアが役立つ情報を発信します。

待ち時間のローディングサンプル3

可愛い系サイトに合いそうなローディングサンプルです。前回までのローディングサンプルに続き、こちらもHTML5 / CSS3 のみで作成しています。
somegoro.hatenablog.com
somegoro.hatenablog.com
画像やjavascriptは使用していませんので、とっても簡単にアプリに取り込むことが出来ます。










<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="sample3.css">
</head>
<body>
<div class="load-container load-animation">
  <div class="loader"></div>
</div>
</body>
</html>
@charset "utf-8";

.load-container {
    width: 200px;
    height: 200px;
    background: rgba(33, 150, 243, 1);
    position: absolute;
}
.loader {
  margin: calc((200px - 14px) / 2) auto;
  font-size: 14px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  position: relative;
  animation: load-animation 1.1s infinite ease;
  transform: translateZ(0);
}

@keyframes load-animation {
  0%,
  100% {
    box-shadow:  0.00em -2.60em 0em 0em rgba(255, 255, 255, 1.0),
                 1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.2),
                 2.50em  0.00em 0em 0em rgba(255, 255, 255, 0.2),
                 1.75em  1.75em 0em 0em rgba(255, 255, 255, 0.2),
                 0.00em  2.50em 0em 0em rgba(255, 255, 255, 0.2),
                -1.80em  1.80em 0em 0em rgba(255, 255, 255, 0.2),
                -2.60em  0.00em 0em 0em rgba(255, 255, 255, 0.5),
                -1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow:  0.00em -2.60em 0em 0em rgba(255, 255, 255, 0.7),
                 1.80em -1.80em 0em 0em rgba(255, 255, 255, 1.0),
                 2.50em  0.00em 0em 0em rgba(255, 255, 255, 0.2),
                 1.75em  1.75em 0em 0em rgba(255, 255, 255, 0.2),
                 0.00em  2.50em 0em 0em rgba(255, 255, 255, 0.2),
                -1.80em  1.80em 0em 0em rgba(255, 255, 255, 0.2),
                -2.60em  0.00em 0em 0em rgba(255, 255, 255, 0.2),
                -1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow:  0.00em -2.60em 0em 0em rgba(255, 255, 255, 0.5),
                 1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.7),
                 2.50em  0.00em 0em 0em rgba(255, 255, 255, 1.0),
                 1.75em  1.75em 0em 0em rgba(255, 255, 255, 0.2),
                 0.00em  2.50em 0em 0em rgba(255, 255, 255, 0.2),
                -1.80em  1.80em 0em 0em rgba(255, 255, 255, 0.2),
                -2.60em  0.00em 0em 0em rgba(255, 255, 255, 0.2),
                -1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow:  0.00em -2.60em 0em 0em rgba(255, 255, 255, 0.2),
                 1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.5),
                 2.50em  0.00em 0em 0em rgba(255, 255, 255, 0.7),
                 1.75em  1.75em 0em 0em rgba(255, 255, 255, 1.0),
                 0.00em  2.50em 0em 0em rgba(255, 255, 255, 0.2),
                -1.80em  1.80em 0em 0em rgba(255, 255, 255, 0.2),
                -2.60em  0.00em 0em 0em rgba(255, 255, 255, 0.2),
                -1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow:  0.00em -2.60em 0em 0em rgba(255, 255, 255, 0.2),
                 1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.2),
                 2.50em  0.00em 0em 0em rgba(255, 255, 255, 0.5),
                 1.75em  1.75em 0em 0em rgba(255, 255, 255, 0.7),
                 0.00em  2.50em 0em 0em rgba(255, 255, 255, 1.0),
                -1.80em  1.80em 0em 0em rgba(255, 255, 255, 0.2),
                -2.60em  0.00em 0em 0em rgba(255, 255, 255, 0.2),
                -1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow:  0.00em -2.60em 0em 0em rgba(255, 255, 255, 0.2),
                 1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.2),
                 2.50em  0.00em 0em 0em rgba(255, 255, 255, 0.2),
                 1.75em  1.75em 0em 0em rgba(255, 255, 255, 0.5),
                 0.00em  2.50em 0em 0em rgba(255, 255, 255, 0.7),
                -1.80em  1.80em 0em 0em rgba(255, 255, 255, 1.0),
                -2.60em  0.00em 0em 0em rgba(255, 255, 255, 0.2),
                -1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow:  0.00em -2.60em 0em 0em rgba(255, 255, 255, 0.2),
                 1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.2),
                 2.50em  0.00em 0em 0em rgba(255, 255, 255, 0.2),
                 1.75em  1.75em 0em 0em rgba(255, 255, 255, 0.2),
                 0.00em  2.50em 0em 0em rgba(255, 255, 255, 0.5),
                -1.80em  1.80em 0em 0em rgba(255, 255, 255, 0.7),
                -2.60em  0.00em 0em 0em rgba(255, 255, 255, 1.0),
                -1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow:  0.00em -2.60em 0em 0em rgba(255, 255, 255, 0.2),
                 1.80em -1.80em 0em 0em rgba(255, 255, 255, 0.2),
                 2.50em  0.00em 0em 0em rgba(255, 255, 255, 0.2),
                 1.75em  1.75em 0em 0em rgba(255, 255, 255, 0.2),
                 0.00em  2.50em 0em 0em rgba(255, 255, 255, 0.2),
                -1.80em  1.80em 0em 0em rgba(255, 255, 255, 0.5),
                -2.60em  0.00em 0em 0em rgba(255, 255, 255, 0.7),
                -1.80em -1.80em 0em 0em rgba(255, 255, 255, 1.0);
  }
}

待ち時間のローディングサンプル2

何にでも合いそうなローディングサンプルです。前回のローディングサンプルに続き、こちらもHTML5 / CSS3 のみで作成しています。
somegoro.hatenablog.com
画像やjavascriptは使用していませんので、とっても簡単にアプリに取り込むことが出来ます。










<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="sample2.css">
</head>
<body>
<div class="load-container load-animation">
  <div class="loader"></div>
</div>
</body>
</html>
@charset "utf-8";

.load-container {
    width: 200px;
    height: 200px;
    background: rgba(33, 150, 243, 1);
    position: absolute;
}
.loader {
  margin: calc((200px - 100px) / 2) auto;/* (parent width - width) / 2 */
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(to right, white 10%, transparent 42%);
  animation: load-animation 1.4s infinite linear;
  transform: translateZ(0);
}
.loader:before {
  width: 50%;
  height: 50%;
  background: white;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.loader:after {
  background: rgba(33, 150, 243, 1);
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@keyframes load-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}