JSFiddle - React, Tailwind, and code Playground

mini bar graph

by Plippie Plop

HTML

<div class="mini-bar-container">
  <div class="mini-bar"></div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
.mini-bar-container {
  font-family: 'Roboto Condensed';
  width: 80vw;
  margin: auto;
  margin-top: 2em;
  padding: .2em;
  border: 1px solid;
  border-radius: 3px;
  font-size: .7rem;
  background-color: rgb(240, 240, 240);
  display: flex;
  flex-direction: row;
  flex-wrap: no-wrap;
  align-items: center;
}

.mini-bar {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.mini-bar-container .bar-total {
  flex: 0 0 auto;
  padding: .25em .5em;
  background-color: rgb(200, 200, 200);
  border-radius: 0 3px 3px 0;
}

.mini-bar div {
  text-align: center;
  color: rgba(0, 0, 0, 1);
  font-weight:700;
  letter-spacing: .1rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1 1 auto;
  padding:0;
}

.mini-bar div span {
  display:flex;
  align-items:center;
  padding: .25em .5em;   
  height:20px;
  
}

.mini-bar div span:nth-child(2) { 
  background-color:rgba(0,0,0,.01);
  border-radius:3px;
  margin-left:auto;
  text-shadow:0 1px 1px rgba(255,255,255,.5);
}



.mini-bar div:nth-child(1) {
  background-color: #004ecb;
  border-radius: 3px 0 0 3px;
 
}
.mini-bar div:nth-child(1) span:nth-child(2){
  margin-left:auto;
  background:
  radial-gradient(#e64a19 25%, transparent 25%) 0 0,
  radial-gradient(#e64a19 25%, transparent 25%) 15px 15px,
  radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
  radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 15px 15px;
  background-size: 10px 10px;
  background-color: #004ecb;
  flex:0 0 36%;
}

.mini-bar div:nth-child(2) {
  background-color: #fdd835;  
}
.mini-bar div:nth-child(2) span:nth-child(2) {
   border-radius:0 3px 3px 0; 
}

.mini-bar div:nth-child(2) span:nth-child(1){
  background:
  radial-gradient(#e64a19 25%, transparent 25%) 0 0,
  radial-gradient(#e64a19 25%, transparent 25%) 15px 15px,
  radial-gradient(rgba(255,255,255,.1) 15%, transparent...

JavaScript

function showMiniBar(elm) {
  var a = 444;
  var b = 222;
  var c = 111;
  var t = a + b + c;
  var ap = Math.round(a / t * 100);
  var bp = Math.round(b / t * 100);
  var cp = Math.round(c / t * 100);
  var mb = document.getElementsByClassName('mini-bar');
  var total = document.createElement('div');
  
  total.innerHTML = 'Total:<strong>' + t + '</strong>';

  mb[0].innerHTML =
    '<div style="flex:1 1 ' + a / t * 100 + '%;"><span>' + a + '</span><span></span></div>' + '<div style="flex:1 1 ' + b / t * 100 + '%;"><span></span><span>' + b + '</span></div>' +
    '<div style="flex:1 1 ' + c / t * 100 + '%;"><span></span></div>';


  document.getElementsByClassName('mini-bar-container')[0].appendChild(total);

}



//show minibar:
(function() {
  showMiniBar();
})();