【React】ねばねばした Loading コンポーネントを実装する

概要

ねばねば結合するLoadingコンポーネントを実装します。

本記事は、以下の動画をReactで実装したものです。

スタイリングには、emotion/css（CSS in JS）を使用しています。

実装

import React, { VFC } from 'react';
import { css, cx, keyframes } from '@emotion/css';

export const LiquidLoaderAnimation: VFC = () => {
    const dots = 8
    const rotateDots = 5

    return (
        <div className={styles.container}>
            <svg className={styles.svg}>
                <filter id="gooey">
                    <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
                    <feColorMatrix
                        values="
                            1 0 0 0 0
                            0 1 0 0 0
                            0 0 1 0 0
                            0 0 0 20 -10
                        "
                    />
                </filter>
            </svg>
            <div className={styles.loader}>
                {[...Array(dots)].map((_, i) => (
                    <span key={i} className={styles.dot(45 * i)}></span>
                ))}
                {[...Array(rotateDots)].map((_, i) => (
                    <span key={i} className={cx(styles.dot(0), styles.rotate(-0.2 * i))}></span>
                ))}
            </div>
        </div>
    )
}

const animations = {
    animate: keyframes`
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  `
}

const styles = {
    container: css`
        position: relative;
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #0c1c21;
    `,
    loader: css`
        position: relative;
        width: 250px;
        height: 250px;
        filter: url(#gooey);
        animation: ${animations.animate} 16s linear infinite;
    `,
    dot: (rotate: number) => css`
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        transform: rotate(${rotate}deg);

        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: calc(50% - 20px);
            width: 40px;
            height: 40px;
            background: linear-gradient(45deg, #c7eeff, #03a9f4);
            border-radius: 50%;
            box-shadow: 0 0 30px #00bcd4;
        }
    `,
    rotate: (delay: number) => css`
        animation: ${animations.animate} 4s ease-in-out infinite;
        animation-delay: calc(${delay}s);
    `,
    svg: css`
        width: 0;
        height: 0;
    `
}

ねばねばしたエフェクト（gooey effect）は、svgの原子フィルター feGaussianBlur・feColorMatrix を使うことで表現しています。

feGaussianBlurでblurをかけて、feColorMatrixで透過部分（blurでぼやけた部分）のコントラストをあげることで、引っ付くような表現をしているようです。

もう少し詳しく知りたい方は、以下の記事が参考になると思います。