HTML 按下按钮时显示进度条

Question

我正在尝试在用户按下按钮时显示进度条。

我的代码如何工作：

我正在使用 python flask 渲染 html 模板
用户填写字段并按下按钮
一个过程发生，同时加载栏将出现在搜索按钮下

我无法完成第 3 步。我查看了很多资源，但其中 none 有一个实际的加载栏弹出。

enterid.html:

<!DOCTYPE html>
<html>
    <head>
        <title>DCF</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Reverse image search discord user id's">
        <meta name="keywords" content="Discord">
        <style>
            h1 {
                font-family: Arial, sans-serif;
                color: #2f2d2d;
                text-align: Center;
            }
            p {
                font-family: Arial, sans-serif;
                font-size: 14px;
                text-align: Center;
                color: #2f2d2d;
            }
        </style>
    </head>
    <body>
    <form action = "http://localhost:5000/Scrape" method = "post">
          <h1>Discord Catfish Finder</h1>
          <p>Enter User ID: </p>
      <p><input type = "text" name = "nm" /></p>
      <p><input type = "submit" value = "submit" /></p>
    </body>
</html>

一个我认为很酷并且想使用的加载栏：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">

    <title>Loader Bar</title>

    <style>
        body {
            background-color: #262626;
            font-family: Lato, sans-serif;
        }

        .loader {
            width: 150px;
            margin: 150px auto 70px;
            position: relative;
        }

        .loader .loading_1 {
            position: relative;
            width: 100%;
            height: 10px;
            border: 1px solid yellowgreen;
            border-radius: 10px;
            animation: turn 4s linear 1.75s infinite;
        }

        .loader .loading_1:before {
            content: "";
            display: block;
            position: absolute;
            width: 0;
            height: 100%;
            background-color: yellowgreen;
            box-shadow: 10px 0px 15px 0px yellowgreen;
            animation: load 2s linear infinite;
        }

        .loader .loading_2 {
            position: absolute;
            width: 100%;
            top: 10px;
            color: green;
            font-size: 22px;
            text-align: center;
            animation: bounce 2s linear infinite;
        }

        @keyframes load {
            0% {
                width: 0%;
            }

            87.5% {
                width: 100%;
            }
        }

        @keyframes turn {
            0% {
                transform: rotateY(0deg);
            }

            6.25%,
            50% {
                transform: rotateY(180deg);
            }

            56.25%,
            100% {
                transform: rotateY(360deg);
            }
        }

        @keyframes bounce {

            0%,
            100% {
                top: 10px;
            }

            12.5% {
                top: 30px;
            }
        }
    </style>
</head>

<body>
    <div class="loader">
        <div class="loading_1"></div>
        <div class="loading_2">Please Wait...</div>
    </div>
</body>

</html>

我的 flask 代码，如果这有什么影响的话：

from flask import Flask, redirect, url_for, request, render_template
import json
import requests
import webbrowser
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
import time
import psutil
import random
from os.path import exists
import os
import shutil
import threading


sem = threading.Semaphore()
app = Flask(__name__, template_folder='template')


@app.route('/')
def main_menu():
    return redirect(url_for('enteruserid'))


@app.route('/EnterID')
def enteruserid():
    return render_template('enterid.html')


@app.route('/notaninteger')
def notanint():
    return "The value you entered wasn't an integer, please go back one page and change your input"


@app.route('/Failed')
def script_failed():
    return "An unknown error occured, please try again"


@app.route('/Scraping/<target_id>')
def scrapingtheinternet(target_id):
    sem.acquire()
    try:
        chrome_options = Options()
        chrome_options.headless = True
        chrome_options.add_argument("log-level=3")
        chrome_options.add_experimental_option(
            "excludeSwitches", ["enable-logging"])
        driver = webdriver.Chrome(options=chrome_options)
        begining_of_url = "https://lookup.guru/"
        whole_url = begining_of_url + str(target_id)
        driver.get(whole_url)
        wait = WebDriverWait(driver, 10)
        wait.until(EC.visibility_of_element_located(
            (By.XPATH, "//img")))
        images = driver.find_elements_by_tag_name('img')
        for image in images:
            global pfp
            pfp = (image.get_attribute('src'))
            profileimageq = pfp.startswith(
                "https://cdn.discordapp.com/avatars/")
            if profileimageq == True:
                break
        img_data = requests.get(pfp).content
        with open('pfpimage.png', 'wb') as handler:
            handler.write(img_data)
        handler.close()
        filePath = 'pfpimage.png'
        searchUrl = 'https://yandex.com/images/search'
        files = {'upfile': ('blob', open(
            filePath, 'rb'), 'image/jpeg')}
        params = {'rpt': 'imageview', 'format': 'json',
                  'request': '{"blocks":[{"block":"b-page_type_search-by-image__link"}]}'}
        response = requests.post(searchUrl, params=params, files=files)
        query_string = json.loads(response.content)[
                                  'blocks'][0]['params']['url']
        img_search_url = searchUrl + '?' + query_string
        webbrowser.open(whole_url)
        webbrowser.open(img_search_url)
        sem.release()
        return "Opened results for id: %s" % target_id
    except:
        sem.release()
        return redirect(url_for('script_failed'))


