Circle Style

All People Project Task

People

Karmen Dartez

JavaScriptHTML

Sr. Developer - karmen@example.com

Scot Loh

PhotoShopUX

Sr. UI/UX Desugner - scot@example.com

Project

WordPress Template Support

25%

Collicitudin vel metus scelerisque ante commodo.

In Progress25% Completed

Application UI/UX

100%

Cetus scelerisque ante sollicitudin commodo.

Completed100% Completed

SEO Project

65%

Notifications scelerisque ante sollicitudin commodo.

Delayed65% Completed

Task

Create the new layout for menu

Pcelerisque ulla vel metus ante sollicitudin commodo.

Open 22 January, 16

Addition features on footer

Tuaiulla vel metus scelerisque ante sollicitudin commodo.

On hold 24 January, 16

Remove TODO comments

Mulullametu vel scelerisque ante sollicitudin commodo.

Resolved 25 January, 16

Form Wizard Circle Steps

Add .wizard-circle class to form tag to apply circle style wizard steps. This is the default style with circle wizard steps. There are two styles to display wizard tabs horizontal and vertical. You can display numbers or icons as wizard steps. You can also validate form fields on each wizard step.

Form wizard with number tabs

Step 1

First Name :

Last Name :

Email Address :

Select City :

Phone Number :

Date of Birth :

Step 2

Proposal Title :

Email Address :

Video URL :

Job Title :

Short Description :

Step 3

Event Name :

Event Type :

Event Location :

Event Date - Time :

Event Status :

Requirements :

Staffing Catering

Step 4

Name of Meeting :

Location :

Names of Participants

Decisions Reached

Agenda Items :

1st item 2nd item 3rd item 4th item 5th item

Form wizard with icon tabs

Step 1

First Name :

Last Name :

Email Address :

Select City :

Phone Number :

Date of Birth :

Step 2

Proposal Title :

Email Address :

Video URL :

Job Title :

Short Description :

Step 3

Event Name :

Event Type :

Event Location :

Event Date - Time :

Event Status :

Requirements :

Staffing Catering

Step 4

Name of Meeting :

Location :

Names of Participants

Decisions Reached

Agenda Items :

1st item 2nd item 3rd item 4th item 5th item

Validation Example

Step 1

First Name : *

Last Name : *

Email Address : *

Select City : *

Phone Number :

Date of Birth :

Step 2

Proposal Title : *

Email Address : *

Video URL :

Job Title : *

Short Description :

Step 3

Event Name : *

Event Type : *

Event Location :

Event Date - Time : *

Event Status : *

Requirements :

Staffing Catering

Step 4

Name of Meeting : *

Location : *

Names of Participants

Decisions Reached

Agenda Items :

1st item 2nd item 3rd item 4th item 5th item

Form wizard with vertical tabs

Step 1

First Name :

Last Name :

Email Address :

Select City :

Phone Number :

Date of Birth :

Step 2

Proposal Title :

Email Address :

Video URL :

Job Title :

Short Description :

Step 3

Event Name :

Event Type :

Event Location :

Event Date - Time :

Event Status :

Requirements :

Staffing Catering

Step 4

Name of Meeting :

Location :

Names of Participants

Decisions Reached

Agenda Items :

1st item 2nd item 3rd item 4th item 5th item

You have new order!

99% Server load

Warning notifixation

Complete the task

Generate monthly report

Margaret Govan

Bret Lezama

Carie Berra

Eric Alsobrook

People

Project

Task

Circle Style

Form wizard with number tabs

Step 1

Step 2

Step 3

Step 4

Form wizard with icon tabs

Step 1

Step 2

Step 3

Step 4

Validation Example

Step 1

Step 2

Step 3

Step 4

Form wizard with vertical tabs

Step 1

Step 2

Step 3

Step 4