diff --git a/benefits/core/templates/core/includes/form.html b/benefits/core/templates/core/includes/form.html
index f1cfa935e..8d6c73310 100644
--- a/benefits/core/templates/core/includes/form.html
+++ b/benefits/core/templates/core/includes/form.html
@@ -36,14 +36,18 @@
{% endif %}
{% if recaptcha.enabled %}
-
{% else %}
-
+
{% endif %}
@@ -63,9 +67,10 @@
$("form[action='{{form_action}}']").on("submit", function(e) {
if ("{{ form.submitting_value }}" !== "") {
$("button[data-action='submit']", this)
+ .removeClass("spinner-hidden")
+ .children().first().text("{{ form.submitting_value }}")
.attr("role", "status")
.attr("disabled", "true")
- .text("{{ form.submitting_value }}")
.addClass("disabled");
}
});
diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index 2a9330752..a28af7eaf 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -282,6 +282,12 @@ footer .footer-links li a:visited {
padding: var(--primary-button-padding);
}
+.btn-text {
+ letter-spacing: 0.02em;
+ font-weight: var(--medium-font-weight);
+ font-size: calc(20rem / 16);
+}
+
/* A button that actually is a text link */
/* TODO: Check if this is actually really used anymore */
.btn-link {
@@ -295,6 +301,17 @@ footer .footer-links li a:visited {
border-width: 2px;
}
+/* Custom button: Loading spinner */
+
+.spinner-hidden .spinner-border {
+ display: none;
+}
+
+.spinner-border {
+ border-width: 3px;
+ margin-left: 15px;
+}
+
/* Custom button: Login.gov Button with text and SVG */
/* Used on Eligibility Start */