Style buttons when loading

1 files changed, 41 insertions, 1 deletions

diff --git a/public/css/style.css b/public/css/style.css
index 17fb67b..c529b43 100755
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -233,7 +233,8 @@ body, html {
 
 /* IMAGE UPLOAD FORM */
 .image-preview {
-    width: 920px;
+    max-width: 920px;
+    width: 100%;
     height: 200px;
     position: relative;
     overflow: hidden;
@@ -446,3 +447,42 @@ article.static-page header {
 .card--group-preview:hover {
     text-decoration: none;
 }
+
+@keyframes shimmer {
+    100% {
+        transform: translateX(100%);
+    }
+}
+
+.btn--loading {
+    position: relative;
+}
+.btn--loading::after {
+    content: "";
+    position: absolute;
+    left: -45%;
+    height: 200%;
+    width: 45%;
+    background-image: linear-gradient(
+        to left,
+        rgba(251, 251, 251, 0),
+        rgba(251, 251, 251, 0.05),
+        rgba(251, 251, 251, 0.2),
+        rgba(251, 251, 251, 0.5),
+        rgba(251, 251, 251, 0.2),
+        rgba(251, 251, 251, 0.05),
+        rgba(251, 251, 251, 0)
+    );
+    animation: loading 1.35s infinite;
+    z-index: 100;
+    transform: translateY(-50%);
+}
+
+@keyframes loading {
+    0% {
+        left: -45%;
+    }
+    100% {
+        left: 100%;
+    }
+}