タグ スピナー
人気順 10 users 50 users 100 users 500 users 1000 usersHTMLで簡単に実装できるアニメーションで動くスピナー、カラー・サイズ・スピードのカスタマイズも簡単 -HTML-SpinnerElem
2024/07/31
7 users
アニメーションgif
アニメーション
HTML
カスタマイズ
HTMLで簡単に実装でき、カスタマイズも可能なアニメーションで動くスピナーを紹介します。アニメーションGIFだと、カスタマイズはほぼ不可能ですが、このスピナーだとさまざまなカスタマイズができます。 外部ファイルとしてJavaScriptを記述し、あとはHTMLで簡単に実装でき、カスタマイズもHTMLで簡単にカラー・サイズ... 続きを読む
Webやスマホアプリに最適なSVGアニメーションのスピナー！ 超軽量サイズで、くるくる快適に動くぞ -SVG Spinners
2022/07/14
17 users
SVG
SVGアニメーション
コピペ
アニメーション
web
商用プロジェクトでも完全に無料、コピペで簡単に利用できるSVGアニメーションのスピナーを紹介します。よく見かけるものから変わったものまで、さまざまなスピナーが揃っており、スピナーの素材として重宝すると思います。 SVGのスピナーのほとんどは、300-2500バイトの超軽量サイズ。アニメーションも快適で、くるくる... 続きを読む
「回転式魚干し機」スピナーを作りたい
2021/12/14
8 users
1970年群馬県生まれ。工作をしがちなため、各種素材や工具や作品で家が手狭になってきた。一生手狭なんだろう。出したものを片付けないからでもある。性格も雑だ。もう一生こうなんだろう。（動画インタビュー） 前の記事：「辞表を叩きつける」をとりあえずパスケースで実現 ＞ 個人サイト 妄想工作所 汝、あこがれの装... 続きを読む
『ブレードランナー2049』 予告編公開。飛ぶスピナー、夜景とネオンと未来建造物、銃撃戦と爆発も特盛り - Engadget 日本版
2017/05/08
48 users
ネオン
夜景
銃撃戦
デッカード
ブレードランナー2049
ワーナーがこの秋に公開を控えた映画『ブレードランナー 2049』の予告編を公開しました。 昨年の初公開映像は新旧主人公のK(ライアン・ゴズリング)とデッカード(ハリソン・フォード)が対面する静かな場面でしたが、今回の予告編は雨に濡れたネオンと未来建造物の夜景、飛び交うスピナー(空飛ぶ自動車)、ぬるっと製造されるレプリカント(人造人間)と創造者、ヒロインの意味ありげな台詞に葛藤する主人公など、いかに... 続きを読む
ロード時のスピナーとプログレスバー、どう使い分ける？ | UX MILK
2017/01/16
53 users
プログレスバー
UX MILK
ロード時
この記事はUX Movementからの翻訳転載です。配信元または著者の許可を得て配信しています。 UX Movement - Progress Bars vs. Spinners: When to Use Which (2016-11-15) お店で誰かに商品の場所を尋ねたとして、その相手がただそこに立ったままだったとしたらどう思うでしょうか。きっとイライラして、その場を立ち去りますよね。同じよう... 続きを読む
ダウンロード時などに表示される「プログレスバー vs. スピナー」。どちらをどう使うのが「正しい」のか？｜SeleQt【セレキュト】
2016/11/22
13 users
プログレスバー
SeleQt
セレキュト
本稿
店員
もしお店で商品の場所を誰かに聞いて、店員がそこに立っているだけだったらどう感じるでしょうか？おそらくイライラして立ち去るでしょう。 これと同じようにユーザーはスクリーン上で長時間スピナーを見ているとき、同じ心理状況になっているかもしれませんよ？ そこで本稿では、プログレスバーとスピナーを使うべきシーンを説明します。もしWebサイトやアプリにプログレスバーとスピナーのどちらを設置するべきか悩んだ時、... 続きを読む
実装はとっても簡単！アニメーションが気持ちよく、デザインもかわいい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種類、レ...記事の続きを読む 続きを読む
【Splatoon】ブキカテゴリー「スピナー」
2015/08/03
31 users
Splatoon
www.nintendo.co.jp
■本文 Wii U 『Splatoon』 公式ホームページ http://www.nintendo.co.jp/wiiu/agmj/index.html 公式ツイッター https://twitter.com/SplatoonJP 続きを読む
実装は超簡単！デザインがかわいく、アニメーションもかわいい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のアニメーションを使ってスピナーを実現しています。 一例。四角... 続きを読む
Twitter BootStrap に追加できる５つのコンポーネントパック「FuelUX」:phpspot開発日誌
2012/10/22
49 users
データグリッド
Twitter Bootstrap
かなり
Fuel UX Twitter BootStrap に追加できる５つのコンポーネントパック「FuelUX」 コンボボックス、データグリッド、ピルボックス、検索、スピナー等のコンポーネントがセットになって配布されています。 どのコンポーネントも元がいいだけにかなりクールなデザインになっています。 ますますサイト作りがリッチに、そして楽しくなりそうです 関連エントリ Twitter Bootstrap... 続きを読む
画像もFlashも無し！ スタイルシートでローディング時のスピナーを生成する -CSS load.net | コリス
2011/09/29
193 users
コリス
Flash
CSS3アニメーション
ローディング時
スマートフォン用のサイトにも設置できる、CSS3アニメーションを使ったローディング時のスピナーを作成できるオンラインサービスを紹介します。 CSS load.net スピナーは現在のところ8種類あり、それぞれカラー・サイ [...] 続きを読む