当长函数运行时，如何使用CSS控制盘渲染模板

Question

我是一名桌面数据工具开发人员，我对Javascript的了解几乎无人知晓。 我正在制作一个Flask应用程序，它执行一系列函数，这些函数要么以 return render_template带有参数"ERROR"或return render_template带有参数"SUCCESS"。 该函数运行应用程序。平均15人。 我尝试使用flaskExecutor实现后台进程，效果很好， 但是，它不希望在函数结束时呈现模板

我在StackOverflow上找到了两个类似的解决方案，但是我缺少Javascript和AJAX 知识只给我带来了不令人满意的解决办法

Display a ‘loading’ message while a time consuming function is executed in Flask 和 Loading page in flask web app while scraping another website using selenium

我更愿意在长函数运行时显示状态"RUNNING"和显示this CSS wheel。 在它完成之后，我想用"ERROR"或"SUCCESS"状态呈现模板

可以使用CSS控制盘来完成吗

这是HTML文件：upload_file.html

{% extends 'layout.html' %}

{% block title %}Upload ZIP file{% endblock %}

{% block content %}`

<style>
    .loader {
      border: 16px solid #f3f3f3;
      border-radius: 50%;
      border-top: 16px solid #3498db;
      width: 120px;
      height: 120px;
      -webkit-animation: spin 2s linear infinite; /* Safari */
      animation: spin 2s linear infinite;
    }
    
    /* Safari */
    @-webkit-keyframes spin {
      0% { -webkit-transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); }
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    </style>

<h2>Upload ZIP file</h2>
<div>
    <p>Upload ZIP File with User Tables, SLAW and Measurement Plan:</p>
    <table>
        <a href="{{ url_for('upload_file') }}"><i class="fas fa-upload"></i> Upload </a>
    <p></p>
    <p>Run the analysis:</p>
        <a href="{{ url_for('run_analysis') }}"><i class="fas fa-play"></i> Process </a>
    <p></p> 
    {% if value == 'RUNNING!' %}
    <p></p>
    <div class="loader"></div>
    {% endif %} 
    <p>{{ value }}</p>
    <p>{{ message }}</p>
    {% if value == 'ERROR!' %}
    <a href="{{ url_for('delete_fromrun') }}"><i class="fas fa-trash-alt"></i> Delete</a>
    {% endif %}
</div>
{% endblock %}

通过单击链接启动的函数run_analysis

@app.route('/pythonlogin/run_analysis')
def run_analysis():
    # Check if user is logged in
    if loggedin():
        cursor = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
        cursor.execute('SELECT * FROM accounts WHERE id = %s', (session['id'],))
        account = cursor.fetchone()  
        return flask_import_basic.init()
    return redirect(url_for('login'))

函数return flask_import_basic.init()触发一系列运行约15分钟的函数，它可以以两种状态结束：

return main.update_stat('ERROR!','Error message')

或

return main.update_stat("SUCCESS!", "Data successfully imported.")

update_stat()是呈现upload_file.html模板的函数

@app.route('/')
def update_stat(statnum,statmessage):
    # Check if user is logged in
    if loggedin():
        cursor = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
        cursor.execute('SELECT * FROM accounts WHERE id = %s', (session['id'],))
        account = cursor.fetchone()
        return render_template('upload_files.html', account=account, role=session['role'], value=statnum, message=statmessage)
    return redirect(url_for('login'))

我的问题是-如何在长函数运行时呈现模板并显示CSS控制盘