✨(react) add Loader component

The first use of this loader will be inside the DataGrid for its
loading state. Its colors are based on the existing primary
colors tokens.

packages/react/src/components/Loader/index.scss

@@ -0,0 +1,34 @@
+.c__loader {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  position: relative;
+  animation: rotate 1s linear infinite
+}
+.c__loader::before , .c__loader::after {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border: 5px solid var(--c--theme--colors--primary-700);
+  animation: prixClipFix 2s linear infinite ;
+}
+.c__loader::after{
+  border-color: var(--c--theme--colors--primary-400);
+  animation: prixClipFix 2s linear infinite , rotate 0.5s linear infinite reverse;
+  inset: 6px;
+}
+
+@keyframes rotate {
+  0%   {transform: rotate(0deg)}
+  100%   {transform: rotate(360deg)}
+}
+
+@keyframes prixClipFix {
+  0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
+  25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
+  50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
+  75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
+  100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
+}

packages/react/src/components/Loader/index.stories.tsx

@@ -0,0 +1,13 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import { Loader } from "components/Loader/index";
+
+export default {
+  title: "Components/Loader (WIP)",
+  component: Loader,
+} as ComponentMeta<typeof Loader>;
+
+const Template: ComponentStory<typeof Loader> = () => <Loader />;
+
+export const Default = Template.bind({});
+Default.args = {};

packages/react/src/components/Loader/index.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+interface Props {
+  "aria-label"?: string;
+}
+
+export const Loader = (props: Props) => {
+  return <div className="c__loader" role="status" {...props} />;
+};

packages/react/src/index.scss

@@ -2,6 +2,7 @@
 @import '@openfun/cunningham-tokens/default-tokens';
 @import './components/Button';
 @import './components/Forms/Input';
+@import './components/Loader';
 @import './components/Pagination';
 
 * {

packages/react/src/index.ts

@@ -1,5 +1,6 @@
 import "./index.scss";
 
 export * from "./components/Button";
+export * from "./components/Loader";
 export * from "./components/Pagination";
 export * from "./components/Provider";