在django中长时间处理期间显示加载gif？

Question

I do my project using Django 1.8 . I want put a GIF to during call key_generate function. How can I do this using Django. I refer this question to reference Link but I couldn't understand how apply it my code. This is my view function.

from django.contrib.auth.decorators import login_required
from django.contrib.auth.models import User
from django.shortcuts import get_object_or_404, redirect, render
from django.core.exceptions import PermissionDenied
from django.http import HttpResponse
from django.utils.timezone import now

from django.shortcuts import render_to_response

from .forms import BookmarkForm
from .models import Bookmark

from .forms import KeyGenarateForm
from .models import Key_Gen
from .algo import  algo

from pymongo import MongoClient
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger


@login_required
def key_create(request):
    #print(request.POST)

    if request.method == 'POST':
        form = KeyGenarateForm(data=request.POST)


        expier_date = request.POST['expier_date']

        if form.is_valid():
             #request.POST._mutable = True
             Key_Gen = form.save(commit=False)
             Key_Gen.save(expier_date)
             return redirect('marcador_bookmark_user',username=request.user.username)
        else:
            print('form not valied')
    else:
        form = KeyGenarateForm()


    context = {'form': form, 'create_key': True}
    return render(request, 'marcador/key_genarate_form.html', context)

This is my form class.

{% extends "base.html" %}
{% load crispy_forms_tags %}

{% block title %}
  {% if create %}Create{% else %}New Key{% endif %}Serious
{% endblock %}

{% block heading %}
  <h2>
      Create New Serial Keys
  </h2>
{% endblock %}

{% block content %}
  {% if create %}
    {% url "marcador_key_create" as action_url %}
  {% else %}
    {% url "marcador_bookmark_search" pk=form.instance.pk as action_url %}
  {% endif %}
  <form action="{{ action_url }}" method="post" accept-charset="utf-8" >
    {{ form|crispy }}
    {% csrf_token %}
    <p> <b>Expiry Date*:</b>  <input type="date" id="datepicker" name="expier_date"></p>
    <p><input type="submit" class="btn btn-default" value="Save" ></p>
  </form>
{% endblock %}

Further explanation:

I generate 10000 serial keys using this forum.

This keys store in mongoDB database. System spend 3 -4 minutes to this task.I want show some thing [ Example : loading image or wait message ] during this time period.

Answer 1

You can use Block UI for this purpose, it's a JavaScript library.

Replace <input type="submit" class="btn btn-default" value="Save" > with

<button type="button" class="btn btn-default" onclick="submit_form()">Save</button>

Submit your form with JavaScript and upon submitting form, show image you want to show. You can watch demos here .