Commit e1780dde authored by Noe Nieto's avatar Noe Nieto 💬

Spinner after submit subscription form; Purism/LibremOne/task#31

parent a33b35fc
......@@ -11,8 +11,88 @@
{% endif %}
{% endblock %}
{% block extra_css %}
<style>
.wait {
display: block;
text-align: center;
font-size: 5em;
}
.hidden {
display: none;
}
.spinner-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background: white;
}
.spinner {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 10px transparent solid;
border-top-color:black;
border-radius: 50%;
border-bottom: 10px transparent solid;
z-index: 1500;
/* Animation stuff below */
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
.spinner:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border: 10px transparent solid;
border-top-color:black;
border-radius: 50%;
/* Animation stuff below */
-webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(0deg); /* IE 9 */
transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
}
100% {
-webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(360deg); /* IE 9 */
transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(0deg); /* IE 9 */
transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
}
100% {
-webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(360deg); /* IE 9 */
transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
}
}
</style>
{% endblock extra_css %}
{% block content %}
<form method="post" action=".">
<form id="register-form" method="post" action=".">
{% csrf_token %}
{{ form.as_p }}
{% if is_billing %}
......@@ -21,4 +101,21 @@
<input type="submit" value="{% trans 'Register >>' %}" />
{% endif %}
</form>
<div id="spinner-wrap" class="hidden">
<div class="spinner"></div>
<p class="wait">Please wait ...</p>
</div>
{% endblock %}
{% block extra_js %}
<script>
const frm = document.getElementById('register-form'),
spin = document.getElementById('spinner-wrap');
frm.addEventListener('submit', enable_spinner);
function enable_spinner() {
spin.setAttribute('class', 'spinner-wrapper');
}
</script>
{% endblock extra_js %}
\ No newline at end of file
......@@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0
<link rel="icon" sizes="960x960" href="{% static 'favicon.png' %}"/>
<meta name="application-name" content="Purist"/>
<meta charset="UTF-8"/>
<style>{% block extra_css%}{% endblock %}</style>
{% block extra_css%}{% endblock %}
</head>
<body>
......@@ -54,9 +54,7 @@ SPDX-License-Identifier: AGPL-3.0
<main>
<div class="form">
{% block content %}{% endblock %}
</div>
</main>
......@@ -73,6 +71,6 @@ SPDX-License-Identifier: AGPL-3.0
</div>
</footer>
{% block extra_js%}{% endblock %}
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment