東京ガスのログイン時のローディングがとんでもない見せ方をしていた→仕様でもミスでもなくChromeの拡張機能が悪さをしていた

2023/02/07 126 users 東京ガス Chrome ミス 拡張機能 仕様

こびと @kobitoCode 「えっなにこれ！？何が起きてるの！？えっ！？えっ！？」と感じている間に5秒経ち、「人はロードに2秒かかったら離脱します」という固定概念をぶち壊せる可能性を感じた twitter.com/ckazu/status/1… 2023-02-06 16:00:47 続きを読む

「ゲームのロード」のために“主人公をわざと転ばせる”PS1ゲームの工夫が話題を集める。意外なかたちで紐解かれる真実 - AUTOMATON

2022/10/17 504 users AUTOMATON つきもの 一例 RPG プレイヤー

ゲームが動作するうえでは、データを読み出すローディングがつきもの。開発者は、ロード時間をなるべく短くしたり、プレイヤーに感じさせづらくしたりと、さまざまな工夫を施しているようで、そうした工夫の一例がSNS上で注目を集めている。 TwitterユーザーMIYAKE氏は10月17日、PS1向けに1998年に発売されたRPG『どきど... 続きを読む

待機状態のUIについて整理してみる(デザイン編)

2021/05/05 141 users Introduction 待機状態 デザイン編 既存 概要

Introduction 概要 待機状態 UI のデザインについての記事です。 待機状態 UI というのは、ローディングや情報の処理待ち時に用いられる UI のことです。 ここで待機状態の UI と読んでいる理由は、各デザインシステムやガイドラインなどで言い方が違うため。 この記事ではデザインガイドラインや既存のデザインシステム... 続きを読む

グーグルが発表した新ウェブ技術「Portals」とは--「Google Chrome」向けのウェブナビゲーションシステム - ZDNet Japan

2019/05/20 326 users Portals Portal 新風 ウェブページ iframe

Googleは米国時間5月7日、年次開発者会議「Google I/O 2019」で、ウェブページのローディングやナビゲーションに新風を吹き込む「Portals」と呼ばれる新たなテクノロジーを発表した。 GoogleによるとPortalsは<portal>という新たなHTMLタグを使って動作するという。このタグの動作は、従来からある<iframe>タグとよく似... 続きを読む

簡単で便利なのが揃ってる！CSSで実装されたローディング・スピナーのアニメーションのまとめ | コリス

2019/01/17 66 users コリス class ローディングアニメーション CSS まとめ

シンプルなローディングのアニメーションから、複雑で楽しいローディングのアニメーションまで、CSSで実装されたローディングアニメーションを紹介します。 ほとんどが外部ファイルとclassを加えるだけの簡単実装で、いざという...記事の続きを読む 続きを読む

Vue + Vue Router + Vuex + Laravel チュートリアル（全16回）を書きました。 - Qiita

2019/01/14 629 users Qiita CSRF Laravel Vuex Vue

学べること Vue.js と Laravel を組み合わせる ルーティングライブラリ Vue Router を取り入れる 状態管理ライブラリ Vuex を取り入れる タブやローディングを作る Vue.js + Laravel の構成でクッキー認証と CSRF 対策を行う SPA でエラー処理を行う こんな人に読んでほしい Vue や Laravel について、 入門書を読んだあ... 続きを読む

次世代 Web カンファレンス 2019 アウトラインメモ | Web Scratch

2019/01/13 56 users アウトラインメモ Web scratch 次世代 http

次世代 Web カンファレンス - connpassに参加してきたのでメモ。 パフォーマンス 登壇者 @1000ch likr @sisidovski 記録 ローディング周り 1000ch: WebKitのレンダリングの様子の動画を見たのが興味を持ったきっかけ 1000ch: HTTP/2になってきてローディングの通信を気にすることは減った? sisidovski: 同時接続数は気に... 続きを読む

React におけるローディングの状態管理について - freee Developers Blog

2018/12/05 69 users React ダイアログ コンポーネント 開閉 要件

エンジニアの @_tohashi です。freee developers adevent calender 5 日目をやっていきます。 React などを使用した UI コンポーネントの実装、特に状態をどこで管理するかというのは実装者やアプリケーションの要件によって分かれがちなポイントであると思っていて、例としてはフォームの入力値、ダイアログの開閉、ス... 続きを読む

CSSの裏技20選を一挙紹介！【必見！コツをつかんで効率的にWebサイトをデザインする】｜SeleQt【セレキュト】

2017/06/12 91 users SCSS SeleQt less セレキュト レンダリング

フロント・エンドの開発はセレクター選択と最小コードによる迅速なローディングとレンダリングにおいて、ますます効率性に特化しています。 LessやSCSSといったプレ・プロセッサは仕事をする上で役立ちますが、自然なやり方で最小かつ手早くCSSを記述する方法は数多くあります。 このガイドは20ProCSSをカバーしており、レイアウト全体でスタイルの流れを標準化し、効率的なだけでなく多くの共通した問題も解... 続きを読む

