Progress Bar 20

{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"f8489721-e9a4-2e1f-0fb1-4891e4d952e6","type":"Block","tag":"div","classes":["9dd7dd69-53cb-cb85-41a7-1cc0bd2f1805"],"children":["0aa3fa72-a4d3-f8d5-31db-28a32ab5743b","8ca8d951-6e12-3aac-fd5c-4e809f5c150b"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"0aa3fa72-a4d3-f8d5-31db-28a32ab5743b","type":"Block","tag":"div","classes":["9dd7dd69-53cb-cb85-41a7-1cc0bd2f1806"],"children":["88f1ed80-6428-4323-d83c-5e32ce737ecf","15304243-a335-11ec-101b-c079911c8e75"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"88f1ed80-6428-4323-d83c-5e32ce737ecf","type":"Block","tag":"div","classes":["9dd7dd69-53cb-cb85-41a7-1cc0bd2f1807"],"children":["1359a1ef-4ec6-6898-f36d-21f6064bcb90"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"1359a1ef-4ec6-6898-f36d-21f6064bcb90","text":true,"v":"20"},{"_id":"15304243-a335-11ec-101b-c079911c8e75","type":"Block","tag":"div","classes":["9dd7dd69-53cb-cb85-41a7-1cc0bd2f1808"],"children":["3033c203-6b4e-ca80-a1d2-6f30915fdddf"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"3033c203-6b4e-ca80-a1d2-6f30915fdddf","text":true,"v":"% complete"},{"_id":"8ca8d951-6e12-3aac-fd5c-4e809f5c150b","type":"Block","tag":"div","classes":["9dd7dd69-53cb-cb85-41a7-1cc0bd2f1809"],"children":["1d3931b4-68c8-8bec-4c77-ff5a6000177f","a21e3ace-09ff-268f-7acd-635614063677"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"1d3931b4-68c8-8bec-4c77-ff5a6000177f","type":"Block","tag":"div","classes":["9dd7dd69-53cb-cb85-41a7-1cc0bd2f180a"],"children":[],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"a21e3ace-09ff-268f-7acd-635614063677","type":"Block","tag":"div","classes":["9dd7dd69-53cb-cb85-41a7-1cc0bd2f180b"],"children":[],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}}],"styles":[{"_id":"9dd7dd69-53cb-cb85-41a7-1cc0bd2f1805","fake":false,"type":"class","name":"progress-bar-20","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":"9dd7dd69-53cb-cb85-41a7-1cc0bd2f1806","fake":false,"type":"class","name":"progress-bar-20_status","namespace":"","comb":"","styleLess":"display: flex; font-weight: 700;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"9dd7dd69-53cb-cb85-41a7-1cc0bd2f1807","fake":false,"type":"class","name":"progress-bar-20_percent","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"9dd7dd69-53cb-cb85-41a7-1cc0bd2f1808","fake":false,"type":"class","name":"progress-bar-20_text","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"9dd7dd69-53cb-cb85-41a7-1cc0bd2f1809","fake":false,"type":"class","name":"progress-bar-20_container","namespace":"","comb":"","styleLess":"position: relative; width: 100%; height: 0.5rem;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"9dd7dd69-53cb-cb85-41a7-1cc0bd2f180a","fake":false,"type":"class","name":"progress-bar-20_progress","namespace":"","comb":"","styleLess":"position: absolute; width: 20%; height: 0.5rem; 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; background-color: #f6ad12;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"9dd7dd69-53cb-cb85-41a7-1cc0bd2f180b","fake":false,"type":"class","name":"progress-bar-20_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; 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