colors and widths from data attributes

using data attributes in css

by uge44

HTML

<div class="data-test animated">
    <span data-width="85"></span>
</div>
<div class="data-test">
    <span data-width="55"></span>
</div>
<div class="data-test">
    <span data-width="100"></span>
</div>
<div class="data-test">
    <span data-width="30"></span>
</div>
<div class="data-test">
    <span data-width="50"></span>
</div>
<div class="data-test">
    <span data-width="90"></span>
</div>
<div class="data-test">
    <span data-width="25"></span>
</div>
<div class="data-test">
    <span data-width="95"></span>
</div>
<div class="data-test">
    <span data-width="60"></span>
</div>
<div class="data-test">
    <span data-width="45"></span>
</div>

SCSS

.data-test {
  height: 30px;
	width: 100%;
	margin-bottom: 15px;
	background-color: #eee;
	span {
		display: block;
		height: 100%;
		background-color: #058FFF;
        transition: width 1s linear;
    }
    &.animated {
        span {
            width: 0%;
            @for $i from 1 through 100 {
                &[data-width="#{$i}"] {
                    width: calc(#{$i} * 1%);
                    transition: width 1s linear;
                }
            }
        }
    }
}