-
Templates
-
Simple Questions
-
Text Entry
-
Date-Time Entry
-
Numeric Entry
-
Color Input
-
Radio Button Group
-
Dropdown
-
Dropdown: Load Data from Web Services
-
Dropdown with Lazy Loading
-
Multi-Select Dropdown
-
Checkboxes
-
Carry Forward Responses
-
Image Picker
-
Yes/No Question
-
Signature
-
Multiple Textboxes
-
Rating Scale
-
Rating Scale UI Adaptation Modes
-
Ranking
-
Long Text
-
Image
-
HTML
-
File Upload
-
Expression
-
Expression (using async functions)
-
-
Matrix Table Questions
-
Panel & Dynamic Panel
-
Survey
-
Title and Logo
-
Questions in one line
-
Survey Options
-
Auto-Populate Form Fields
-
Merge Question Values
-
Edit saved survey
-
Read-only/display mode
-
Show Preview before complete
-
Pop-Up Survey
-
Context actions in element titles
-
Modify title tags
-
Custom render of survey elements
-
File - custom preview
-
File - delayed upload
-
Lazy questions rendering
-
-
Quizzes and Scored Surveys
-
Customize Rendering
-
Integration with Third-Party Libraries
-
Appearance customization
-
Navigation
-
Conditions and Triggers
-
Conditional Visibility
-
Simplify Cascade Conditions
-
Dynamic Default Question Values
-
Complex Questions in Expressions
-
Custom Functions in Expressions
-
Implement a Custom Expression Property
-
Dynamic Questions with Conditional Logic
-
Hide Question Elements (Rows, Columns, Choices)
-
Show/Hide individual items in radiogroup/checkbox/dropdown
-
Hide Rows and Columns in a Matrix Table
-
Hide Rows and Columns in a Matrix Dropdown Question
-
Conditional Logic to Enable or Disable Questions
-
Complete Trigger
-
CopyValue Trigger
-
SetValue Trigger
-
Run Expression Trigger
-
-
Text Formatting
-
Survey Localization
-
Input Validation
-
SurveyJS Storage
Percentage Progress Bar
To help respondents keep track of answered and unanswered questions, your survey can display a progress bar that indicates a percentage of survey completion. Follow the instructions below to implement the percentage progress bar in your application:
Create a custom component that renders the progress bar.
You can implement the progress bar based on a simple<div>
element. Fill this<div>
with color depending onSurveyModel
'sprogressValue
property value.Display a percentage value and a title.
A percentage value is already stored in theprogressValue
property. To store the title, you need to create a custom property—progressTitle
. CallSerializer
'saddProperty
method to add the property to the survey. Then, specify the property value in the survey JSON schema.Register the custom component so that it can be accessed by name.
In React, register the component inReactElementFactory
as shown in theSurveyComponent.jsx
file.
In Angular, register the component inAngularComponentFactory
as shown in theprogressbar-percentage.component.ts
file.
In Vue and Knockout, use techniques native to these libraries:Add the progress bar to the survey layout.
Call theaddLayoutElement
method. It accepts an object whose properties specify the element'sid
, acontainer
that determines the element's location, acomponent
that renders the element, anddata
to pass as component props. Refer to the method description for more information on these properties.
-
Templates
-
Simple Questions
-
Text Entry
-
Date-Time Entry
-
Numeric Entry
-
Color Input
-
Radio Button Group
-
Dropdown
-
Dropdown: Load Data from Web Services
-
Dropdown with Lazy Loading
-
Multi-Select Dropdown
-
Checkboxes
-
Carry Forward Responses
-
Image Picker
-
Yes/No Question
-
Signature
-
Multiple Textboxes
-
Rating Scale
-
Rating Scale UI Adaptation Modes
-
Ranking
-
Long Text
-
Image
-
HTML
-
File Upload
-
Expression
-
Expression (using async functions)
-
-
Matrix Table Questions
-
Panel & Dynamic Panel
-
Survey
-
Title and Logo
-
Questions in one line
-
Survey Options
-
Auto-Populate Form Fields
-
Merge Question Values
-
Edit saved survey
-
Read-only/display mode
-
Show Preview before complete
-
Pop-Up Survey
-
Context actions in element titles
-
Modify title tags
-
Custom render of survey elements
-
File - custom preview
-
File - delayed upload
-
Lazy questions rendering
-
-
Quizzes and Scored Surveys
-
Customize Rendering
-
Integration with Third-Party Libraries
-
Appearance customization
-
Navigation
-
Conditions and Triggers
-
Conditional Visibility
-
Simplify Cascade Conditions
-
Dynamic Default Question Values
-
Complex Questions in Expressions
-
Custom Functions in Expressions
-
Implement a Custom Expression Property
-
Dynamic Questions with Conditional Logic
-
Hide Question Elements (Rows, Columns, Choices)
-
Show/Hide individual items in radiogroup/checkbox/dropdown
-
Hide Rows and Columns in a Matrix Table
-
Hide Rows and Columns in a Matrix Dropdown Question
-
Conditional Logic to Enable or Disable Questions
-
Complete Trigger
-
CopyValue Trigger
-
SetValue Trigger
-
Run Expression Trigger
-
-
Text Formatting
-
Survey Localization
-
Input Validation
-
SurveyJS Storage