Cacher is the code snippet organizer for pro developers

@mixin graph {
    $list: 1 2 3 4 5 6 7 8 9 10;
    $bar-colors: #0068ac #8fc52d #00465c #444448 #ed7700;
    
    &.graph {
        list-style-type: none;
        margin: 0 1em;
        padding: 0;
    
        li {
            margin-bottom: 5px;
    
        	@each $unit in $list {
        		span[data-value="#{$unit}"] {
        		    font-weight: 700;
        		    
        			&:after {
        				content:'#{$unit}/10';
        				display: block;
        				text-align: right;
        				padding: 1em;
        				// width: ;
        				color: #fff;
        				box-sizing: border-box;
        				-moz-animation-name: moveBar-#{$unit};
                        -moz-animation-iteration-count: 1;
                        -moz-animation-fill-mode: forwards;
                        -moz-animation-duration: 2s;
                    
                        -webkit-animation-name: moveBar-#{$unit};
                        -webkit-animation-iteration-count: 1;
                        -webkit-animation-fill-mode: forwards;
                        -webkit-animation-duration: 2s;
                    
                        animation-name: moveBar-#{$unit};
                        animation-iteration-count: 1;
                        animation-fill-mode: forwards;
                        animation-duration: 2s;
        			}
        		}
        	}
        
            @for $i from 1 through length($bar-colors) {
                &:nth-of-type(#{length($bar-colors)}n+#{$i}) {
                    span {
                        &:after {
                            background-color: nth($bar-colors, $i)
                        }
                    }
                }
            }
        }
    }
}

#success {
    ul {
        @include graph;
    }
}

@for $b from 1 through 10 {
    $progress: #{$b}0%;
    @-moz-keyframes moveBar-#{$b} {
        from { width: 10%; }
        to { width: $progress; }
    }
    
    @-webkit-keyframes moveBar-#{$b} {
        from { width: 10%; }
        to { width: $progress; }
    }
    
    @keyframes moveBar-#{$b} {
        from { width: 10%; }
        to { width: $progress; }
    }  
}

<div id="success">
  <ul class="graph">
    <li><span data-value="8">Proactive</span></li>
    <li><span data-value="10">Accountable</span></li>
    <li><span data-value="10">Communicator</span></li>
    <li><span data-value="9">Skilled Presenter</span></li>
    <li><span data-value="8">Self-motivator</span></li>
    <li><span data-value="9">Positive Attitude</span></li>
  </ul>
</div>

The mixin is named 'graph' and its intended use is to auto-magically generate the necessary CSS output to style the TB Adv. JD Success Profile bar graph based on an accessible DOM value from the HTML coming from the 'data-value' attribute that is to be set within the graph list structure.

There are only 2 critical items to have to edit: 
- $bar-colors - a space separated, unique value list of colors that are present in the graph's creative design
- 'data-value="{i}"' - as this value will correspond to the desired value as dictated by creative design

More info on SASS control (logic) directives:
ref: [ http://thesassway.com/intermediate/if-for-each-while ]

.update v1.1:
- animation scripting

Note: You may wish to use: https://tmpworldwide.github.io/tmp-pattern-library/success-profile.html until this version can be made more accessible. data-attributes will be ignored by screen readers.