{"id":385,"date":"2015-03-25T23:36:52","date_gmt":"2015-03-25T23:36:52","guid":{"rendered":"http:\/\/razonartificial.com\/themes\/reason-wp\/?page_id=385"},"modified":"2015-03-25T23:36:52","modified_gmt":"2015-03-25T23:36:52","slug":"progress-bars","status":"publish","type":"page","link":"https:\/\/test.innovative8.uk.com\/wp3\/progress-bars\/","title":{"rendered":"Progress Bars"},"content":{"rendered":"
\n

Basic Progress Bars<\/h2>\n
\n
\n 70% Complete<\/span>\n <\/div>\n<\/p><\/div>\n
\n
\n 60% Complete (success)<\/span>\n <\/div>\n<\/p><\/div>\n
\n
\n 20% Complete<\/span>\n <\/div>\n<\/p><\/div>\n
\n
\n 60% Complete (warning)<\/span>\n <\/div>\n<\/p><\/div>\n
\n
\n 80% Complete<\/span>\n <\/div>\n<\/p><\/div>\n
\n
\n 50% Complete<\/span>\n <\/div>\n<\/p><\/div>\n<\/section>\n
\n

Progress Bars with Text<\/h2>\n
\n
\n 70%\n <\/div>\n<\/p><\/div>\n
\n
\n 60%\n <\/div>\n<\/p><\/div>\n
\n
\n 20%\n <\/div>\n<\/p><\/div>\n
\n
\n 60%\n <\/div>\n<\/p><\/div>\n
\n
\n 80%\n <\/div>\n<\/p><\/div>\n
\n
\n 50%\n <\/div>\n<\/p><\/div>\n

<\/p>\n

\n
\n <\/i> Show Code<\/a>\n <\/div>\n
\n
\n [xml]
\n<div class="progress">
\n<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
\n70%
\n<\/div>
\n<\/div>
\n<div class="progress">
\n<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
\n60%
\n<\/div>
\n<\/div>
\n<div class="progress">
\n<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
\n20%
\n<\/div>
\n<\/div>
\n<div class="progress">
\n<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
\n60%
\n<\/div>
\n<\/div>
\n<div class="progress">
\n<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
\n80%
\n<\/div>
\n<\/div>
\n<div class="progress">
\n<div class="progress-bar progress-bar-royal" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">
\n50%
\n<\/div>
\n<\/div>
\n [\/xml]\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n


\n <\/section>\n

\n

Striped Progress Bars<\/h2>\n
\n
\n 70% Complete<\/span>\n <\/div>\n<\/p><\/div>\n
\n
\n 60% Complete (success)<\/span>\n <\/div>\n<\/p><\/div>\n
\n
\n 20% Complete<\/span>\n <\/div>\n<\/p><\/div>\n
\n
\n 60% Complete (warning)<\/span>\n <\/div>\n<\/p><\/div>\n
\n
\n 80% Complete<\/span>\n <\/div>\n<\/p><\/div>\n
\n
\n 50% Complete<\/span>\n <\/div>\n<\/p><\/div>\n

<\/p>\n

\n
\n <\/i> Show Code<\/a>\n <\/div>\n
\n
\n [xml]
\n<div class="progress progress-striped active">
\n<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
\n<span class="sr-only">70% Complete<\/span>
\n<\/div>
\n<\/div>
\n<div class="progress progress-striped active">
\n<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
\n<span class="sr-only">60% Complete (success)<\/span>
\n<\/div>
\n<\/div>
\n<div class="progress progress-striped active">
\n<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
\n<span class="sr-only">20% Complete<\/span>
\n<\/div>
\n<\/div>
\n<div class="progress progress-striped active">
\n<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
\n<span class="sr-only">60% Complete (warning)<\/span>
\n<\/div>
\n<\/div>
\n<div class="progress progress-striped active">
\n<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
\n<span class="sr-only">80% Complete<\/span>
\n<\/div>
\n<\/div>
\n<div class="progress progress-striped active">
\n<div class="progress-bar progress-bar-royal" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">
\n<span class="sr-only">50% Complete<\/span>
\n<\/div>
\n<\/div>
\n [\/xml]\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n


\n <\/section>\n

\n

Progress Bars x-small<\/h2>\n
\n
\n 70% Complete<\/span>\n <\/div>\n<\/p><\/div>\n
\n
\n 60% Complete (success)<\/span>\n <\/div>\n<\/p><\/div>\n
\n
\n 20% Complete<\/span>\n <\/div>\n<\/p><\/div>\n
\n
\n 60% Complete (warning)<\/span>\n <\/div>\n<\/p><\/div>\n
\n
\n 80% Complete<\/span>\n <\/div>\n<\/p><\/div>\n
\n
\n 50% Complete<\/span>\n <\/div>\n<\/p><\/div>\n<\/section>\n
\n

Progress Bars small<\/h2>\n
\n
\n 70% Complete<\/span>\n <\/div>\n<\/p><\/div>\n
\n
\n 60% Complete (success)<\/span>\n <\/div>\n<\/p><\/div>\n
\n
\n 20% Complete<\/span>\n <\/div>\n<\/p><\/div>\n
\n
\n 60% Complete (warning)<\/span>\n <\/div>\n<\/p><\/div>\n
\n
\n 80% Complete<\/span>\n <\/div>\n<\/p><\/div>\n
\n
\n 50% Complete<\/span>\n <\/div>\n<\/p><\/div>\n<\/section>\n
\n

Progress Bars large<\/h2>\n
\n
\n 70% Complete\n <\/div>\n<\/p><\/div>\n
\n
\n 60% Complete\n <\/div>\n<\/p><\/div>\n
\n
\n 20% Complete\n <\/div>\n<\/p><\/div>\n
\n
\n 60% Complete\n <\/div>\n<\/p><\/div>\n
\n
\n 80% Complete\n <\/div>\n<\/p><\/div>\n
\n
\n 50% Complete\n <\/div>\n<\/p><\/div>\n<\/section>\n
\n

Progress Bars compare size<\/h2>\n
\n
\n 70% Complete<\/span>\n <\/div>\n<\/p><\/div>\n
\n
\n 60% Complete (success)<\/span>\n <\/div>\n<\/p><\/div>\n
\n
\n 20% Complete<\/span>\n <\/div>\n<\/p><\/div>\n
\n
\n 60% Complete (warning)<\/span>\n <\/div>\n<\/p><\/div>\n

<\/p>\n

\n
\n <\/i> Show Code<\/a>\n <\/div>\n
\n
\n [xml]
\n<div class="progress progress-xs">
\n<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
\n<span class="sr-only">70% Complete<\/span>
\n<\/div>
\n<\/div>
\n<div class="progress progress-sm">
\n<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
\n<span class="sr-only">60% Complete (success)<\/span>
\n<\/div>
\n<\/div>
\n<div class="progress">
\n<div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
\n<span class="sr-only">20% Complete<\/span>
\n<\/div>
\n<\/div>
\n<div class="progress progress-lg">
\n<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
\n<span class="sr-only">60% Complete (warning)<\/span>
\n<\/div>
\n<\/div>
\n [\/xml]\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n


\n <\/section>\n","protected":false},"excerpt":{"rendered":"

Basic Progress Bars 70% Complete 60% Complete (success) 20% Complete 60% Complete (warning) 80% Complete 50% Complete Progress Bars with Text 70% 60% 20% 60% 80% 50% Show Code [xml] <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"> 70% <\/div> <\/div> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> 60% <\/div> <\/div> <div class="progress"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> 20% <\/div> <\/div> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> 60% <\/div> <\/div> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> 80% <\/div> <\/div> <div class="progress"> <div class="progress-bar progress-bar-royal" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%"> 50% <\/div> <\/div> [\/xml] Striped Progress Bars 70% Complete 60% Complete (success) 20% Complete 60% Complete (warning) 80% Complete 50% Complete Show Code [xml] <div class="progress progress-striped active"> <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"> <span class="sr-only">70% Complete<\/span> <\/div> <\/div> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> <span class="sr-only">60% Complete (success)<\/span> <\/div> <\/div> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> <span class="sr-only">20% Complete<\/span> <\/div> <\/div> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> <span class="sr-only">60% Complete (warning)<\/span> <\/div> <\/div> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> <span class="sr-only">80% Complete<\/span> <\/div> <\/div> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-royal" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%"> <span class="sr-only">50% Complete<\/span> <\/div> <\/div> [\/xml] Progress Bars x-small 70% Complete 60% Complete (success) 20% Complete 60% Complete (warning) 80% Complete 50% Complete Progress Bars small 70% Complete 60% Complete (success) 20% Complete 60% Complete (warning) 80% Complete 50% Complete Progress Bars large 70% Complete 60% Complete 20% Complete 60% Complete 80% Complete 50% Complete Progress Bars compare size 70% Complete 60% Complete (success) 20% Complete 60% Complete (warning) Show Code [xml] <div class="progress progress-xs"> <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"> <span class="sr-only">70% Complete<\/span> <\/div> <\/div> <div class="progress progress-sm"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> <span class="sr-only">60% Complete (success)<\/span> <\/div> <\/div> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> <span class="sr-only">20% Complete<\/span> <\/div> <\/div> <div class="progress progress-lg"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> <span class="sr-only">60% Complete (warning)<\/span> <\/div> <\/div> [\/xml]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"page-left-menu.php","meta":{"footnotes":""},"class_list":["post-385","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/pages\/385","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/comments?post=385"}],"version-history":[{"count":0,"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/pages\/385\/revisions"}],"wp:attachment":[{"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/media?parent=385"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}