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 */