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 animated">
    <span data-width="55"></span>
</div>
<div class="data-test animated">
    <span data-width="100"></span>
</div>
<div class="data-test animated">
    <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;
    border-radius: 3px;
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
	span {
		display: block;
		height: 100%;
		background-color: #058FFF;
        width: 0%;
        transition: width 1s linear;
    }
  
    @for $i from 1 through 100 {
	    &[data-width="#{$i}"] {
	        span {
	            width: 0%;
	            &.animated {
				    width: calc(#{$i} * 1%);
                    transition: width 1s linear;
			    }
		    }
	    }
    }
}

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}