Animated Progress Bars

[nd_container different_values=”0″ style_padding_top=”80″ style_padding_bottom=”60″]
[nd_title title=”ANIMATED PROGRESS BARS” underline=”c-line-center c-theme-bg” label_align=”c-center” different_values=”0″]
[/nd_title]
[html format=”ckeditor” different_values=”0″]

CIRCULAR PROGRESS BAR

[/html]
[nd_animated_progress_bar different_values=”0″ type_bar=”circle” bg_type=”green” description=”Thick Bar with Icon” percent=”30″ icon=”icon-bar-chart” stroke_width=”8″ line_width=”1″ animation=”bounceOut” animation_delay=”200″ animation_stroke=”easeInOut”]
[/nd_animated_progress_bar]
[nd_animated_progress_bar different_values=”0″ type_bar=”circle” bg_type=”red” description=”Normal Bar with Icon” percent=”50″ icon=”icon-settings” stroke_width=”6″ line_width=”1″ animation_stroke=”easeInOut”]
[/nd_animated_progress_bar]
[nd_animated_progress_bar different_values=”0″ type_bar=”circle” bg_type=”blue” description=”Slim Bar with Percentage” percent=”75″ stroke_width=”3″ line_width=”1″ animation_stroke=”easeInOut”]
[/nd_animated_progress_bar]
[nd_animated_progress_bar different_values=”0″ type_bar=”circle” bg_type=”grey-2″ description=”Normal Bar with Percentage and Bounce” percent=”95″ stroke_width=”5″ line_width=”1″ animation_stroke=”bounce”]
[/nd_animated_progress_bar]
[/nd_container]
[col different_values=”0″ style_background_color=”31383c” style_padding_top=”60″ style_padding_bottom=”60″]
[nd_container different_values=”0″]
[html format=”ckeditor” different_values=”0″]

SEMI-CIRCLE PROGRESS BAR

[/html]
[nd_animated_progress_bar different_values=”0″ type_bar=”semicircle” bg_type=”green” description=”Thick Bar with Icon” percent=”30″ icon=”icon-cloud-upload” stroke_width=”8″ line_width=”1″ animation_stroke=”easeInOut”]
[/nd_animated_progress_bar]
[nd_animated_progress_bar different_values=”0″ type_bar=”semicircle” bg_type=”red” description=”Normal Bar with Icon” percent=”50″ icon=”icon-social-youtube” stroke_width=”6″ line_width=”1″ animation_stroke=”easeInOut”]
[/nd_animated_progress_bar]
[nd_animated_progress_bar different_values=”0″ type_bar=”semicircle” bg_type=”blue” description=”Slim Bar with Percentage” percent=”75″ stroke_width=”3″ line_width=”1″ animation_stroke=”easeInOut”]
[/nd_animated_progress_bar]
[nd_animated_progress_bar different_values=”0″ type_bar=”semicircle” bg_type=”grey-2″ description=”Normal Bar with Percentage and Bounce” percent=”95″ stroke_width=”6″ line_width=”1″ animation_stroke=”bounce”]
[/nd_animated_progress_bar]
[/nd_container]
[/col]
[nd_div vertical_align=”0″ bg_color=” ” different_values=”0″ style_background_image=”110″ style_padding_bottom=”60″]
[html format=”ckeditor” style_padding_top=”60″ different_values=”0″]

LINE PROGRESS BAR

[/html]
[nd_container different_values=”0″ style_padding_top=”20″]
[row different_values=”0″]
[col desktop=”6″ different_values=”0″]
[nd_animated_progress_bar percent=”75″ type_bar=”line” bg_type=”green” icon=”icon-cloud-upload” stroke_width=”3″ different_values=”0″ line_width=”2″ animation_stroke=”easeInOut”]
[/nd_animated_progress_bar]
[nd_animated_progress_bar percent=”85″ type_bar=”line” bg_type=”blue” icon=”icon-settings” stroke_width=”3″ different_values=”0″ line_width=”2″ animation_stroke=”easeInOut”]
[/nd_animated_progress_bar]
[nd_animated_progress_bar percent=”55″ type_bar=”line” bg_type=”red” icon=”icon-info” stroke_width=”3″ different_values=”0″ line_width=”2″ animation_stroke=”easeInOut”]
[/nd_animated_progress_bar]
[nd_animated_progress_bar percent=”78″ type_bar=”line” bg_type=”green” icon=”icon-speech” stroke_width=”3″ different_values=”0″ line_width=”2″ animation_stroke=”easeInOut”]
[/nd_animated_progress_bar]
[/col]
[col desktop=”6″ different_values=”0″ style_padding_top=”30″]
[nd_animated_progress_bar percent=”90″ type_bar=”line” bg_type=”red” stroke_width=”3″ different_values=”0″ line_width=”1″ description=”UI Design” animation_stroke=”bounce”]
[/nd_animated_progress_bar]
[nd_animated_progress_bar percent=”74″ type_bar=”line” bg_type=”purple” stroke_width=”3″ different_values=”0″ line_width=”1″ description=”HTML & CSS Development” animation_stroke=”bounce”]
[/nd_animated_progress_bar]
[nd_animated_progress_bar percent=”50″ type_bar=”line” bg_type=”green” stroke_width=”3″ different_values=”0″ line_width=”1″ description=”HTML & CSS Development” animation_stroke=”bounce”]
[/nd_animated_progress_bar]
[/col]
[/row]
[/nd_container]
[/nd_div]

Oh hi there đź‘‹
It’s nice to meet you.

Sign up to receive awesome content in your inbox, every month.

We don’t spam! Read our privacy policy for more info.