feat: button loading state

source/_patterns/00-atoms/03-buttons/loading-button.mustache

+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+  <div class="inline-flex flex-col space-y-2">
+    {{> atoms-basic-button(classes: "text-sm btn--loading" )}}
+    {{> atoms-basic-button(classes: "text-base btn--loading" )}}
+    {{> atoms-basic-button(classes: "text-lg btn--loading" )}}
+  </div>
+</div>

source/css/style.pcss

@@ -114,3 +114,43 @@ a.icon-link:hover {
   /* Avoid gaps between inline-block elements */
   font-size: 0;
 }
+
+/* @keyframes btn-loading-spinner {
+  to {transform: rotate(360deg);}
+} */
+
+/* .btn--loading {
+  position: relative;
+} */
+
+/* .btn--loading::before {
+  pointer-events: none;
+  content: '';
+  position: absolute;
+  background-color: #000;
+  opacity: 0.7;
+  z-index: 2;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.btn--loading::after {
+  pointer-events: none;
+  content: '';
+  position: absolute;
+  z-index: 3;
+  top: 50%;
+  left: 50%;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-top: -0.75rem;
+  margin-left: -0.75rem;
+  border-radius: 50%;
+  border: 3px solid transparent;
+  border-top-color: theme("colors.cyan.200");
+  border-right-color: theme("colors.cyan.200");
+  border-bottom-color: theme("colors.cyan.200");
+  animation: btn-laoding-spinner 1s linear infinite;
+} */

tailwind-plugins/buttons.js

@@ -110,6 +110,46 @@ module.exports = function (options) {
         '.btn--condensed .btn__body': {
           padding: '.75em 1em',
         },
+        '@keyframes btn-loading-spinner': {
+          'to': {
+            transform: 'rotate(360deg)',
+          }
+        },
+        '.btn--loading': {
+          position: 'relative',
+        },
+        '.btn--loading::before': {
+          pointerEvents: 'none',
+          content: "''",
+          position: 'absolute',
+          left: '0',
+          right: '0',
+          top: '0',
+          bottom: '0',
+          zIndex: '2',
+          backgroundColor: theme('colors.black'),
+          opacity: '0.7',
+        },
+        '.btn--loading::after': {
+          pointerEvents: 'none',
+          content: "''",
+          position: 'absolute',
+          left: '0',
+          right: '0',
+          top: '0',
+          bottom: '0',
+          zIndex: '3',
+          top: '50%',
+          left: '50%',
+          width: '1.5rem',
+          height: '1.5rem',
+          marginTop: '-0.75rem',
+          marginLeft: '-0.75rem',
+          borderRadius: '50%',
+          border: `3px solid ${theme('colors.cyan.200')}`,
+          borderLeftColor: 'transparent',
+          animation: 'btn-loading-spinner 1s linear infinite',
+        }
       },
       ..._.map(options.colors, (colorOptions, name) => {
         const bg = getThemeColor(colorOptions.background, '#000');