TIPS & NOTE ページ読み込み中。ローディングアニメーションを入れてみよう。 | Little Things
たくさんの情報を発信しているサイト。 せっかく更新した記事も、ページの読み込みが遅いと見ている側はストレスに・・ 表示の遅いサイトは、それだけでユーザーがさよならしてしまうことも。 表示速度が遅くなる要因は複雑。jsやcssなどコードの量だけでなく、表示させる画像のサイズとか枚数とか・・ファイルの読み込みの数、要するにリクエストとレスポンスの数。 同時多発的なアクセス数の問題、WEBサーバのスペックの問題、さらには使う人のネット環境も・・ もうなにから改善したらいいのやら。いっそ全部テキストにしてしまえ。装飾などいらん。画像もいらん。心が折れてそんな境地に陥ることもしばしばですが・・ できることから改善していきながら、快適に見てもらうための工夫も必要なのかも。 そんなわけで、画像をたくさん読み込んでいるこのサイト。読み込みに時間がかかるページがちらほら出てきてしまいましたので・・読み込み完
[CSS]アニメーションの動きもデザインも新しくて気持ちいい！コピペで実装できるローディングスピナーのまとめ
.loader-1 .loader-outter { position: absolute; border: 4px solid #f50057; border-left-color: transparent; border-bottom: 0; width: 100%; height: 100%; border-radius: 50%; -webkit-animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite; animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite; } .loader-1 .loader-inner { position: absolute; border: 4px solid #f50057;
![[CSS]アニメーションの動きもデザインも新しくて気持ちいい！コピペで実装できるローディングスピナーのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/c73c8f6011ffdcbf5db8a38badef92257137a98c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201703%2F2017071810.png)
Single Element CSS Spinners
.load1 .loader, .load1 .loader:before, .load1 .loader:after { background: #ffffff; -webkit-animation: load1 1s infinite ease-in-out; animation: load1 1s infinite ease-in-out; width: 1em; height: 4em; } .load1 .loader { color: #ffffff; text-indent: -9999em; margin: 88px auto; position: relative; font-size: 11px; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0
[JS]かなりかっこいいデザインのローディング用アニメーションを生成するスクリプト -Sonic
HTML5 Canvasを使って、ローディング用のアニメーションを作成する超軽量（約3K）のスクリプトを紹介します。 デモページ Sonicの実装 Square（矩形）とCircle（円形）を例に実装方法を紹介します。 外部ファイル 当スクリプトを外部ファイルとして指定します。 <script src="sonic.js"></script> JavaScript: Square（矩形） あとは、JavaScriptで記述するだけです。 var square = new Sonic({ width: 100, height: 100, fillColor: '#000', path: [ ['line', 10, 10, 90, 10], ['line', 90, 10, 90, 90], ['line', 90, 90, 10, 90], ['line', 10, 90, 10, 10]
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
