@keyframes load {
	from {
		width: 0%
	}
}

@-webkit-keyframes load {
	from {
		width: 0%
	}
}

@-moz-keyframes load {
	from {
		width: 0%
	}
}

@-o-keyframes load {
	from {
		width: 0%
	}
}

.bar {
	background-color: #DBC596;
	padding: 2px;
	margin-bottom: 5px;
	font-size: 10px;
	color: #FFF;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
	border-width: 1px;
	border-color: #373737;
	background: rgba(0, 0, 0, .05);
}

.bar::before {
	content: attr(data-skill);
	background-color: #000000;
	display: inline-block;
	padding: 5px 0 5px 10px;
	border-radius: inherit;
	animation: load 2s 0s;
	-webkit-animation: load 2s 0s;
	-moz-animation: load 2s 0s;
	-o-animation: load 2s 0s;
}

.bar.front::before {
	background-color: #000000;
}

.bar.back::before {
	background-color: #000000;
}

.bar.learning::before {
	width: calc(20% - 10px);
}

.bar.basic::before {
	width: calc(40% - 10px);
}

.bar.intermediate::before {
	width: calc(60% - 10px);
}

.bar.advanced::before {
	width: calc(80% - 10px);
}

.bar.expert::before {
	width: calc(100% - 10px);
}