UCI

Graph progress bar 

<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 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="{{total}}" data-num-upload="{{num-validated}}"/>
    </svg>
</div>
 
{
  "total": "100",
  "num-validated": "25"
}
  • Content: 
    .graph-progress-bar {
    &-content {
        width:100%;
        height:100%;
        /* transform: rotate(30deg); */
    }
    .donuts {
        stroke-width:1.4px;
        &.ring {
            stroke:var(--color-accent-dark);
        }
        &.segment {
            stroke:var(--color-accent);
        }
    }
}
.line-graph {
    .base {
        stroke:var(--color-gray-10);
        position: relative;
    }
    .line {
        stroke:var(--color-accent-dark);
        position: absolute;
        z-index: 1;
    }
}
  • URL: /components/raw/graph-progress-bar/graph-progress-bar.css
  • Filesystem Path: src/01-atoms/graph-progress-bar/graph-progress-bar.css
  • Size: 522 Bytes

No notes defined.