Loader.re

open Css;
let defaultAnimationFrame = (position: int) => (
  position,
  [transform(`scale((1.0, 1.0)))],
);

let loaderAnimation =
  keyframes([
    defaultAnimationFrame(0),
    defaultAnimationFrame(20),
    (50, [transform(`scale((1.5, 1.5)))]),
    defaultAnimationFrame(80),
    defaultAnimationFrame(100),
  ]);

[@react.component]
let make = (~size=64, ~color=`hex("000000")) =>
  <div>
    <div
      className={style([
        width(`percent(100.)),
        minWidth(px(150)),
        textAlign(`center),
      ])}>
      <div
        className={style([
          display(`inlineBlock),
          position(`relative),
          width(px(size)),
          height(px(size)),
          marginTop(px(25)),
          marginBottom(px(25)),
          selector(
            "div",
            [
              position(`absolute),
              width(px(5)),
              height(px(5)),
              backgroundColor(color),
              borderRadius(`percent(50.0)),
              animationName(loaderAnimation),
              animationDuration(1200),
              animationIterationCount(`infinite),
              animationTimingFunction(`linear),
              selector(
                "&:nth-of-type(1)",
                [animationDelay(0), top(px(29)), left(px(53))],
              ),
              selector(
                "&:nth-of-type(2)",
                [animationDelay(-100), top(px(18)), left(px(50))],
              ),
              selector(
                "&:nth-of-type(3)",
                [animationDelay(-200), top(px(9)), left(px(41))],
              ),
              selector(
                "&:nth-of-type(4)",
                [animationDelay(-300), top(px(6)), left(px(29))],
              ),
              selector(
                "&:nth-of-type(5)",
                [animationDelay(-400), top(px(9)), left(px(18))],
              ),
              selector(
                "&:nth-of-type(6)",
                [animationDelay(-500), top(px(18)), left(px(9))],
              ),
              selector(
                "&:nth-of-type(7)",
                [animationDelay(-600), top(px(29)), left(px(6))],
              ),
              selector(
                "&:nth-of-type(8)",
                [animationDelay(-700), top(px(41)), left(px(9))],
              ),
              selector(
                "&:nth-of-type(9)",
                [animationDelay(-800), top(px(50)), left(px(18))],
              ),
              selector(
                "&:nth-of-type(10)",
                [animationDelay(-900), top(px(53)), left(px(29))],
              ),
              selector(
                "&:nth-of-type(11)",
                [animationDelay(-1000), top(px(50)), left(px(41))],
              ),
              selector(
                "&:nth-of-type(12)",
                [animationDelay(-1100), top(px(41)), left(px(50))],
              ),
            ],
          ),
        ])}>
        <div />
        <div />
        <div />
        <div />
        <div />
        <div />
        <div />
        <div />
        <div />
        <div />
        <div />
        <div />
      </div>
    </div>
  </div>;