What's the main difference between this and the "Progressbars" (group) element?

This element is for one single, standout progress indicator. It offers unique shape presets (Circle, Fan, Bubble) and is designed to be a focal point. The Progressbars element is for creating lists or groups of multiple bars (like a skills list), all in a similar linear style.

Does the bar/circle animate when the page loads?

Yes, typically. To engage visitors, the progress fill (Front Bar) should animate from 0% to your set value when the element comes into view on the page, creating a smooth, dynamic effect.

Can I use the Circle style to show a score out of 100?

Absolutely. The Circle (and Fan) style is perfect for this. Set your Value to the score (e.g., 85 for 85%). The element will fill the radial arc accordingly, creating a clear gauge or rating visualization.

Is the "Bubble" in Line Bubble style customizable?

Yes. There is a Bubble Color and Bubble Position setting. You can change the bubble’s color and adjust where it sits along the track relative to the fill’s end point.

진행률 표시줄

때로는 하나의 숫자가 가장 중요합니다. 모금 목표,프로젝트 이정표,기술 숙달. Master Addons Progressbar Element 는 그 단일 메트릭을 시각적 중심 요소로 만듭니다. 여러 매력적인 스타일 – 클래식 라인,레이디얼 서클 또는 독특한 팬 및 버블 디자인 중에서 선택하십시오. 목표 값을 설정한 다음 모든 부분을 사용자 정의합니다. 하나의 주요 목표를 중심으로 주의를 집중시키고 완성을 시각화하며 행동에 동기를 부여하는 완벽한 요소 또는 진행률 표시줄 요소입니다.

여러 시각적 스타일 사전 설정

하나의 숫자는 여러 가지 방법으로 표시될 수 있습니다. 페이지의 개성에 맞는 시각적 스타일을 선택하십시오. 수평 레이아웃을 위해 단순하고 깨끗한 Line 바를 선택하십시오. 컴팩트한 방사형 게이지를 위해 Circle 을 선택하십시오. 팬 모양으로 장난스럽게 만들거나 라인 스타일의 진행과 함께 움직이는 동적 Bubble 을 추가하십시오. 각 사전 설정은 발전을 시각화하는 뚜렷한 방법을 제공하여 진행률 표시줄이 항상 후회가 아닌 디자인의 필수적인 부분이 되도록 보장합니다.

네 가지 독특한 스타일: 라인, 서클, 팬, 라인 버블 사전 설정 중에서 선택하세요.
방사형 대 선형: 좁은 공간에서 컴팩트한 방사형 진행률 표시기에 원과 팬을 사용합니다.
애니메이션 버블: 라인 버블 스타일은 현재 값을 강조하는 움직이는 끝점을 추가합니다.

콘텐츠 및 가치 맞춤화

진행률 표시줄 설정은 간단합니다. 콘텐츠 탭에서 “프로젝트 자금 조달” 또는 “고객 만족도”와 같은 의미 있는 제목을 지정합니다. 그런 다음 값 – 표시줄이나 원이 얼마나 가득 차야 하는지를 정의하는 가장 중요한 비율을 설정합니다. 이 간단한 2 단계 프로세스는 기능적이고 동적인 진행률 표시기를 페이지에 실시간으로 가져오는 데 필요한 전부입니다.

간단한 입력: 단지 두 개의 필드: 제목과 값 (백분율).
라이브 미리보기: 입력할 때 편집기에서 제목 및 백분율 값 업데이트를 확인합니다.
동적 디스플레이: 막대, 원 또는 팬 채우기가 입력한 정확한 비율에 따라 자동으로 조정됩니다.

진행률 표시줄 스타일링

Back Bar (빈 트랙 또는 배경) 와 Front Bar (색칠된 채우기) 를 독립적으로 스타일링합니다. Front Bar 의 경우 색상을 선택하고 너비 (또는 두께) 를 제어합니다. Back Bar 의 경우 자체 색상과 스타일을 설정하여 진행 중인 진행 상황을 배경에 대해 명확하게 돋보이게 할 수 있으므로 가독성과 시각적 효과를 극대화할 수 있습니다.

듀얼 바 스타일링: 전면 바(진행)와 후면 바(트랙)를 완전히 다른 색상으로 스타일링합니다.
두께 제어: 진행 채우기의 너비를 조정하며, 특히 선 및 원 스타일에 유용합니다.
명확한 시각적 계층 구조: 대비되는 색상을 사용하여 완성된 부분을 즉시 명확하게 만듭니다.

라벨 및 가치 디자인

제목 및 값 스타일링 섹션을 사용하여 텍스트를 디자인합니다. 제목 색상을 설정하고 타이포그래피 – 글꼴,크기 및 무게를 선택하십시오. 값 (백분율 번호) 은 강조를 위해 스타일을 지정할 수 있으며 종종 제목보다 크거나 굵게 만듭니다. 이 통합 접근 방식은 진행률 표시 줄의 모든 요소가 통합되고 사용자 정의로 설계된 구성 요소처럼 느껴지도록 보장합니다.

텍스트별 스타일 지정: 제목 라벨과 값 백분율을 스타일 지정하기 위한 별도의 컨트롤입니다.
타이포그래피 제어: 제목 텍스트에 대한 정확한 글꼴 제어를 위해 타이포그래피 패널을 사용합니다.
숫자 강조: 종종 값을 더 두드러지게 스타일링하여 핵심 측정항목에 시선을 집중시킵니다.