html5-progress-element

html5-progress-element.markdown

html5-progress-element

A Pen by Dhiraj Indurthy on CodePen.

License.

index.html

<section class="container">
	<section class="item">
		<progress value="63" max="100">70 %</progress>
	</section>
</section>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/axe-core/2.4.2/axe.min.js"></script>

style.scss

body {
  margin:0 auto;
  font-family:"Indie Flower","Comic Sans MS", cursive, sans-serif;
	background-color: #333;
	color: #77EDF4;
}
.container {
	font-size: 12px;	
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	height: 100vh;
}

progress {
	width: 40rem;
	height: 1.5rem;
	-webkit-appearance: none;
  -moz-appearance: none;
   appearance: none;
	border-radius: 0.25rem;
}

progress::-webkit-progress-value { 
	background: #77EDF4;
	border-radius: 0.25rem;
	-webkit-transition: width 1s; /* Safari */
	transition: width 2s;
}
progress::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 0.25rem;
}

progress::-moz-progress-bar {
  background-color: #77EDF4;
  border-radius: 0.25rem;
  -moz-transition: width 2s;
  transition: width 2s;
}

styles

<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />