<div id="content"></div>
html, body
	margin: 0
	padding: 0

body
	height: 100%
	background-color: #333
	color: #ddd
	text-shadow: 1px 1px 2px #000
	padding: 15px

#content
	width: 200px
	margin: auto auto
	background-color: #242424
	border-radius: 8px
	padding: 8px

.progressBar
	font-size: 75%

	&.out
		border-radius: 50px
		position: relative
		display: inline-block
		height: 1em
		width: 100%
		background-color: #333
		overflow: hidden
		box-shadow: 0 0 1px 1px #000, 0 0 1px 2px #444
		will-change: transform

		&:before
			content: ""
			left: 0
			top: 0
			height: 100%
			width: 100%
			position: absolute
			border-radius: inherit
			box-shadow: inset 0 0 5px 0 #000
			z-index: 2

	&.in
		position: absolute
		border-radius: inherit
		height: 100%
		width: 100%
		top: 0
		left: -100%
		box-shadow: 0 0 5px 1px #000
		overflow: hidden

		&:before
			content: ""
			position: absolute
			height: 2000%
			width: 200%
			transform: rotate(20deg)
			right: -50%
			top: -1000%
			background-image: linear-gradient(to right, #fff 0%, #fff 50%, #ddd 50%, #ddd 100%)
			background-size: 20px 10px
View Compiled
const random = (function() {
  // i made this generator public domain over there: https://gist.github.com/6174/6062387#gistcomment-3067955
  const buffer = new Uint8Array(32);
  let index;
  let bitIndex;
  const max = BigInt(buffer.length);

  const reset = function() {
    index = 0n;
    bitIndex = 0n;
    crypto.getRandomValues(buffer);
  };
  reset();

  const getBits = function(count) {
    let bits = 0n;
    while (count > 0n) {
      const todo = count < 8n - bitIndex ? count : 8n - bitIndex;
      count -= todo;
      bits = bits << todo;
      bits += (BigInt(buffer[index]) >> bitIndex) & ((1n << todo) -1n);
      bitIndex += todo;
      if (bitIndex === 8n) {
        bitIndex = 0n;
        index++;
      }
      if (index === max) {
        reset();
      }
    }
    return bits;
  };

  const countBits = function(num) {
    let bitCount = 0n;
    while (num > 0n) {
      bitCount++;
      num = num >> 1n;
    }
    return bitCount;
  };

  const getN = function(max, bitCount) {
    if (max <= 0n) {
      throw new Error("this does not compute unless you want an infinite loop");
    }
    let out;

    do {
      out = getBits(bitCount);
    } while (out >= max);

    return out;
  };

  return function(input, count) {
    let wasNumber = false;
    let wasString = false;

    switch (typeof input) {
      default: {
        throw new Error("unsupported input");
      }
      case "number": {
        wasNumber = true;
        input = BigInt(input);
      }
      case "bigint": {
        const out = getN(input, countBits(max));
        return wasNumber ? Number(out) : out;
      }
      case "string": {
        wasString = true;
        input = input.split("");
      }
      case "object": {
        if (!Array.isArray(input)) {
          throw new Error("objects are not supported here");
        }
        if (typeof count != "number" && typeof count != "bigint") {
          throw new Error("you need to specify a count");
        }
        const contentCount = BigInt(input.length);
        const bitCount = countBits(contentCount);
        const out = [...Array(count)].map(_=> {
          return input[getN(contentCount, bitCount)];
        });
        return wasString ? out.join("") : out;
      }
    }
  };
})();

var body = document.body;
var content = document.getElementById("content");

var ProgressBar = function (parent) {
	var n = this.node = document.createElement("div");
	n.setAttribute("class", "progressBar out");
	var i = this.prog = document.createElement("div");
	i.setAttribute("class", "progressBar in");
	n.appendChild(i);
	
	if (parent) parent.appendChild(n);
	
	this.overflow = false;
	this.value = 0;
};

Object.defineProperty(ProgressBar.prototype, "value", {
	get: function () {
		return this.val;
	},
	set: function (val) {
		this.val = Math.min(Math.max(val, 0), this.overflow ? 200 : 100);
		this.prog.style.transform = "translate(" + val + "%)";
	}
});

var arr = [0,1,2,3];
var bars = [];
bars.max = 0;
bars.iterations = 0;
bars.info = document.createTextNode("");
content.appendChild(bars.info);
content.appendChild(document.createElement("br"));

bars.display = function () {
	
	for (var i = 0; i < 25; i++) {
		const src = [].concat(arr);
		const tgt = [];
		while (src.length > 0) {
			tgt.push(src.splice(random(src.length), 1));
		}
		tgt.forEach(function (v, i) {
			bars[v].add(i);
		});
		bars.iterations++;
	}
	
	bars.info.nodeValue = "iterations: " + bars.iterations;
	bars.forEach(function(v){
		v.forEach(function (iv) {
			iv.value = bars.max == 0 ? 0 : iv.count / bars.max * 100;
		});
	});
}

arr.forEach(function(v, i){
	var innerBars = [];
	innerBars.add = function (i) {
		innerBars[i].count++;
		bars.max = Math.max(innerBars[i].count, bars.max);
	};
	bars.push(innerBars);
	content.appendChild(document.createTextNode(v));
	content.appendChild(document.createElement("br"));
	arr.forEach(function(iv, i2){
		var prog = new ProgressBar(content);
		prog.count = 0;
		innerBars.push(prog);
		content.appendChild(document.createElement("br"));
	});
});

(function demo () {
	bars.display();
	requestAnimationFrame(demo);
})();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js