JavaScript - AJAX通信をするときはタイムアウト処理を必ず入れてほしい（切実） - Qiita

2015/07/04 182 users Qiita ICS 鹿野 切実 Ajax通信

こんにちは、ICSの鹿野です。 AJAX通信をするとき、きちんとタイムアウト処理を入れていますか？ スマートフォンやタブレットでWebサイトを閲覧しているとき、地下に入ったりして通信ができなくなるというケースは頻繁に起こります。そんなとき、きちんとAJAX通信のタイムアウト処理をしていないと、場合によってはいつまで経ってもローディングが終わらず、ユーザーが離脱してしまうということが起こります。質の... 続きを読む

PreloadJSで「悩ませないローディング」の作り方―CreateJS勉強会/蔵下発表資料 – ICS LAB

2015/02/17 119 users ICS LAB CreateJS勉強会 CreateJS

こんにちは、ICS蔵下です。 先日行われたCreateJS勉強会 (第5回)にてPreloadJSで「悩ませないローディング」の作り方というテーマでライトニングトークさせていただきました。時間の関係でお伝えできなかった部分も含め本記事でまとめました。みなさまのローディング作りのご参考になれば幸いです。 PreloadJSとは? PreloadJSとは、CreateJSのライブラリモジュールの一つで... 続きを読む

Pythonでローディングのぐるぐるを表示する - CAMPHOR- Tech Blog

2014/12/21 56 users npm CAMPHOR Python morishin127

この記事はCAMPHOR- Advent Calendar 2014の21日目の記事です。 こんにちは、@morishin127です。 今日はPythonで処理中のぐるぐるを表示する方法を紹介します。 これです。 npmこの記事はCAMPHOR- Advent Calendar 2014の21日目の記事です。 こんにちは、@morishin127です。 今日はPythonで処理中のぐるぐるを表示す... 続きを読む

JavaScriptとCSSは不要！SVGの気持ちいいアニメーションで作られた超軽量のかわいいローディング -SVG Loaders | コリス

2014/12/10 129 users コリス SVG Step SVGファイル CSS

JavaScriptもCSSも画像も使用せず、SVGで実装された軽快で気持ちいいアニメーションで動くローディングのアイコンを紹介します。 ページに実装する時もJavaScript/CSSは必要ありません。簡単なHTMLでOK！ デモページ SVG Loadersの使い方 使い方は、簡単！ Step 1: SVGファイルをダウンロード 下記ページの右サイドの「Downlaod ZIP」から、SVGフ... 続きを読む

声に出して読みたい Android のライブラリ - その1 - Qiita

2014/09/12 76 users Qiita Square picasso ライブラリ 加工

声に出して読みたいObjective-Cのライブラリ8種(2014.7) に触発されて書いてみます。 今回は Square 社製ライブラリを見ていきます。 Picasso https://github.com/square/picasso/ 安心と信頼の Square 社製のライブラリです。画像のローディングとキャッシュについて面倒を見てくれますが、画像の加工についても扱っています。 Contex... 続きを読む

[CSS]スタイルシートで実装する気持ちいいリズムで弾むローディングのアニメーション | コリス

2013/03/21 67 users コリス Facebook ディレイ くらげ CSS

昨日、Facebookで紹介した「クラゲ」もCSSアニメーションとは思えない美しさでした。 こちらもなかなか楽しい、軽快なリズムで弾むローディングのアニメーションを実装するスタイルシートを紹介します。 デモページ 実装はHTML+CSSです。 もちろん、JavaScriptもFlashも使用されていません。 HTML spanを増やすと玉が増えます。増やした分のディレイをCSSで設定します。 <d... 続きを読む

ワイヤーフレーム制作のための素材セット「The Ultimate Wireframe UI Kit」 | DesignDevelop

2012/08/05 330 users ワイヤーフレーム DesignDevelop ピッ 精度 手段

サイト制作の前に制作するワイヤーフレーム。サイトの構成や構造をわかりやすく事前に見せるためには非常に有効な手段ですが、作る精度によってはかなりの時間を費やしてしまうこともあると思います。今日紹介するのはそんなワイヤーフレームを制作する時間を短縮してくれる、素材セット「The Ultimate Wireframe UI Kit」です。 ローディング、ボタン、グローバルメニューなどなど、サイトにひつよ... 続きを読む

ソースコピーで簡単に使えるCSS3とjQueryで作るローディングページ作りました | HTML5でサイトをつくろう

2012/07/04 289 users CSS3とjQuery HTML5 ローデ jQuery 実際

以前の記事で「画像を使わないでCSS3で様々なローディング用アニメーションをつくってみよう」という形でCSS3でローディングアイコンを作成しました。 しかしあのままでは動きませんので今回は、jQueryを利用して実際にサイトでローディングを行う際のサンプルを作成しました。 サイトでローディングを使うと言っても、使用イメージがつかないと思いますので、まずはサンプルをご覧ください。 今回作成するローデ... 続きを読む

超カッコいいローディングを実現できるjQueryプラグイン「Percentage Loader」:phpspot開発日誌

