글

작성일자

#GWC UI Library : Waiter

웹 UI 라이브러리인 GWC에서 제공하는 Waiter 컴포넌트에 대한 예제 코드입니다.

먼저 DOM 구성은 다음과 같습니다.

그리고 CSS 구성은 다음과 같구요.

.center {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    gap: 1em;
}

#waiter1 {
    width: 2em;
    height: 2em;
}

#waiter2 {
    width: 3em;
    height: 3em;
}

실행 결과는 다음과 같습니다.

작성일자

#GWC UI Library : Progress

웹 UI 라이브러리인 GWC에서 제공하는 Progress 컴포넌트에 대한 예제 코드입니다.

먼저 DOM 구성은 다음과 같습니다.

그리고 CSS 구성은 다음과 같구요.

.center {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 3em;
}

#progress1 {
    width: 25em;
}

#progress2 {
    width: 20em;
}

js 코드는 다음과 같습니다.

window.onload = () => {
    button.addEventListener("click", () => {
        setInterval(() => {
            progress1.setAttribute("label", `완성율 ${parseInt(progress1.percent)}%`)
            progress1.percent += Math.random() * 10 - 3.5;
    
            if(progress1.percent == 100) progress1.percent = 0;
        }, 150);
    
        progress1.addEventListener("progress", (event) => {
            label.content = `progress1의 percent 속성값이 ${event.target.percent.toFixed(2)}로 변경되었습니다.`;
        });
    });
};

실행 결과는 다음과 같습니다.