『食いっぱぐれない』ためのスキル学習ブログ
> 初心者と学ぶ!実践Photoshop講座 <

CSSでローディングアニメーションを作る方法

デモ

 

 

コード

HTML
<div class="loading-bar loading"></div>

CSS
.loading-bar{
-webkit-animation:width-0to100 1s infinite ease-out;
background:#a8a8a8;
height:5px;
}

@-webkit-keyframes width-0to100{
0%{width:0;}
100%{width:100%;}
}
 

HTML
<div class="loading-circle loading"></div>

CSS
.loading-circle{
-webkit-animation: rotate-r .9s infinite linear;
border:3px solid #a8a8a8;
border-radius:50%;
border-right-color: transparent;
border-right-width: 1px;
box-sizing: border-box;
position:relative;
height: 40px;
width: 40px;
}

@-webkit-keyframes rotate-r{
0% { -webkit-transform: rotate(0); }
100%{ -webkit-transform: rotate(360deg); }
}
こちらはHTMLとCSSだけなので、ローディング自体はjsで実装する必要があります
参考 ページ読み込み中にローディング画面を表示するGimmick log

コメントを残す

メールアドレスが公開されることはありません。