From 81a1515fc9cdcd0b5b4e20e9707b449206e02fb5 Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Wed, 11 Sep 2019 21:59:12 +0300
Subject: [PATCH] Add Loader component

---
 snippets/Loader.md | 65 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 snippets/Loader.md

diff --git a/snippets/Loader.md b/snippets/Loader.md
new file mode 100644
index 000000000..aaccdcfa2
--- /dev/null
+++ b/snippets/Loader.md
@@ -0,0 +1,65 @@
+---
+title: Loader
+tags: visual,beginner
+---
+
+Creates a spinning loader component.
+
+- Define appropriate CSS styles and animations for the component's elements.
+- Define the component, which returns a simple SVG, whose size is determined by the `size` prop.
+
+```css
+.loader {
+  animation: rotate 2s linear infinite;
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loader circle {
+  animation: dash 1.5s ease-in-out infinite;
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}
+```
+
+```jsx
+function Loader({ size }) {
+  return (
+    <svg
+      className="loader"
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx="12" cy="12" r="10" />
+    </svg>
+  );
+}
+```
+
+```jsx
+ReactDOM.render(<Loader size={24} />, document.getElementById('root'));
+```