Change snippets order & add donut-spinner

Author: emilkowalski

components/Footer/Footer.js

@@ -10,7 +10,11 @@ const Footer = () => {
       <Stack>
         <Separator />
         <Paragraph>
-          Built by <LinkPreview url="https://twitter.com/emilkowalski_">Emil</LinkPreview> 🌕
+          Built by{' '}
+          <Link href="https://twitter.com/emilkowalski_" target="_blank" rel="noreferrer">
+            Emil
+          </Link>{' '}
+          🌕
         </Paragraph>
       </Stack>
     </footer>

components/Snippets/DonutSpinner.js

@@ -0,0 +1,68 @@
+import { styled, keyframes } from 'stitches.config.js';
+
+const Component = () => {
+  return <Wrapper></Wrapper>;
+};
+
+const donutSpin = keyframes({
+  '0%': {
+    transform: 'rotate(0deg)'
+  },
+  '100%': {
+    transform: 'rotate(360deg)'
+  }
+});
+
+const Wrapper = styled('a', {
+  display: 'inline-block',
+  border: '4px solid rgba(255, 255, 255, 0.1)',
+  borderLeftColor: '$white',
+  borderRadius: '50%',
+  width: '30px',
+  height: '30px',
+  animation: `${donutSpin} 1.2s linear infinite`
+});
+
+const cssStyling = `
+@keyframes donut-spin {
+	0% {
+	  transform: rotate(0deg);
+	}
+	100% {
+	  transform: rotate(360deg);
+	}
+}
+
+.exampleBtn {
+	display: inline-block;
+	border: 4px solid rgba(255, 255, 255, 0.1);
+	border-left-color: white;
+	border-radius: 50%;
+	width: 30px;
+	height: 30px;
+	animation: donut-spin 1.2s linear infinite;
+}
+`;
+
+const scssStyling = `
+@keyframes donut-spin {
+	0% {
+	  transform: rotate(0deg);
+	}
+	100% {
+	  transform: rotate(360deg);
+	}
+}
+
+.exampleBtn {
+	display: inline-block;
+	border: 4px solid rgba(255, 255, 255, 0.1);
+	border-left-color: white;
+	border-radius: 50%;
+	width: 30px;
+	height: 30px;
+	animation: donut-spin 1.2s linear infinite;
+}
+`;
+
+export { cssStyling, scssStyling, Component };

components/Snippets/index.js

@@ -14,19 +14,21 @@ import * as ThreeDotsLoader from './ThreeDotsLoader';
 import * as ScalePseudo from './ScalePseudo';
 import * as UnderlineRight from './UnderlineRight';
 import * as FlickUp from './FlickUp';
+import * as DonutSpinner from './DonutSpinner';
 
 const allSnippets = [
   UnderlineLeftRight,
   Pulse,
   PressDownButton,
   BorderMarker,
   OverlayLeft,
+  DonutSpinner,
   MagnifyButton,
   Swing,
-  Skeleton,
-  HorizontalOverlay,
   BorderFade,
+  HorizontalOverlay,
   TextTransformX,
+  Skeleton,
   CircleScaleButton,
   ThreeDotsLoader,
   ScalePseudo,