Loading state

src/css/2-components/_buttons.scss

@@ -177,3 +177,48 @@ $btn-border-width: 0.1rem;
   font-size: clamp(2.5rem, 3.8vw, 3.8rem);
   line-height: 1.15em;
 }
+
+// State
+// --------------------------------------------------------------
+
+.btn--loading,
+.btn--loading:link,
+.btn--loading:visited {
+  position: relative;
+  z-index: 0;
+  overflow: hidden;
+  cursor: progress;
+}
+
+@keyframes btn-loading-rotate {
+  100% {
+    transform: rotate(1turn);
+  }
+}
+
+.btn--loading::before {
+  position: absolute;
+  z-index: -2;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  animation: btn-loading-rotate 1s linear infinite;
+  background-color: #1a232a;
+  background-image: conic-gradient(transparent, $color-pink-1, transparent 30%);
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  content: "";
+}
+
+.btn--loading::after {
+  position: absolute;
+  z-index: -1;
+  top: 0.6rem;
+  left: 0.6rem;
+  width: calc(100% - 1.2rem);
+  height: calc(100% - 1.2rem);
+  background: $color-purple-1;
+  border-radius: 0.5rem;
+  content: "";
+}

src/css/2-components/_notifications.scss

@@ -72,7 +72,8 @@ $notif-error: $color-red;
 
 .notif--successPlusOne {
   position: relative;
-  animation: success-shake 1s linear both;
+  animation: success-shake 0.75s linear both;
+  animation-delay: 1s;
   transform: scale(1.1);
 }
 

src/index.njk

@@ -23,7 +23,7 @@ permalink:
 		<article class="w100 maxw380px text-center">
 			<h2 class="title-1 mt0">Et <span class="highlighter-underline">vous</span>&nbsp;?</h2>
 			<div class="flex flex-col">
-				<div class="notif notif--error mb2" x-bind="error" x-cloak>Message d'erreur à faire</div>
+				{# <div class="notif notif--error mb2" x-bind="error" x-cloak>Message d'erreur à faire</div> #}
 				<div class="gridstack mb15">
 					<form action="/" method="post" class="flex" x-bind="form">
 						<button class="btn btn--big btn--icoYellow w100" x-bind="button">

src/js/script.js

@@ -28,7 +28,8 @@ document.addEventListener('alpine:init', () => {
 		},
 
 		button: {
-			["x-bind:disabled"]: "loading"
+			["x-bind:disabled"]: "loading",
+			["x-bind:class"]: "{ 'btn--loading' : loading }"
 		},
 
 		thanks: {