タグ スピナー
人気順 5 users 10 users 100 users 500 users 1000 usersロード時のスピナーとプログレスバー、どう使い分ける？ | UX MILK
2017/01/16
53 users
プログレスバー
UX MILK
ロード時
この記事はUX Movementからの翻訳転載です。配信元または著者の許可を得て配信しています。 UX Movement - Progress Bars vs. Spinners: When to Use Which (2016-11-15) お店で誰かに商品の場所を尋ねたとして、その相手がただそこに立ったままだったとしたらどう思うでしょうか。きっとイライラして、その場を立ち去りますよね。同じよう... 続きを読む
実装はとっても簡単！アニメーションが気持ちよく、デザインもかわいいCSSで実装された軽量スピナー -CSSPIN | コリス
2016/11/22
89 users
コリス
ローディング時
アニメーション
実装
コンテンツ
ページやコンテンツのローディング時によく使われる、アニメーションが気持ちよく、デザインもかわいいCSSで実装されたスピナーを紹介します。 実装はdivひとつのミニマルなHTMLで、とっても簡単です。 CSSPIN CSS ...記事の続きを読む 続きを読む
[CSS]レトロなデザインがいいね！CSSアニメーションで実装されたローディング用のスピナー | コリス
2015/08/09
71 users
コリス
CSS
CSSアニメーション
ローディング用
全部
画像やJavaScriptは無し、それぞれdivタグ一つとCSSアニメーションで実装されたシンプルでかっこいいローディング用のスピナーを紹介します。 CSS Loading Spinners スピナーは全部で12種類、レ...記事の続きを読む 続きを読む
実装は超簡単！デザインがかわいく、アニメーションもかわいいCSSで実装された軽量スピナー | コリス
2015/05/19
143 users
head
コリス
Step
link rel
ローディング時
ページのローディング時によく使われる、デザインがかわいく、アニメーションもかわいいCSSで実装されたスピナーを紹介します。 divひとつのミニマルなHTMLで、簡単に実装できます。 スピナーの実装 実装は、簡単です。 「弾むボール」を例に、説明します。 Step 1: 外部ファイル 各スピナーに用意されているCSSファイルを外部ファイルとして記述します。 <head> ... <link rel=... 続きを読む
[CSS]アイコンのデザインに合ったかわいい動きをclassを加えるだけで実装できるスタイルシート -Font Awesome Animation | コリス
2014/02/26
114 users
コリス
class
Chr
CSS
GitHub
classを加えるだけでさまざまなアイコンが利用できるFont Awesomeを使って、各アイコンのデザインに合ったかわいい動きをアニメーションで与えるスタイルシートを紹介します。 ベルはリンリン♪、いいねは上下に、スピナーはぐるぐる動きます。 Font Awesome Animation Font Awesome Animation -GitHub 実際の動作は、下記ページで楽しめます。 Chr... 続きを読む
SpinKit - 凄いテクニック。CSS3を使った各種スピナー|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ
2013/12/18
79 users
一例
アニメーションgif
アニメーション
ユーザ
エンジニア
CSS3だけで作れちゃうのが凄いですね！ 処理中にユーザがストレスを感じないように表示されるスピナー。最も簡単なのはアニメーションGIFを表示することかなと思いますが、背景色を微妙に違ったり、大きさを適切に考えないといけないなど画像だけに扱いがちょっと面倒に感じることがあります。 そこで使ってみたいのがSpinKitです。なんとCSS3のアニメーションを使ってスピナーを実現しています。 一例。四角... 続きを読む
画像もFlashも無し！ スタイルシートでローディング時のスピナーを生成する -CSS load.net | コリス
2011/09/29
193 users
コリス
Flash
CSS3アニメーション
ローディング時
スマートフォン用のサイトにも設置できる、CSS3アニメーションを使ったローディング時のスピナーを作成できるオンラインサービスを紹介します。 CSS load.net スピナーは現在のところ8種類あり、それぞれカラー・サイ [...] 続きを読む