テキストとアニメーションでシンプルにローディング中を明示する

Result

テキストでローディング。シンプルで実装しやすい点が魅力です

css

h1 {/*テキスト装飾*/
  color: rgba(255, 255, 255, 0.3);
  font: 900 800% Baskerville, 'Palatino Linotype', Palatino, serif;
}

@keyframes loading {/*アニメーション設定*/
  from {
    max-width: 0;
  }
}
h1:before {/*疑似要素を作って重ね、テキストと同じ内容に設定したdata-content属性の値を取り出してアニメーション*/
  content: attr(data-content);
  position: absolute;
  overflow: hidden;
  max-width: 100%;
  color: rgba(255, 255, 255, 0.6);
  animation: loading 10s linear infinite;
}

html

<h1 data-content="Loading...">Loading...</h1>

via

CSS loading animation