[JavaScript] 로딩(Loading)바 만들기 (submit시 로딩 표현하기)

CSS 로딩UI 만들기 #2. 시간차를 두고 스케일 조절 반복하는 원(Circle)

---

앞전에 CSS를 사용하여 회전하는 원 로딩 UI을 만든적이 있다.

CSS 로딩UI 만들기 #1. 회전하는 원(Circle)

이번에는 세개의 원을 나열해두고 각각 시간차를 두고 일정은 크기로 커졌다 작아졌다 하는 로딩 UI를 만들어보려고 한다. 이미지를 보지 않으면 설명이 어려우니 우선 결과물부터 보자.

 

시간차를 두고 스케일 조절을 반복하는 원들 (로딩UI)

먼저 화면 중앙에 레이어를 하나 띄어 그 박스 안에 원 3개, 그리고 Loading 텍스트를 넣어준다.

<!-- HTML -->
<div class="loading-box">
	<div class="circles">
		<i></i>
		<i></i>
		<i></i>
	</div>
	<p>Loading...</p>
</div>

/* CSS */
.loading-box {position:fixed; left:50%; top:50%; z-index:100; transform:translate(-50%, -50%); padding:20px; width:200px; text-align:center; background:#fff; box-shadow:0 3px 0 rgba(0,0,0,.2);}
.loading-box .circles {padding-top:10px;}
.loading-box .circles i {display:inline-block; margin:0 3px; width:10px; height:10px; background:#00a5e5; border-radius:50em;}
.loading-box p {margin-top:10px; font-size:18px;}

로딩 UI 레이아웃 완성

위와 같이 레이아웃 작업을 마쳤다면 이제 각 원에 Scale Bounce효과를 넣어보자. Scale Bounce효과를 위해 @keyframes 속성을 추가하고 ".circles i"에 animation속성을 추가해준다. 애니메이션 시간은 적당한 시간을 넣어주고 애니메이션이 끝나면 다시 처음부터 시작이 아닌 뒤에서 앞으로 다시 앞에서 뒤로 무한반복 되야하니 alternate값과 infinite값을 추가해준다.

/* CSS */
.loading-box {position:fixed; left:50%; top:50%; z-index:100; transform:translate(-50%, -50%); padding:20px; width:200px; text-align:center; background:#fff; box-shadow:0 3px 0 rgba(0,0,0,.2);}
.loading-box .circles {padding-top:10px;}
.loading-box .circles i {animation:scaleBounce .3s alternate infinite; display:inline-block; margin:0 4px; width:10px; height:10px; background:#00a5e5; border-radius:50em;}
.loading-box p {margin-top:10px;}
@keyframes scaleBounce{
	from {transform:scale(.7)}
	to {transform:scale(1.3)}
}

scale bounce 애니메이션을 적용한 모습

이제 3개의 원에 각각 약간의 시간차를 주어 보자. ".circles i"의 animation속성에 animation-delay값을 추가해준다.

/* CSS */
.loading-box .circles i:nth-child(2) {animation-delay:.1s;}
.loading-box .circles i:nth-child(3) {animation-delay:.2s;}

완성된 로딩 UI

---

최종 CSS 코드는 아래와 같다.

/* CSS */
.loading-box {position:fixed; left:50%; top:50%; z-index:100; transform:translate(-50%, -50%); padding:20px; width:200px; text-align:center; background:#fff; box-shadow:0 3px 0 rgba(0,0,0,.2);}
.loading-box .circles {padding-top:10px;}
.loading-box .circles i {animation:scaleBounce .3s alternate infinite; display:inline-block; margin:0 4px; width:10px; height:10px; background:#00a5e5; border-radius:50em;}
.loading-box .circles i:nth-child(2) {animation-delay:.1s;}
.loading-box .circles i:nth-child(3) {animation-delay:.2s;}
.loading-box p {margin-top:20px; font-size:18px;}
@keyframes scaleBounce{
	from {transform:scale(.7)}
	to {transform:scale(1.3)}
}

 

html

{% extends "layouts/base.html" %}

{% block title %} Excel Upload {% endblock %} 

<!-- Specific CSS goes HERE -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

    <!-- [ Main Content ] start -->
    <div class="pcoded-main-container">
        <div class="pcoded-wrapper">

            <div class="pcoded-content">
                <div class="pcoded-inner-content">
                    <!-- [ breadcrumb ] start -->
                    <div class="page-header">
                        <div class="page-block">
                            <div class="row align-items-center">
                                <div class="col-md-12">
                                    <div class="page-header-title">
                                        <h5 class="m-b-10">Excel Upload</h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- [ breadcrumb ] end -->
                    <div class="main-body">
                        <div class="page-wrapper">
                            <!-- [ Main Content ] start -->
                            <div class="row">
                                <div class="col-sm-12">
                                    <!-- Input group -->
                                    <div class="card">
                                        <div class="card-header">
                                            <h5>액셀 파일을 하나씩 업로드 하십시오.</h5>
                                            <div class="loading-box" style="display:none", id="myDiv">
                                                <div class="circles">
                                                    <i></i>
                                                    <i></i>
                                                    <i></i>
                                                </div>
                                                <p>Loading...</p>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <div class="input-group input-group-sm mb-3">
                                                <div class="input-group-prepend">
                                                    <form action="{{ url_for('upload_blueprint.fileupload') }}" method="POST" enctype="multipart/form-data" id="excelform">
                                                        <div class="input-group-prepend">
                                                            <input type="file" class="form-control" name="upload-file" value="">
                                                            <button type="submit" class="btn btn-primary" onclick="submitForm()">Submit</button>
                                                        </div>
                                                        <h1 id="honetag"></h1>
                                                        <script>
                                                            function submitForm() {
                                                                var div = document.getElementById("myDiv");
			                                                    div.style.display = "block";
                                                                let form = document.getElementById("excelform");
                                                                form.submit();
                                                            }
                                                        </script>
                                                    </form>
                                                </div>  
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}{% endblock javascripts %}

                                            <div class="loading-box" style="display:none", id="myDiv">

                                                <div class="circles">

                                                    <i></i>

                                                    <i></i>

                                                    <i></i>

                                                </div>

                                                <p>Loading...</p>

                                            </div>

                                        <div class="card-body">

                                            <div class="input-group input-group-sm mb-3">

                                                <div class="input-group-prepend">

                                                    <form action="{{ url_for('upload_blueprint.fileupload') }}" method="POST" enctype="multipart/form-data" id="excelform">

                                                        <div class="input-group-prepend">

                                                            <input type="file" class="form-control" name="upload-file" value="">

                                                            <button type="submit" class="btn btn-primary" onclick="submitForm()">Submit</button>

                                                        </div>

                                                        <h1 id="honetag"></h1>

                                                        <script>

                                                            function submitForm() {

                                                                var div = document.getElementById("myDiv");

                                                                div.style.display = "block";

                                                                let form = document.getElementById("excelform");

                                                                form.submit();

                                                            }

                                                        </script>

                                                    </form>

                                                </div>  

                                            </div>

                                        </div>

 

출처 : https://code-study.tistory.com/47