JavaScriptでカードローディング処理を実装しよう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

<目次>

実装するもの

今回は、JavaScript(あとCSS)でカードローディング処理の実装方法を学びました。

demoは「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

JavaScriptでアプリ開発 ~環境構築~

必要なファイルは、以下の通りです。

$ tree
.
├── index.html
├── script.js
└── style.css

$ tree

├── index.html

├── script.js

└── style.css

CSS版

CSSでカードローディングのスタイリングをしよう!

ページ(HTML)の作成

最初にページを作成しましょう。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Content Placeholder</title>
  </head>
  <body>
    <div class="card">
      <div class="card-header animated-bg" id="header"> </div>

      <div class="card-content">
        <h3 class="card-title animated-bg animated-bg-text" id="title">
           
        </h3>
        <p class="card-excerpt" id="excerpt">
           
          <span class="animated-bg animated-bg-text"> </span>
          <span class="animated-bg animated-bg-text"> </span>
          <span class="animated-bg animated-bg-text"> </span>
        </p>
        <div class="author">
          <div class="profile-img animated-bg" id="profile_img"> </div>
          <div class="author-info">
            <strong class="animated-bg animated-bg-text" id="name"
              > </strong
            >
            <small class="animated-bg animated-bg-text" id="date"> </small>
          </div>
        </div>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Content Placeholder</title>

</head>

<body>

</h3>

</p>

<strong class="animated-bg animated-bg-text" id="name"

> </strong

</div>

</body>

</html>

このHTMLをブラウザ上で表示すると以下のようになります。

スタイル(CSS)を装飾

次にスタイルを記述しましょう。

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
  box-sizing: border-box;
}

body {
  background-color: #ecf0f1;
  font-family: 'Roboto', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

img {
  max-width: 100%;
}

.card {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  overflow: hidden;
  width: 350px;
}

.card-header {
  height: 200px;
}

.card-header img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.card-content {
  background-color: #fff;
  padding: 30px;
}

.card-title {
  height: 20px;
  margin: 0;
}

.card-excerpt {
  color: #777;
  margin: 10px 0 20px;
}

.author {
  display: flex;
}

.profile-img {
  border-radius: 50%;
  overflow: hidden;
  height: 40px;
  width: 40px;
}

.author-info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 10px;
  width: 100px;
}

.author-info small {
  color: #aaa;
  margin-top: 5px;
}

.animated-bg {
  background-image: linear-gradient(
    to right,
    #f6f7f8 0%,
    #edeef1 10%,
    #f6f7f8 20%,
    #f6f7f8 100%
  );
  background-size: 200% 100%;
  animation: bgPos 1s linear infinite;
}

.animated-bg-text {
  border-radius: 50px;
  display: inline-block;
  margin: 0;
  height: 10px;
  width: 100%;
}

@keyframes bgPos {
  0% {
    background-position: 50% 0;
  }

  100% {
    background-position: -150% 0;
  }
}

100

101

102

103

104

105

106

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {

box-sizing: border-box;

}

body {

background-color: #ecf0f1;

font-family: 'Roboto', sans-serif;

display: flex;

align-items: center;

justify-content: center;

height: 100vh;

overflow: hidden;

margin: 0;

}

img {

max-width: 100%;

}

.card {

box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

border-radius: 10px;

overflow: hidden;

width: 350px;

}

.card-header {

height: 200px;

}

.card-header img {

object-fit: cover;

height: 100%;

width: 100%;

}

.card-content {

background-color: #fff;

padding: 30px;

}

.card-title {

height: 20px;

margin: 0;

}

.card-excerpt {

color: #777;

margin: 10px 0 20px;

}

.author {

display: flex;

}

.profile-img {

border-radius: 50%;

overflow: hidden;

height: 40px;

width: 40px;

}

.author-info {

display: flex;

flex-direction: column;

justify-content: space-around;

margin-left: 10px;

width: 100px;

}

.author-info small {

color: #aaa;

margin-top: 5px;

}

.animated-bg {

background-image: linear-gradient(

to right,

#f6f7f8 0%,

#edeef1 10%,

#f6f7f8 20%,

#f6f7f8 100%

);

background-size: 200% 100%;

animation: bgPos 1s linear infinite;

}

