Travis build: 56

README.md

@@ -94,6 +94,7 @@ import ReactDOM from 'react-dom';
 * [`Collapse`](#collapse)
 * [`CountDown`](#countdown-)
 * [`FileDrop`](#filedrop)
+* [`Loader`](#loader)
 * [`Mailto`](#mailto)
 * [`Modal`](#modal)
 * [`RippleButton`](#ripplebutton)
@@ -1499,6 +1500,75 @@ ReactDOM.render(<FileDrop handleDrop={console.log} />, document.getElementById('
 
 <br>[⬆ Back to top](#contents)
 
+### Loader
+
+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>
+  );
+}
+```
+
+<details>
+<summary>Examples</summary>
+
+```jsx
+ReactDOM.render(<Loader size={24} />, document.getElementById('root'));
+```
+</details>
+
+<br>[⬆ Back to top](#contents)
+
 ### Mailto
 
 Renders a link formatted to send an email.

snippet_data/snippetList.json

@@ -188,6 +188,21 @@
         "hash": "daebbd819d3a73beb3a82ba3c9682b619fc1f663edaad8c60fab3e1b4b44c30c"
       }
     },
+    {
+      "id": "Loader",
+      "type": "snippetListing",
+      "title": "Loader",
+      "attributes": {
+        "text": "Creates a spinning loader component.\n\n- Define appropriate CSS styles and animations for the component's elements.\n- Define the component, which returns a simple SVG, whose size is determined by the `size` prop.\n\n",
+        "tags": [
+          "visual",
+          "beginner"
+        ]
+      },
+      "meta": {
+        "hash": "c64381d332ae68b271f644add7cdc15c6027c7ee6945c3d1f507bd7eeebf253d"
+      }
+    },
     {
       "id": "Mailto",
       "type": "snippetListing",

snippet_data/snippets.json

@@ -254,6 +254,27 @@
         "hash": "daebbd819d3a73beb3a82ba3c9682b619fc1f663edaad8c60fab3e1b4b44c30c"
       }
     },
+    {
+      "id": "Loader",
+      "title": "Loader",
+      "type": "snippet",
+      "attributes": {
+        "fileName": "Loader.md",
+        "text": "Creates a spinning loader component.\n\n- Define appropriate CSS styles and animations for the component's elements.\n- Define the component, which returns a simple SVG, whose size is determined by the `size` prop.\n\n",
+        "codeBlocks": {
+          "style": ".loader {\n  animation: rotate 2s linear infinite;\n}\n\n@keyframes rotate {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.loader circle {\n  animation: dash 1.5s ease-in-out infinite;\n}\n\n@keyframes dash {\n  0% {\n    stroke-dasharray: 1, 150;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 90, 150;\n    stroke-dashoffset: -35;\n  }\n  100% {\n    stroke-dasharray: 90, 150;\n    stroke-dashoffset: -124;\n  }\n}",
+          "code": "function Loader({ size }) {\n  return (\n    <svg\n      className=\"loader\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"10\" />\n    </svg>\n  );\n}",
+          "example": "ReactDOM.render(<Loader size={24} />, document.getElementById('root'));"
+        },
+        "tags": [
+          "visual",
+          "beginner"
+        ]
+      },
+      "meta": {
+        "hash": "c64381d332ae68b271f644add7cdc15c6027c7ee6945c3d1f507bd7eeebf253d"
+      }
+    },
     {
       "id": "Mailto",
       "title": "Mailto",