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> |
