Progress Bar

Github URL
Adobe URL
Source URL
Title
Default
Content

Default progress bar with no configuration.

Result
0 100
0
Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
jcr:lastModifiedBy: admin
jcr:created:
jcr:lastModified:
sling:resourceType: core-components-examples/components/progressbar
Markup:
<div class="progressbar">
  <div id="progressbar-8b45985e46" class="cmp-progressbar" data-cmp-data-layer="{&quot;progressbar-8b45985e46&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/progressbar&quot;,&quot;repo:modifyDate&quot;:&quot;2020-04-13T07:42:23Z&quot;}}">
    <span class="cmp-progressbar__label--completed">0</span>
    <span class="cmp-progressbar__label--remaining">100</span>
    <div class="cmp-progressbar__bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0.0%">0</div>
  </div>
</div>
JSON:
{"id":"progressbar-8b45985e46","completed":0,"remaining":100,":type":"core-components-examples\/components\/progressbar","dataLayer":{"progressbar-8b45985e46":{"@type":"core-components-examples\/components\/progressbar","repo:modifyDate":"2020-04-13T07:42:23Z"}}}
PostCSS: CSS: Title
Custom progress
Content

Progress bar with custom defined completion.

Result
33.3 66.7
33.3
Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
completed: 33.3
jcr:lastModifiedBy: admin
jcr:created:
jcr:lastModified:
sling:resourceType: core-components-examples/components/progressbar
Markup:
<div class="progressbar">
  <div id="progressbar-3b51f979e5" class="cmp-progressbar" data-cmp-data-layer="{&quot;progressbar-3b51f979e5&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/progressbar&quot;,&quot;repo:modifyDate&quot;:&quot;2020-04-13T08:56:39Z&quot;}}">
    <span class="cmp-progressbar__label--completed">33.3</span>
    <span class="cmp-progressbar__label--remaining">66.7</span>
    <div class="cmp-progressbar__bar" role="progressbar" aria-valuenow="33.3" aria-valuemin="0" aria-valuemax="100" style="width: 33.3%">33.3</div>
  </div>
</div>
JSON:
{"id":"progressbar-3b51f979e5","completed":33.299999999999997,"remaining":66.700000000000003,":type":"core-components-examples\/components\/progressbar","dataLayer":{"progressbar-3b51f979e5":{"@type":"core-components-examples\/components\/progressbar","repo:modifyDate":"2020-04-13T08:56:39Z"}}}
PostCSS: CSS:

By mchavez

Hi, I am Michael Chavez, a web developer based in San Francisco, California. I started Space-Rocket in 2012 to make custom content management systems that are tailored to business needs.

Leave a comment

Your email address will not be published. Required fields are marked *