.animated-bg-text {

border-radius: 50px;

display: inline-block;

margin: 0;

height: 10px;

width: 100%;

}

@keyframes bgPos {

0% {

background-position: 50% 0;

}

100% {

background-position: -150% 0;

}

ここまで実装すると以下のようになります。

実はこの段階で、ローディング処理の一部が入っています^^

この波打つ感じは、CSSのanimationとkeyframesを組み合わせて実現しています。コードでは以下の部分ですね。

<-- 
  白く波打つアニメーションを実行
  animationが鍵
 -->
.animated-bg {
  background-image: linear-gradient(
    to right,
    #f6f7f8 0%,
    #edeef1 10%,
    #f6f7f8 20%,
    #f6f7f8 100%
  );
  background-size: 200% 100%;
  animation: bgPos 1s linear infinite;
}

<-- テキストの白い一本線 -->
.animated-bg-text {
  border-radius: 50px;
  display: inline-block;
  margin: 0;
  height: 10px;
  width: 100%;
}

<!-- アニメーションをどう制御するか規定する -->
@keyframes bgPos {
  0% {
    background-position: 50% 0;
  }

  100% {
    background-position: -150% 0;
  }
}

<--

白く波打つアニメーションを実行

animationが鍵

-->

.animated-bg {

background-image: linear-gradient(

to right,

#f6f7f8 0%,

#edeef1 10%,

#f6f7f8 20%,

#f6f7f8 100%

);

background-size: 200% 100%;

animation: bgPos 1s linear infinite;

}

<-- テキストの白い一本線 -->

.animated-bg-text {

border-radius: 50px;

display: inline-block;

margin: 0;

height: 10px;

width: 100%;

}

@keyframes bgPos {

0% {

background-position: 50% 0;

}

100% {

background-position: -150% 0;

}

「こうやれば波打つ感じを実装できること」を知っていれば、コピペでいけそうですね。

JavaScriptの実装

準備が完了したので、カードローディング処理を実装していきましょう。

要素を取得する

画面操作に必要な要素を取得します。

// 要素を取得
const header = document.getElementById('header')
const title = document.getElementById('title')
const excerpt = document.getElementById('excerpt')
const profile_img = document.getElementById('profile_img')
const name = document.getElementById('name')
const date = document.getElementById('date')

const animated_bgs = document.querySelectorAll('.animated-bg')
const animated_bg_texts = document.querySelectorAll('.animated-bg-text')

// 要素を取得

const header = document.getElementById('header')

const title = document.getElementById('title')

const excerpt = document.getElementById('excerpt')

const profile_img = document.getElementById('profile_img')

const name = document.getElementById('name')

const date = document.getElementById('date')

const animated_bgs = document.querySelectorAll('.animated-bg')

const animated_bg_texts = document.querySelectorAll('.animated-bg-text')

カード情報の取得と埋め込み

次に、カードに表示するデータの取得と埋め込み処理を実装します。

// カードデータの取得
function getData() {
  // カード情報を設定
  header.innerHTML =
    '<img src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2102&q=80" alt="" />'
  title.innerHTML = 'Lorem ipsum dolor sit amet'
  excerpt.innerHTML =
    'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore perferendis'
  profile_img.innerHTML =
    '<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="" />'
  name.innerHTML = 'John Doe'
  date.innerHTML = 'Oct 08, 2020'

  // animated-bg/animated-bg-textクラスを除去
  animated_bgs.forEach((bg) => bg.classList.remove('animated-bg'))
  animated_bg_texts.forEach((bg) => bg.classList.remove('animated-bg-text'))
}

// カードデータの取得

function getData() {

// カード情報を設定

header.innerHTML =

'<img src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2102&q=80" alt="" />'

title.innerHTML = 'Lorem ipsum dolor sit amet'

excerpt.innerHTML =

'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore perferendis'

profile_img.innerHTML =

'<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="" />'

name.innerHTML = 'John Doe'

date.innerHTML = 'Oct 08, 2020'

// animated-bg/animated-bg-textクラスを除去

animated_bgs.forEach((bg) => bg.classList.remove('animated-bg'))

animated_bg_texts.forEach((bg) => bg.classList.remove('animated-bg-text'))

}

画像データは、imgixからとってきています。

innerHTMLは、取得したHTML要素内に新たな要素を埋め込むことができます。これで、カードの各々の部分にカードデータが入ります。

指定時間後に処理を実行する

カードローディング処理を実現するために、画面表示後の数秒間はカード情報を表示させたくありません。

そこで、setTimeoutを使いましょう。

// 2.5秒後に表示
setTimeout(getData, 2500)

1 2	// 2.5秒後に表示 setTimeout(getData, 2500)

第一引数に指定したgetDataを2500ミリ秒(2.5秒)後に実行するように設定しました。

これで完成です。

おわりに

今回もCSSが難しかったですね。カードを簡単に作りたいという方は、BootstrapのCardsを使うと良さそうです。

また、CSSでローディング処理 -> JavaScriptでデータ表示の連携は、他のアプリにも応用ができそうですね^^

それでは、また！

JavaScriptまとめ

JavaScript ~ 記事まとめ ~

JavaScript ソースコード

// 要素を取得
const header = document.getElementById('header')
const title = document.getElementById('title')
const excerpt = document.getElementById('excerpt')
const profile_img = document.getElementById('profile_img')
const name = document.getElementById('name')
const date = document.getElementById('date')

const animated_bgs = document.querySelectorAll('.animated-bg')
const animated_bg_texts = document.querySelectorAll('.animated-bg-text')

// カードデータの取得
function getData() {
  // カード情報を設定
  header.innerHTML =
    '<img src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2102&q=80" alt="" />'
  title.innerHTML = 'Lorem ipsum dolor sit amet'
  excerpt.innerHTML =
    'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore perferendis'
  profile_img.innerHTML =
    '<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="" />'
  name.innerHTML = 'John Doe'
  date.innerHTML = 'Oct 08, 2020'

  // animated-bg/animated-bg-textクラスを除去
  animated_bgs.forEach((bg) => bg.classList.remove('animated-bg'))
  animated_bg_texts.forEach((bg) => bg.classList.remove('animated-bg-text'))
}

// 2.5秒後に表示
setTimeout(getData, 2500)

// 要素を取得

const header = document.getElementById('header')

const title = document.getElementById('title')

const excerpt = document.getElementById('excerpt')

const profile_img = document.getElementById('profile_img')

const name = document.getElementById('name')

const date = document.getElementById('date')

const animated_bgs = document.querySelectorAll('.animated-bg')

const animated_bg_texts = document.querySelectorAll('.animated-bg-text')

// カードデータの取得

function getData() {

// カード情報を設定

header.innerHTML =

'<img src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2102&q=80" alt="" />'

title.innerHTML = 'Lorem ipsum dolor sit amet'

excerpt.innerHTML =

'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore perferendis'

profile_img.innerHTML =

'<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="" />'

name.innerHTML = 'John Doe'

date.innerHTML = 'Oct 08, 2020'

// animated-bg/animated-bg-textクラスを除去

animated_bgs.forEach((bg) => bg.classList.remove('animated-bg'))

animated_bg_texts.forEach((bg) => bg.classList.remove('animated-bg-text'))

}

// 2.5秒後に表示

setTimeout(getData, 2500)

月	火	水	木	金	土	日
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

JavaScriptでカードローディング処理を実装しよう!

実装するもの

環境構築

CSS版

ページ(HTML)の作成

スタイル(CSS)を装飾

JavaScriptの実装

要素を取得する

カード情報の取得と埋め込み

指定時間後に処理を実行する

おわりに

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

実装するもの

環境構築

CSS版

ページ(HTML)の作成

スタイル(CSS)を装飾

JavaScriptの実装

要素を取得する

カード情報の取得と埋め込み

指定時間後に処理を実行する

おわりに

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

[Golang]~MovieApp: Dockerで開発環境を構築しよう!~

ReactでTodoアプリを作ろう！

JavaScriptでaudioタグの音楽再生処理を実装しよう!

CSSでKeyCode画面のスタイリングを実装する

Go言語 ~基礎編~ Defined Type

[JavaScript]setTimoutでカウンター処理を実装する

CSSでカスタムレンジスライダーをスタイリングしよう!

CSSで画像取得アプリのスタイリングをしよう!

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル