{"id":389,"date":"2014-10-21T10:50:39","date_gmt":"2014-10-21T10:50:39","guid":{"rendered":"http:\/\/ordasvit.com\/wp-human\/?page_id=389"},"modified":"2014-10-21T10:50:39","modified_gmt":"2014-10-21T10:50:39","slug":"progress-bare","status":"publish","type":"page","link":"https:\/\/ordasvit.com\/wp-human\/?page_id=389","title":{"rendered":"Progress bare"},"content":{"rendered":"

Basic<\/h3>\r\n\r\n
\r\n
\r\n 60% Complete<\/span>\r\n <\/div>\r\n<\/div>\r\n
\r\n
\r\n
How to use<\/a><\/div>\r\n
\r\n
\r\n
\r\n<div class=\"progress\">\r\n  <div class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 60%;\">\r\n    <span class=\"sr-only\">60% Complete<\/span>\r\n  <\/div>\r\n<\/div>\r\n<\/code>\r\n<\/pre>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n
\r\n\r\n
With label<\/h3>\r\n\r\n
\r\n  
\r\n    60%\r\n  <\/div>\r\n<\/div>\r\n
\r\n
\r\n
How to use<\/a><\/div>\r\n
\r\n
\r\n
\r\n  <div class=\"progress\">\r\n    <div class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 60%;\">\r\n      60%\r\n   <\/div>\r\n <\/div>\r\n<\/code>\r\n<\/pre>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n
\r\n\r\n\r\n\r\n
Contextual alternatives<\/h3>\r\n
\r\n  
\r\n    40% Complete (success)<\/span>\r\n  <\/div>\r\n<\/div>\r\n
\r\n  
\r\n    20% Complete<\/span>\r\n  <\/div>\r\n<\/div>\r\n
\r\n  
\r\n    60% Complete (warning)<\/span>\r\n  <\/div>\r\n<\/div>\r\n
\r\n  
\r\n    80% Complete<\/span>\r\n  <\/div>\r\n<\/div>\r\n\r\n
\r\n
\r\n
How to use<\/a><\/div>\r\n
\r\n
\r\n
\r\n\r\n<div class=\"progress\">\r\n  <div class=\"progress-bar progress-bar-success\" role=\"progressbar\" aria-valuenow=\"40\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 40%\">\r\n    <span class=\"sr-only\">40% Complete (success)<\/span>\r\n  <\/div>\r\n<\/div>\r\n<div class=\"progress\">\r\n  <div class=\"progress-bar progress-bar-info\" role=\"progressbar\" aria-valuenow=\"20\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 20%\">\r\n    <span class=\"sr-only\">20% Complete<\/span>\r\n  <\/div>\r\n<\/div>\r\n<div class=\"progress\">\r\n  <div class=\"progress-bar progress-bar-warning\" role=\"progressbar\" aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 60%\">\r\n    <span class=\"sr-only\">60% Complete (warning)<\/span>\r\n  <\/div>\r\n<\/div>\r\n<div class=\"progress\">\r\n  <div class=\"progress-bar progress-bar-danger\" role=\"progressbar\" aria-valuenow=\"80\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 80%\">\r\n    <span class=\"sr-only\">80% Complete<\/span>\r\n  <\/div>\r\n<\/div>\r\n\r\n<\/code>\r\n<\/pre>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n
\r\n\r\n
Striped<\/h3>\r\n\r\n
\r\n  
\r\n    40% Complete (success)<\/span>\r\n  <\/div>\r\n<\/div>\r\n
\r\n  
\r\n    20% Complete<\/span>\r\n  <\/div>\r\n<\/div>\r\n
\r\n  
\r\n    60% Complete (warning)<\/span>\r\n  <\/div>\r\n<\/div>\r\n
\r\n  
\r\n    80% Complete (danger)<\/span>\r\n  <\/div>\r\n<\/div>\r\n\r\n
\r\n
\r\n
How to use<\/a><\/div>\r\n
\r\n
\r\n
\r\n<div class=\"progress progress-striped\">\r\n  <div class=\"progress-bar progress-bar-success\" role=\"progressbar\" aria-valuenow=\"40\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 40%\">\r\n    <span class=\"sr-only\">40% Complete (success)<\/span>\r\n  <\/div>\r\n<\/div>\r\n<div class=\"progress progress-striped\">\r\n  <div class=\"progress-bar progress-bar-info\" role=\"progressbar\" aria-valuenow=\"20\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 20%\">\r\n    <span class=\"sr-only\">20% Complete<\/span>\r\n  <\/div>\r\n<\/div>\r\n<div class=\"progress progress-striped\">\r\n  <div class=\"progress-bar progress-bar-warning\" role=\"progressbar\" aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 60%\">\r\n    <span class=\"sr-only\">60% Complete (warning)<\/span>\r\n  <\/div>\r\n<\/div>\r\n<div class=\"progress progress-striped\">\r\n  <div class=\"progress-bar progress-bar-danger\" role=\"progressbar\" aria-valuenow=\"80\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 80%\">\r\n    <span class=\"sr-only\">80% Complete (danger)<\/span>\r\n  <\/div>\r\n<\/div>\r\n\r\n<\/code>\r\n<\/pre>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n
\r\n\r\n
Animated<\/h3>\r\n
\r\n  
\r\n    45% Complete<\/span>\r\n  <\/div>\r\n<\/div>\r\n\r\n
\r\n
\r\n
How to use<\/a><\/div>\r\n
\r\n
\r\n
\r\n<div class=\"progress progress-striped active\">\r\n  <div class=\"progress-bar\"  role=\"progressbar\" aria-valuenow=\"45\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 45%\">\r\n    <span class=\"sr-only\">45% Complete<\/span>\r\n  <\/div>\r\n<\/div>\r\n\r\n<\/code>\r\n<\/pre>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n
\r\n\r\n
Stacked<\/h3>\r\n\r\n
\r\n  
\r\n    35% Complete (success)<\/span>\r\n  <\/div>\r\n  
\r\n    20% Complete (warning)<\/span>\r\n  <\/div>\r\n  
\r\n    10% Complete (danger)<\/span>\r\n  <\/div>\r\n<\/div>\r\n\r\n
\r\n
\r\n
How to use<\/a><\/div>\r\n
\r\n
\r\n
\r\n<div class=\"progress\">\r\n  <div class=\"progress-bar progress-bar-success\" style=\"width: 35%\">\r\n    <span class=\"sr-only\">35% Complete (success)<\/span>\r\n  <\/div>\r\n  <div class=\"progress-bar progress-bar-warning\" style=\"width: 20%\">\r\n    <span class=\"sr-only\">20% Complete (warning)<\/span>\r\n  <\/div>\r\n  <div class=\"progress-bar progress-bar-danger\" style=\"width: 10%\">\r\n    <span class=\"sr-only\">10% Complete (danger)<\/span>\r\n  <\/div>\r\n<\/div>\r\n<\/code>\r\n<\/pre>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>","protected":false},"excerpt":{"rendered":"Basic 60% Complete How to use <div class=”progress”> <div class=”progress-bar” role=”progressbar” aria-valuenow=”60″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width:…<\/a>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/ordasvit.com\/wp-human\/index.php?rest_route=\/wp\/v2\/pages\/389"}],"collection":[{"href":"https:\/\/ordasvit.com\/wp-human\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ordasvit.com\/wp-human\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ordasvit.com\/wp-human\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ordasvit.com\/wp-human\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=389"}],"version-history":[{"count":1,"href":"https:\/\/ordasvit.com\/wp-human\/index.php?rest_route=\/wp\/v2\/pages\/389\/revisions"}],"predecessor-version":[{"id":390,"href":"https:\/\/ordasvit.com\/wp-human\/index.php?rest_route=\/wp\/v2\/pages\/389\/revisions\/390"}],"wp:attachment":[{"href":"https:\/\/ordasvit.com\/wp-human\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}