Progress Bars

Add a progress bar to your content to display your skills, show progress or anything you want to do

Unlimted Colors: Add a progress bar in any color you want

Animated Progress Bar:

[v_progress fill=”80″ title=”HTML5″ icon=”icon-html5″ style=”striped” color=”#ee5f5b”] [v_progress fill=”90″ title=”CSS3″ icon=”icon-css3″ style=”striped” color=”#2a80b9″] [v_progress fill=”50″ title=”Like Me” icon=”icon-thumbs-up” style=”striped” color=”#2ecd71″] [v_progress fill=”60″ title=”Lock” icon=”icon-lock” style=”striped” color=”#54c4b8″] [v_progress fill=”40″ title=”Music” icon=”icon-music” style=”striped” color=”#d25400″] [v_progress fill=”85″ title=”Laptop” icon=”icon-laptop” style=”striped” color=”#fe6700″] [v_progress fill=”65″ title=”Globe” icon=”icon-globe” style=”striped” color=”#777576″] [v_progress fill=”30″ title=”Cloud” icon=”icon-cloud” style=”striped” color=”#bb9202″] [v_progress fill=”70″ title=”Comment” icon=”icon-comment” style=”striped” color=”#9a59b5″] [v_progress fill=”50″ title=”Bullhorn” icon=”icon-bullhorn” style=”striped” color=”#26ade5″]

Normal Progress Bar:

[v_progress fill=”80″ title=”HTML5″ icon=”icon-html5″ style=”normal” color=”#ee5f5b”] [v_progress fill=”90″ title=”CSS3″ icon=”icon-css3″ style=”normal” color=”#2a80b9″] [v_progress fill=”50″ title=”Like Me” icon=”icon-thumbs-up” style=”normal” color=”#2ecd71″] [v_progress fill=”60″ title=”Lock” icon=”icon-lock” style=”normal” color=”#54c4b8″] [v_progress fill=”40″ title=”Music” icon=”icon-music” style=”normal” color=”#d25400″] [v_progress fill=”85″ title=”Laptop” icon=”icon-laptop” style=”normal” color=”#fe6700″] [v_progress fill=”65″ title=”Globe” icon=”icon-globe” style=”normal” color=”#777576″] [v_progress fill=”30″ title=”Cloud” icon=”icon-cloud” style=”normal” color=”#bb9202″] [v_progress fill=”70″ title=”Comment” icon=”icon-comment” style=”normal” color=”#9a59b5″] [v_progress fill=”50″ title=”Bullhorn” icon=”icon-bullhorn” style=”normal” color=”#26ade5″]

Progress Bar without Icons

[v_progress fill=”80″ title=”HTML5″ style=”striped” color=”#ee5f5b”] [v_progress fill=”90″ title=”CSS3″ style=”striped” color=”#2a80b9″] [v_progress fill=”50″ title=”Like Me” style=”striped” color=”#2ecd71″] [v_progress fill=”60″ title=”Lock” style=”striped” color=”#54c4b8″] [v_progress fill=”40″ title=”Music” style=”striped” color=”#d25400″] [v_progress fill=”85″ title=”Laptop” style=”striped” color=”#fe6700″] [v_progress fill=”65″ title=”Globe” style=”striped” color=”#777576″] [v_progress fill=”30″ title=”Cloud” style=”striped” color=”#bb9202″] [v_progress fill=”70″ title=”Comment” style=”striped” color=”#9a59b5″] [v_progress fill=”50″ title=”Bullhorn”  style=”striped” color=”#26ade5″]

Along side your content

[row] [onehalf]

Ut aliquet, sapien at bibendum lacinia, mi justo sodales ligula, congue laoreet turpis eros sit amet odio. Proin convallis nisi leo, et bibendum nibh lacinia nec. Etiam vitae viverra erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc convallis urna quis elit ornare, ac hendrerit risus euismod. Aenean leo mi, pellentesque et sagittis at, dictum vitae elit. Sed pretium nulla non ligula luctus bibendum a non risus. Praesent consequat faucibus volutpat. Donec vitae mattis enim. Donec venenatis eleifend ante, egestas sollicitudin mauris venenatis non. Duis at elit sit amet leo condimentum ultrices quis gravida neque. Vivamus magna est, fringilla quis dui eget, aliquam commodo lectus. Suspendisse rhoncus ante dui, non feugiat nunc suscipit sed. Phasellus sed elit orci.

Donec at urna eleifend, faucibus magna vel, cursus est. Pellentesque nec congue eros. Integer suscipit nibh orci, quis tempor purus elementum quis. Phasellus eu nulla malesuada, condimentum dui in, iaculis diam. Nullam nec malesuada lorem, at interdum lorem. Integer dapibus purus quis nunc aliquam gravida. Nullam volutpat condimentum eros at pulvinar. Mauris quis enim non mauris tempus viverra nec ut nisl. Phasellus blandit ultrices libero, elementum malesuada odio suscipit ac. Donec sed mollis arcu, eget hendrerit magna. Nunc non nulla ut nisl viverra viverra non a mauris. Aliquam vitae ornare mi, et egestas velit. Vestibulum tempor laoreet quam.

[/onehalf] [onehalf] [v_progress fill=”80″ title=”HTML5″ icon=”icon-html5″ style=”striped” color=”#ee5f5b”] [v_progress fill=”90″ title=”CSS3″ icon=”icon-css3″ style=”striped” color=”#2a80b9″] [v_progress fill=”50″ title=”Like Me” icon=”icon-thumbs-up” style=”striped” color=”#2ecd71″] [v_progress fill=”60″ title=”Lock” icon=”icon-lock” style=”striped” color=”#54c4b8″] [v_progress fill=”40″ title=”Music” icon=”icon-music” style=”striped” color=”#d25400″] [v_progress fill=”85″ title=”Laptop” icon=”icon-laptop” style=”striped” color=”#fe6700″] [v_progress fill=”65″ title=”Globe” icon=”icon-globe” style=”striped” color=”#777576″] [v_progress fill=”30″ title=”Cloud” icon=”icon-cloud” style=”striped” color=”#bb9202″] [v_progress fill=”70″ title=”Comment” icon=”icon-comment” style=”striped” color=”#9a59b5″] [v_progress fill=”50″ title=”Bullhorn” icon=”icon-bullhorn” style=”striped” color=”#26ade5″] [/onehalf] [/row]

Novo Comentário

Clique aqui para postar um comentário