progress bar - pai-plznw4me/django-initializer GitHub Wiki

Progress bar(html, bootstrap)

ํ”„๋กœ๊ทธ๋ž˜์Šค ๋ฐ”๋ฅผ ํ‘œ๊ธฐํ•จ. width: 25% ๋ถ€๋ถ„๊ณผ text ๋ถ€๋ถ„์„ ๋ณ€๊ฒฝํ•ด์•ผ ํ•จ (๋ณ€๊ฒฝ ์ฝ”๋“œ์€ ์•„๋ž˜ pooling ํ•จ์ˆ˜ ๋ถ€๋ถ„์„ ์ฐธ์กฐ)

<div class="progress">
    <div id="progress-bar" class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0"
         aria-valuemax="100">25%
    </div>
</div>


{# jquery #}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
{# bootstrap #}
<script >src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

<script src={% static '/interval.js' %}>

Pooling ํ•จ์ˆ˜

  • ์ผ์ • ์‹œ๊ฐ„ ๋™์•ˆ ์ง€์†์ ์œผ๋กœ ์‹ ํ˜ธ๋ฅผ ๋ณด๋‚ด๋Š” polling ํ•จ์ˆ˜
  • ์„œ๋ฒ„์—์„œ ๋ช‡ percent ์ธ์ง€ ์ง€์†์ ์œผ๋กœ ๋ฌผ์–ด๋ด„
// interval.js
setInterval(function () {

    $.ajax({
        url: "http://localhost:8000/check_progress",
        data: {name: "์ด๋ฆ„", value: "ํ™๊ธธ๋™"},
        method: "POST",
        dataType: "json",
    })
        .done(function (response) {
            // ํ”„๋กœ๊ทธ๋ž˜์Šค ๋ฐ” style width ๋ณ€๊ฒฝ
            let prog_bar = $('#progress-bar')
            prog_bar.width(percent+'%')
            // ํ”„๋กœ๊ทธ๋ž˜์Šค ๋‚ด ํ…์ŠคํŠธ ๋ณ€๊ฒฝ
            let percent = response['percent']
            prog_bar.text(percent+'%')
        })
        .fail(function () {
        })
        .always(function () {
        });
}, 1000); //10000 milliseconds = 1 seconds

view

@csrf_exempt
def check_progress(request):
    global FILE_COUNTER

    FILE_COUNTER = FILE_COUNTER + 1
    FILE_COUNTER = FILE_COUNTER % 100
    data = {'percent': FILE_COUNTER}
    return JsonResponse(data)
โš ๏ธ **GitHub.com Fallback** โš ๏ธ