UCI

Progress bar 

<div class="progress-bar-documents">
    <div class="progress-bar-documents__content">
        <div class="progress-bar-documents__content__text">
            <span class="stepper number-m">25<span>%</span></span><label class="label-m" for="">Completado</label>

        </div>
        <div class="col progress-documents-bar__content__graph">
            <div class="graph-progress-bar">
                <svg class="line-graph" width="100%" height="10" version="1.1" xmlns="http://www.w3.org/2000/svg">
                    <line class="base" x1="0" x2="100%" y1="0" y2="0" stroke-width="26" />
                    <line class="line js-line-segment" x1="0" x2="0" y1="0" y2="0" stroke-width="26" data-total="100" data-num-upload="25" />
                </svg>
            </div>
        </div>
    </div>
</div>
 
<div class="progress-bar-documents">
	<div class="progress-bar-documents__content">
        <div class="progress-bar-documents__content__text">
			<span class="stepper number-m">{{total}}<span>%</span></span>{{> '@label-m' text}}
		</div>
		<div class="col progress-documents-bar__content__graph">
			{{> '@graph-progress-bar' progress}}
		</div>
	</div>
</div>
 
{
  "progress": {
    "total": "100",
    "num-validated": "25"
  },
  "total": "25",
  "text": {
    "text": "Completado"
  }
}
  • Content: 
    .progress-bar-documents {
    &__content {
        display: flex;
        flex-flow: column;
        max-width: 100%;
        width: 100%;
        align-content: center;
        margin-top: var(--gutter-lg-vertical);
        margin-bottom: var(--gutter-ms-vertical);
        @media(--viewport-xxs-max) {
            display: block;
        }
        &__graph {
            display: flex;
            align-items: center;
            justify-content: center;
            padding:0;
            &-pending {
                position: relative;
                width:250px;
                height:13px;
                justify-content: flex-start;
            }
        }
        &__text{
           
            display: flex;
            align-items:center;
            justify-content:  fles-start;
            gap: 10px;
            .stepper {
                padding: 8px 16px 4px 16px;
                background-color: var(--color-tertiary-brand);
            }
            .number-m {
                color: #21272A;
                margin-bottom: 8px;
            }
        }
    }
}
  • URL: /components/raw/progress-bar-documents/progress-bar-documents.css
  • Filesystem Path: src/02-molecules/progress-bar-documents/progress-bar-documents.css
  • Size: 1.1 KB

No notes defined.