2012/06/18 154 users jQueryプラグイン phpspot開発日誌 実装

超カッコいいローディングを実現できるjQueryプラグイン「Percentage Loader」 2012年06月18日- Percentage Loader 超カッコいいローディングを実現できるjQueryプラグイン「Percentage Loader」 次のようなカッコいいローディングが簡単に実装できます。Canvas描画なのでサイズ変更等も自由にできるみたい 超シンプルに実装可能です なんと... 続きを読む

画像を使わないでCSS3で様々なローディング用アニメーションをつくってみよう | HTML5でサイトをつくろう

2012/06/13 490 users ローディング用アニメーション CSS3 HTML5 ギミック

スマートフォンのように読み込みに時間がかかるデバイスの場合や、ギャラリーサイトのように複数の画像を読み込む場合、大掛かりなギミックのJSを読み込む場合など、最近はFLASHでなくてもローディングを使用しているサイトをよく見かけます。 今回はそんなローディング用アニメーションをCSS3のグラデーションやアニメーションを使って、画像を使わずに制作する方法を、様々なローディング用アニメーションの種類とと... 続きを読む

[JS]Responsiveデザイン用のスタイルシートファイルのロードを最適化するスクリプト -eCSSential | コリス

2012/06/11 60 users コリス スクリプト 優先順位 ウェブサイト 超軽量

Responsiveデザイン用に用意した複数のスタイルシートファイルのロードを最適化する超軽量（2KB）のスクリプトを紹介します。 スタイルシートファイルのロードの注意点 eCSSentialとは eCSSentialの使い方 スタイルシートファイルのロードの注意点 スタイルシートファイルのローディングの最適化、あるいは優先順位をつける方法は非常に難しいです。ウェブサイトがクリーンなロードをするた... 続きを読む

HTML5演出に最適な画像読み込み管理のJSライブラリ「LoadManager.js」 | ClockMaker Blog

2012/02/14 550 users JSライブラリ ClockMaker Blog 前者 見栄え

HTMLで画像を読み込むとき、HTMLのimgタグだけだと不恰好となりがちですが、読み込みを管理すれば見栄えも整いますというデモとJSライブラリを作ってみました。次の2つのデモを見比べて何が違うのか確認ください。 デモ (通常のimgタグ) デモ (LoadManager.jsを使用) デモの違いとは 前者は画像がバラバラとインターレース的に読み込まれ、後者は読み込み終わるまでローディングが表示さ... 続きを読む

おHTML5｜2012年 ブラウザで祝うお正月

2011/12/31 174 users ブラウザ お正月 ダルマ ご挨拶 初日の出

ブラウザから新年のご挨拶！お正月気分を味わえる、ちょっと贅沢なコンテンツ集。ブラウザ凧揚げ ブラウザをドラッグして 上手に凧を上げてみよう。 リズム餅つき アドレス欄を流れる □と■が合わさったら タイミングを合わせて クリックしよう！ ローディング初日の出 いつもの見慣れた ローディングが、 初日の出になりました。 ラジオだるま だるまの目が ラジオボタンに。 目に墨を入れて、 願掛けしよう。 ... 続きを読む

CSSだけで必殺技を作るコンテストのクオリティーが高すぎる件 | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

2011/12/13 500 users KAYAC DESIGNER クオリティー spec CSS

jsdo.itで「SPEC」というコーディングコンテストを開催しています。 今回のテーマは以下の二つ。 CSSだけを使って必殺技の演出を加えてください ローディングの演出を考えてください 「こんなマニアックなテーマだけど参加してくれる人がいるのだろうか…！」と心配していたのも杞憂に終わり、続々とすごい作品が投稿されています。 開催期間中ですが、ぼくが個人的に「これは！」と思った作品をピックアップし... 続きを読む

[CSS]あなたのウェブページにキーフレームを使ったアニメーションをちょこっと適用するチュートリアルのまとめ | コリス

2011/09/19 81 users 意訳 ヘッダ コリス 透過PNG ウェブページ

キーフレームを使ったCSS3アニメーションの入門として、ウェブページにちょっとしたアニメーションを適用するチュートリアルを紹介します。 下記は各ポイントの意訳です。 CSS3アニメーションとは アニメーションでドロップダウンするヘッダ 透過PNGを使ったカラーアニメーション 回転するローディングのアニメーション フォームのエラーをアニメーションで強調 フォームのエラーをアニメーションで強調:その2... 続きを読む

Ajaxスタイルのローディングも画像を使わずピュアCSSで実現するデモ:phpspot開発日誌

2011/05/30 53 users Ajaxスタイル phpspot開発日誌 ピュアCSS デモ

Ajax Style Loading Animation in CSS3 ( no Images ) - nikesh.me Ajaxスタイルのローディングも画像を使わずピュアCSSで実現するデモ。 マシンにもよるかもしれませんが、なんともなめらかに動作してくれます。 デモページ 画像サイズは最近のブロードバンド環境では微々たるものとはいっても、ピュアCSSのバイト数にはかなわないと思います。 ペ... 続きを読む