@app.route('/Overload/<cpu_load>')
def cpuoverload(cpu_load):
    return 'CPU use too high, please try again later: %s' % cpu_load


@app.route('/Scrape', methods=['POST', 'GET'])
def login():
    if request.method == 'POST':
        id = request.form['nm']
        try:
            int(id)
        except:
            return redirect(url_for('notanint'))
        cpu_load = psutil.cpu_percent(0.1)
        if cpu_load >= 99.0:
            return redirect(url_for('cpuoverload', cpu_load=cpu_load))
        else:
            return redirect(url_for('scrapingtheinternet', target_id=id))
    else:
        id = request.args.get('nm')


if __name__ == '__main__':
   app.run(debug=True)

我完全是 html、css 和 java 的菜鸟。任何帮助，将不胜感激。据我所见，我相信 html 代码本身应该可以加载栏。提前致谢

Answer 1

对于 Flask 中的 long-running 任务，通常使用 Redis 或 Celery 的解决方案。这使得显示加载栏成为可能。您可以找到关于此的详细文章 here。

下面的解决方案很简单，不够专业。提交表单后，会显示一个叠加层，其中包含加载栏和动画。

<!DOCTYPE html>
<html>
    <head>
        <title>DCF</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Reverse image search discord user id's">
        <meta name="keywords" content="Discord">
        <style>
        h1 {
            font-family: Arial, sans-serif;
            color: #2f2d2d;
            text-align: Center;
        }
        p {
            font-family: Arial, sans-serif;
            font-size: 14px;
            text-align: Center;
            color: #2f2d2d;
        }

        .loader {
            width: 150px;
            margin: 150px auto 70px;
            position: relative;
        }

        .loader .loading_1 {
            position: relative;
            width: 100%;
            height: 10px;
            border: 1px solid yellowgreen;
            border-radius: 10px;
            overflow: hidden;
            animation: turn 4s linear infinite;
        }

        .loader .loading_1:before {
            content: "";
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: yellowgreen;
            box-shadow: 10px 0px 15px 0px yellowgreen;
            animation: load 2s linear infinite;
        }

        .loader .loading_2 {
            position: absolute;
            width: 100%;
            top: 10px;
            color: green;
            font-size: 22px;
            text-align: center;
            animation: bounce 2s linear infinite 0.0001s;
        }

        @keyframes load {
            0% {
                transform: translate(50%, 0px) scaleX(0);
            }

            87.5% {
              transform: translate(0%, 0px) scaleX(1);
            }
        }

        @keyframes turn {
            0% {
                transform: rotateY(0deg);
            }

            6.25%,
            50% {
                transform: rotateY(180deg);
            }

            56.25%,
            100% {
                transform: rotateY(360deg);
            }
        }

        @keyframes bounce {
            0%,
            100% {
              transform: translateY(10px);
            }

            12.5% {
              transform: translateY(30px);
            }
        }

        .overlay {
          position: absolute;
          display: none;
          z-index: 9998;
          width: 100vw;
          height: 100vh;
          top: 0;
          left: 0;
          background-color: #262626;
          font-family: Lato, sans-serif;
        }
        .overlay.active {
          display: block;
        }
        .loader.active {
          display: block;
        }

        </style>
    </head>
    <body>
      <form action="http://localhost:5000/Scrape" method="post">
        <h1>Discord Catfish Finder</h1>
        <p>Enter User ID: </p>
        <p><input type = "text" name = "nm" /></p>
        <p><input type = "submit" value = "submit" /></p>
      </form>

      <div class="overlay">
        <div class="loader">
          <div class="loading_1"></div>
          <div class="loading_2">Please Wait...</div>
        </div>
      </div>

      <script type="text/javascript">
        (() => {

          document.querySelectorAll('form').forEach(elem => {
            elem.addEventListener('submit', () => {
              document.querySelector('div.overlay').classList.toggle('active');
            })
          });

        })();
      </script>

    </body>
</html>

HTML 按下按钮时显示进度条

HTML display progress bar on button press

html

css

popup

flask

progress-bar