Skip to content

Horizontal Progress Bar

GuyeolJeong edited this page Nov 16, 2018 · 6 revisions

Horizontal Progress Bar

Constructor

ProgressBar(options)

ProgressBar 객체를 생성한다. (정해지지 않은 값은 default 값으로 처리)

var options = {
 width: 200,
 height: 30,
 progressColor: "#84cd99",
 backgroundColor: "#e5e5e5"
}
var progressBar = new ProgressBar(options);

method chaining으로 객체 생성하기

var target = document.getElementById('Div ID');
var progressBar = new ProgressBar(options)
                    .create(target)
                    .val(30)
                    .heigth(20)
                    .width(200)
                    .progressColor("#84cd99");
Parameters
  • options Object
    • width Number : 전체 바의 크기
    • height Number : 전체 바의 높이
    • barRadius Number : progress 바의 모서리 radius
    • progressColor Number : progress 바의 색깔 (hex코드)
    • backgroundColor Number : 배경 색깔
    • text String : 내부 텍스트 값
    • textColor String : 내부 텍스트 색깔
    • textSize Number : 내부 텍스트 크기
    • value Number : 퍼센티지 값
Returns
  • ProgressBar Object

Methods

create(target)