Graph Bar with flex-basis transition

Graph Bar with flex-basis transition.markdown

Graph Bar with flex-basis transition

A Pen by kcmr on CodePen.

License.

index.html

<div class="graph-bar">
  <div class="graph-bar__item" data-hour="0"><span>0</span><span class="graph-bar__count"></span></div>
  <div class="graph-bar__item" data-hour="1"><span>1</span><span class="graph-bar__count"></span></div>
  <div class="graph-bar__item" data-hour="2"><span>2</span><span class="graph-bar__count"></span></div>
  <div class="graph-bar__item" data-hour="3"><span>3</span><span class="graph-bar__count"></span></div>
  <div class="graph-bar__item" data-hour="4"><span>4</span><span class="graph-bar__count"></span></div>
  <div class="graph-bar__item" data-hour="5"><span>5</span><span class="graph-bar__count"></span></div>
  <div class="graph-bar__item" data-hour="6"><span>6</span><span class="graph-bar__count"></span></div>
  <div class="graph-bar__item" data-hour="7"><span>7</span><span class="graph-bar__count"></span></div>
  <div class="graph-bar__item" data-hour="8"><span>8</span><span class="graph-bar__count"></span></div>
  <div class="graph-bar__item" data-hour="9"><span>9</span><span class="graph-bar__count"></span></div>
  <div class="graph-bar__item" data-hour="10"><span>10</span><span class="graph-bar__count"></span></div>
  <div class="graph-bar__item" data-hour="11"><span>11</span><span class="graph-bar__count"></span></div>
  <div class="graph-bar__item" data-hour="12"><span>12</span><span class="graph-bar__count"></span></div>
  <div class="graph-bar__item" data-hour="13"><span>13</span><span class="graph-bar__count"></span></div>
  <div class="graph-bar__item" data-hour="14"><span>14</span><span class="graph-bar__count"></span></div>
  <div class="graph-bar__item" data-hour="15"><span>15</span><span class="graph-bar__count"></span></div>
  <div class="graph-bar__item" data-hour="16"><span>16</span><span class="graph-bar__count"></span></div>
  <div class="graph-bar__item" data-hour="17"><span>17</span><span class="graph-bar__count"></span></div>
  <div class="graph-bar__item" data-hour="18"><span>18</span><span class="graph-bar__count"></span></div>
  <div class="graph-bar__item" data-hour="19"><span>19</span><span class="graph-bar__count"></span></div>
  <div class="graph-bar__item" data-hour="20"><span>20</span><span class="graph-bar__count"></span></div>
  <div class="graph-bar__item" data-hour="21"><span>21</span><span class="graph-bar__count"></span></div>
  <div class="graph-bar__item" data-hour="22"><span>22</span><span class="graph-bar__count"></span></div>
  <div class="graph-bar__item" data-hour="23"><span>23</span><span class="graph-bar__count"></span></div>
</div>

script.js

function setRandom() {
  var counters = document.querySelectorAll('.graph-bar__count');
  for (var i=0, l=counters.length; i<l; i++) {
     counters[i].setAttribute('data-count', getRandom(0, 15));
     counters[i].setAttribute('data-intensity', getRandom(0, 4));
  }
}

function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

var to = setInterval(function() {
  setRandom();
}, 1000);

style.css

html { height: 100vh; }
body {
  font-family: sans-serif;
  font-size: 14px;
  background: #515E6E;
  display: flex;
  margin: 0;
  height: 100%;
}
.graph-bar {
  display: flex;
  flex: 0 1 1000px;
  margin: auto;
  height: 245px;
  
  &__item {
    flex: 1;
    margin-right: 2px;
    display: flex;
    flex-flow: column;
    justify-content: flex-end;
    
    span:not(.graph-bar__count) {
      flex: 0 27px;
      line-height: 27px;
      margin-top: 1px;
      background: #475362;
      color: #fff;
      text-align: center;
    }
  }
  
  &__count {
    flex: 0 1;
    flex-basis: 0;
    background: #38424E;
    border-radius: 2px 2px 0 0;
    order: -1;
    transition: flex-basis .2s ease;    
    position: relative;
    overflow: hidden;
  }
  
  @for $i from 0 through 15 {
    [data-count="#{$i}"] {
      flex-basis: 15px * $i;
    }
    
    [data-intensity="#{$i}"] {      
      &:after {
        transition: transform .3s ease .1s;
        content: "";   
        display: block;
        background: #DE5E6D;
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 15px;
        transform: scaleY($i);
        transform-origin: bottom;
      }
    }
  }
  
  

}