From Design pattern
Jump to: navigation, search
Line 1: Line 1:
 +
{{#css:
 +
#mw-content-text h3 span {
 +
font-weight: 600;
 +
padding-left: 0px;
 +
}
 +
 +
.mw-headline {
 +
font-weight: 600;
 +
}
 +
 +
span.mw-editsection {
 +
font-weight: 200;
 +
position: relative;
 +
float:right;
 +
margin-right: 25px
 +
}
 +
 +
span.mw-editsection a {
 +
font-weight: 200;
 +
}
 +
 +
.art-subpage {
 +
background: #F7F7F7;
 +
}
 +
 +
#mw-content-text p {
 +
padding-top: 0px;
 +
padding-bottom: 6px;
 +
}
 +
 +
.mw-content-ltr ul {
 +
margin: 0.3em 0 0 42px;
 +
}
 +
 +
 +
hr {
 +
margin-top: 0px;
 +
margin-bottom: 0px;
 +
margin-left: -31px;
 +
width: 720px;
 +
border-bottom: 1px solid #E0E0DD;
 +
border-left: 0px;
 +
border-right: 0px;
 +
border-top: 30px solid #F7F7F7;
 +
}
 +
<!--
 +
#sun-col {
 +
-webkit-column-count:2; /* Chrome, Safari, Opera */
 +
-moz-column-count:2; /* Firefox */
 +
column-count:2;
 +
}
 +
 +
#sun-col p {
 +
padding-left: 0px;
 +
-->
 +
}
 +
 +
}}
 +
 
작업의 진행상태와 진행정도등을 bar를 이용하여 실시간으로 알려준다. Progress bar는 진행정도에 따라 bar가 채워지거나 전체 작업을 퍼센트 개념으로 시각화 하는 등 다양한 표현방식을 통해 기다려야 하는 정도를 알려준다.
 
작업의 진행상태와 진행정도등을 bar를 이용하여 실시간으로 알려준다. Progress bar는 진행정도에 따라 bar가 채워지거나 전체 작업을 퍼센트 개념으로 시각화 하는 등 다양한 표현방식을 통해 기다려야 하는 정도를 알려준다.
  

Revision as of 21:31, 28 May 2014


작업의 진행상태와 진행정도등을 bar를 이용하여 실시간으로 알려준다. Progress bar는 진행정도에 따라 bar가 채워지거나 전체 작업을 퍼센트 개념으로 시각화 하는 등 다양한 표현방식을 통해 기다려야 하는 정도를 알려준다.

Examples

576번 사례

  • 프로세스의 진행상태를 채워지는 바 형태로 알려준다.

614번 사례

  • 사례 설명 입력 예정

262번 사례

  • 의도한 사진이나 그림등의 파일을 올리고 있는 중임을 아이콘과 진행 바를 통해 알려준다.

419번 사례

  • 다운로드 상황을 progress bar 형태로 시각화하여 사용자에게 알려준다.

Android _ Galaxy update

  • App의 업데이트 진행 상황을 progress bar 형태로 시각화하여 사용자에게 알려준다.

Android _ Google play store instal

  • App의 설치 진행상황을 progress bar 형태로 시각화하여 사용자에게 알려준다.

Android _ 리본공예 배우기 update

  • App의 업데이트 진행상황을 progress bar와 wheel 두가지 형태로 시각화하여 사용자에게 알려준다

Android _ 올레네비 update

  • App의 업데이트 진행상황을 progress bar 형태로 시각화하여 사용자에게 알려준다