CSSでリーダー (記号) をアニメーション

2018年12月8日

この記事は約 3 分で読めます。

4

リーダー (記号) をCSSで
アニメーション表示します。

そもそも
Loading
みたいに使う物のようですが、
文章に使っても面白いかと思います。

CSSは以下のように書きます。

.loading {
-webkit-animation: extend 3s steps(3, end) infinite;
animation: extend 3s steps(3, end) infinite;
display: inline-block;
overflow: hidden;
vertical-align: bottom;
}
.loading:before {
content: "...";
}
@-webkit-keyframes extend {
0% {
width: .25em;
}
100% {
width: 1em;
}
}
@keyframes extend {
0% {
width: .25em;
}
100% {
width: 1em;
}
}

HTML は以下のように書きます。

なるほど<span class="loading"></span>
  • (例)なるほど
  • (例)そして、山へ向かった
  • (例)そんな事もあったな
  • (例)彼はボソッとつぶやいた
  • (例)Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus

 

See the Pen Simple Loading Text Animation by Chris Smith (@chris22smith) on CodePen.

 

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました

 

CSSでリーダー (記号) をアニメーション