{"componentChunkName":"component---src-modules-datocms-post-page-page-tsx","path":"/posts/48","result":{"data":{"post":{"title":"「Halogen」16種のロード中アニメを表示するReactコンポーネント","author":{"name":"suin","images":{"r32":{"src":"https://www.datocms-assets.com/29850/1591833290-avatar512.jpg?auto=format&fm=png&h=32&mask=ellipse&w=32","srcSet":"https://www.datocms-assets.com/29850/1591833290-avatar512.jpg?auto=format&dpr=1&fm=png&h=32&mask=ellipse&w=32 1x,\nhttps://www.datocms-assets.com/29850/1591833290-avatar512.jpg?auto=format&dpr=1.5&fm=png&h=32&mask=ellipse&w=32 1.5x,\nhttps://www.datocms-assets.com/29850/1591833290-avatar512.jpg?auto=format&dpr=2&fm=png&h=32&mask=ellipse&w=32 2x,\nhttps://www.datocms-assets.com/29850/1591833290-avatar512.jpg?auto=format&dpr=3&fm=png&h=32&mask=ellipse&w=32 3x"},"r48":{"src":"https://www.datocms-assets.com/29850/1591833290-avatar512.jpg?auto=format&fm=png&h=48&mask=ellipse&w=48","srcSet":"https://www.datocms-assets.com/29850/1591833290-avatar512.jpg?auto=format&dpr=1&fm=png&h=48&mask=ellipse&w=48 1x,\nhttps://www.datocms-assets.com/29850/1591833290-avatar512.jpg?auto=format&dpr=1.5&fm=png&h=48&mask=ellipse&w=48 1.5x,\nhttps://www.datocms-assets.com/29850/1591833290-avatar512.jpg?auto=format&dpr=2&fm=png&h=48&mask=ellipse&w=48 2x,\nhttps://www.datocms-assets.com/29850/1591833290-avatar512.jpg?auto=format&dpr=3&fm=png&h=48&mask=ellipse&w=48 3x"}},"bio":"好き: TypeScript, DDD, OOP／#YYTypeScript の主催者／Qiita 4位／株式会社クラフトマンソフトウェア取締役／『実践ドメイン駆動設計』邦訳レビュア／#分報 考案者／Web自動テストShouldBeeを開発"},"date":"2015年10月18日","tags":["React"],"category":"プログラミング","body":"\"image.png\n

Reactを使ってシングルページアプリケーションを作成すると、
\nサーバと非同期の通信をすることが増えます。

\n

ロード中や通信中であることをUIにちゃんと表現できないと、
\nユーザに「バグってる？」と思われたりとユーザ体験を壊すことがあります。

\n

Halogenは、ローダーアニメーションを提供してくれるReactコンポーネントです。

\n

\n > インストール方法インストール方法

\n
\n
\nshell
\n
npm install halogen --save\n
\n
\n

\n > 使い方使い方

\n

使い方はhalogenパッケージから使いたいローダーをインポートするだけです。

\n
\n
\njsx
\n
import React from \"react\";\nimport ReactDom from \"react-dom\";\nimport {PulseLoader} from \"halogen\";\n\nReactDom.render(\n  <div>\n    <PulseLoader color=\"#26A65B\" />\n  </div>,\n  document.getElementById(\"demo1\")\n);\n
\n
\n

\n > デモデモ

\n
\"demo1.gif
\n\n

ローダーは16種類提供されています。

\n
    \n
  1. PulseLoader
    2. \n
  2. RotateLoader
    3. \n
  3. BeatLoader
    4. \n
  4. RiseLoader
    5. \n
  5. SyncLoader
    6. \n
  6. GridLoader
    7. \n
  7. ClipLoader
    8. \n
  8. FadeLoader
    9. \n
  9. ScaleLoader
    10. \n
  10. SquareLoader
    11. \n
  11. PacmanLoader
    12. \n
  12. SkewLoader
    13. \n
  13. RingLoader
    14. \n
  14. MoonLoader
    15. \n
  15. DotLoader
    16. \n
  16. BounceLoader
    17. \n
\n

color属性を指定すると、好きな色に変更することができます。

\n
\"demo4.gif
\n\n

size属性でローダーのサイズの変更もできます。

\n
\"demo3.gif
\n\n

Halogenは、ローダーを自作するのは面倒、というときにサクッと導入できるのがいいところです。

\n\n"}},"pageContext":{"id":"DatoCmsPost-5142985-ja","description":"Reactを使ってシングルページアプリケーションを作成すると、 サーバと非同期の通信をすることが増えます。 ロード中や通信中であることをUIにちゃんと表現できないと、 ユーザに「バグってる？」と思われたりとユーザ体験を壊すことがあります。 Halogenは、ローダーアニメーションを提供してくれるReactコンポーネントです。 インストール方法 使い方 使い方はhalogenパッケージから使いたいローダーをインポートするだけです。 デモ ローダーは16種類提供されています。 PulseLoader RotateLoader BeatLoader RiseLoader SyncLoader Gri","toc":[{"tag":"h1","depth":1,"href":"#%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E6%96%B9%E6%B3%95","text":"インストール方法","html":"インストール方法"},{"tag":"h1","depth":1,"href":"#%E4%BD%BF%E3%81%84%E6%96%B9","text":"使い方","html":"使い方"},{"tag":"h1","depth":1,"href":"#%E3%83%87%E3%83%A2","text":"デモ","html":"デモ"}],"ogpImageUrl":"https://www.datocms-assets.com/29850/1593190022-pastedimage20200627146.png?fm=png&mark64=aHR0cHM6Ly93d3cuZGF0b2Ntcy1hc3NldHMuY29tLzI5ODUwLzE1OTMxNTQ2MzYtdHJhbnNwYXJlbnQtcGl4ZWwucG5nP3c9NDAwJmg9NjQmZml0PWNyb3AmYmxlbmQ2ND1hSFIwY0hNNkx5OTNkM2N1WkdGMGIyTnRjeTFoYzNObGRITXVZMjl0THpJNU9EVXdMekUxT1RFNE16TXlPVEF0WVhaaGRHRnlOVEV5TG1wd1p6OXRZWE5yUFdWc2JHbHdjMlVtWm0wOWNHNW5KbmM5TWpVMkptZzlNalUyJmJsZW5kLWg9NjQmYmxlbmQteD0wJmJsZW5kLXk9MCZibGVuZC1tb2RlPW5vcm1hbCZtYXJrNjQ9YUhSMGNITTZMeTloYzNObGRITXVhVzFuYVhndWJtVjBMMzUwWlhoMFAzUjRkQzFoYkdsbmJqMXRhV1JrYkdVbE1rTnNaV1owSm5SNGRDMW1iMjUwUFhOaGJuTXRjMlZ5YVdZbE1rTmliMnhrSm5SNGRDMWpiMnh2Y2oweU1qRTRNVFltZEhoME5qUTlZek5XY0dKbkpuUjRkQzF6YVhwbFBUTXdKbWc5TmpRJm1hcmsteD02NCZtYXJrLWFsaWduPW1pZGRsZSUyQ2xlZnQ&mark-align=bottom%2Cleft&mark-x=100&mark-y=496&blend64=aHR0cHM6Ly93d3cuZGF0b2Ntcy1hc3NldHMuY29tLzI5ODUwLzE1OTMxNTQ2MzYtdHJhbnNwYXJlbnQtcGl4ZWwucG5nP3c9MTIwMCZoPTYzMCZmaXQ9Y3JvcCZtYXJrNjQ9YUhSMGNITTZMeTkzZDNjdVpHRjBiMk50Y3kxaGMzTmxkSE11WTI5dEx6STVPRFV3THpFMU9UTXhOVEE1TkRBdFkzSmhablJ6YldGdUxUQXhMbkJ1WncmbWFyay1hbGlnbj10b3AlMkNjZW50ZXImbWFyay13PTI1MCZtYXJrLXk9ODAmYmxlbmQ2ND1hSFIwY0hNNkx5OWhjM05sZEhNdWFXMW5hWGd1Ym1WMEwzNTBaWGgwUDNSNGRDMWhiR2xuYmoxdGFXUmtiR1VsTWtOalpXNTBaWEltZEhoMExXWnZiblE5YzJGdWN5MXpaWEpwWmlVeVEySnZiR1FtZEhoMExYQmhaRDB4TURBbWRIaDBMV052Ykc5eVBUSXlNVGd4TmlaMGVIUTJORDAwTkVOTlUwZEdjMkl5Wkd4aWRVOUJhbFJGTWpVMmFYVTBORWQxTkRSUGREUTBUemcwTkU5S05VeHBkRFEwUzJrME5FOU1ORFJQYURRMFMxTTJTMGR2TlRaVE5qUTBSMW8wTkV0TVZXMVdhRmt6VkdwbmNsQnFaemRRYW1jMU0ycG5OM3BxWnpRemFtYzNVR3BuTkdjbWRIaDBMWE5wZW1VOU5UVW1kejB4TWpBd0ptZzlOak13JmJsZW5kLW1vZGU9bm9ybWFs&blend-mode=normal","otherPost":{"type":"author","title":"ウェブサービスの請求書の出し方どうすべき？12サービスの請求書を集めて比較してみた","slug":"/posts/54"}}}}