Progress Bar 22

{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"b730196a-4f7b-9c5b-a338-8d4bd48a92ea","type":"Block","tag":"div","classes":["d38df9bd-fc88-6b07-aa83-f6f3a16526ee"],"children":["f43a46bb-6841-eb3e-8421-0c9b8ccbfaee","6e3cb2e0-0f4d-54b0-4468-54a14807d076"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"f43a46bb-6841-eb3e-8421-0c9b8ccbfaee","type":"Block","tag":"div","classes":["d38df9bd-fc88-6b07-aa83-f6f3a16526ef"],"children":["eb75f78e-c4cd-e36b-bacd-c7822f554ec3","9c0481fe-784b-4658-3f74-ee1c73519b0a"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"eb75f78e-c4cd-e36b-bacd-c7822f554ec3","type":"Block","tag":"div","classes":["d38df9bd-fc88-6b07-aa83-f6f3a16526f0"],"children":["011a9ab2-4537-805d-4220-6001dd1506cb"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"011a9ab2-4537-805d-4220-6001dd1506cb","text":true,"v":"20"},{"_id":"9c0481fe-784b-4658-3f74-ee1c73519b0a","type":"Block","tag":"div","classes":["d38df9bd-fc88-6b07-aa83-f6f3a16526f1"],"children":["5c6570a3-d988-cc51-e269-cd31c1d5be04"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"5c6570a3-d988-cc51-e269-cd31c1d5be04","text":true,"v":"% complete"},{"_id":"6e3cb2e0-0f4d-54b0-4468-54a14807d076","type":"Block","tag":"div","classes":["d38df9bd-fc88-6b07-aa83-f6f3a16526f2"],"children":["8b6257b5-78ba-e68f-4d7b-f827f52c4e7e","7a3953c6-3c35-6361-ee5a-591f174b60f6"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"8b6257b5-78ba-e68f-4d7b-f827f52c4e7e","type":"Block","tag":"div","classes":["d38df9bd-fc88-6b07-aa83-f6f3a16526f3"],"children":["e0c53d11-60d8-c1c5-9488-f8f7bc058ad0"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"e0c53d11-60d8-c1c5-9488-f8f7bc058ad0","type":"Block","tag":"div","classes":["d38df9bd-fc88-6b07-aa83-f6f3a16526f4"],"children":[],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"7a3953c6-3c35-6361-ee5a-591f174b60f6","type":"Block","tag":"div","classes":["d38df9bd-fc88-6b07-aa83-f6f3a16526f5"],"children":[],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}}],"styles":[{"_id":"d38df9bd-fc88-6b07-aa83-f6f3a16526ee","fake":false,"type":"class","name":"progress-bar-22","namespace":"","comb":"","styleLess":"display: flex; flex-direction: column; flex-wrap: nowrap; grid-column-gap: 0.25rem; grid-row-gap: 0.25rem;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"d38df9bd-fc88-6b07-aa83-f6f3a16526ef","fake":false,"type":"class","name":"progress-bar-22_status","namespace":"","comb":"","styleLess":"display: flex; font-weight: 700;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"d38df9bd-fc88-6b07-aa83-f6f3a16526f0","fake":false,"type":"class","name":"progress-bar-22_percent","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"d38df9bd-fc88-6b07-aa83-f6f3a16526f1","fake":false,"type":"class","name":"progress-bar-22_text","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"d38df9bd-fc88-6b07-aa83-f6f3a16526f2","fake":false,"type":"class","name":"progress-bar-22_container","namespace":"","comb":"","styleLess":"position: relative; width: 100%; height: 0.5rem;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"d38df9bd-fc88-6b07-aa83-f6f3a16526f3","fake":false,"type":"class","name":"progress-bar-22_progress","namespace":"","comb":"","styleLess":"position: absolute; display: flex; width: 20%; height: 0.5rem; justify-content: flex-start; align-items: center; border-top-style: solid; border-top-width: 0.125rem; border-top-color: #0c60f5; border-right-style: solid; border-right-width: 0.125rem; border-right-color: #0c60f5; border-bottom-style: solid; border-bottom-width: 0.125rem; border-bottom-color: #0c60f5; border-left-style: solid; border-left-width: 0.125rem; border-left-color: #0c60f5; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; background-color: white;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"d38df9bd-fc88-6b07-aa83-f6f3a16526f4","fake":false,"type":"class","name":"progress-bar-22_decor","namespace":"","comb":"","styleLess":"width: 100%; height: 0.125rem; margin-right: 0.0625rem; margin-left: 0.0625rem; border-top-left-radius: 0.125rem; border-top-right-radius: 0.125rem; border-bottom-left-radius: 0.125rem; border-bottom-right-radius: 0.125rem; background-color: #f6ad12;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"d38df9bd-fc88-6b07-aa83-f6f3a16526f5","fake":false,"type":"class","name":"progress-bar-22_background","namespace":"","comb":"","styleLess":"width: 100%; height: 0.5rem; justify-content: flex-start; align-items: center; border-top-style: solid; border-top-width: 0.125rem; border-top-color: #d6deea; border-right-style: solid; border-right-width: 0.125rem; border-right-color: #d6deea; border-bottom-style: solid; border-bottom-width: 0.125rem; border-bottom-color: #d6deea; border-left-style: solid; border-left-width: 0.125rem; border-left-color: #d6deea; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; background-color: white;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0,"universalBindingsRemovedCount":0,"unlinkedSymbolCount":0}}
Built by hand with
from
Piixel Media