index.js

index.js

import React from "react";
import { render } from "react-dom";
import styled from "styled-components";

// we import our new loaders
import PulseLoader from "./PulseLoader";
import BouceLoader from "./BouceLoader";

// we create a div to hold our components to give them some breathing room
// otherwise they would render on top of each other
const Container = styled.div`
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: space-around;
  align-items: center;
`;

// we pass the loading prop when rendering otherwise they would not show up
const App = () => (
  <Container>
    <PulseLoader loading />
    <BouceLoader loading />
  </Container>
);

render(<App />, document.getElementById("root"));