14+ CSS Progress Bar Examples

This post contains a total of 14+ CSS Progress Bar Examples with Source Code. All these Progress Bars are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Progress Bar Examples

1. By Stephen Emlund

Made by Stephen Emlund. Donation Progress Bar. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
  padding: 50px;  
}

.progress-bg {
	margin: 0 auto;
	width: 65%;
	height: 78px;
	border-radius: 10px;
  text-align: center;
	-moz-box-shadow:    inset 0 0 10px #ccc;
	-webkit-box-shadow: inset 0 0 10px #ccc;
	box-shadow:         inset 0 0 10px #ccc;
}

.progress-bar {
	height: 78px;
	border-radius: 10px;
	float: left;
	width: 50%;
	/* fallback */ 
	background-color: #1c314a; 
	
	/* Safari 4-5, Chrome 1-9 */ 
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1c314a), to(#27425f)); 
	
	/* Safari 5.1, Chrome 10+ */ 
	background: -webkit-linear-gradient(top, #1c314a, #27425f); 
	
	/* Firefox 3.6+ */ 
	background: -moz-linear-gradient(top, #1c314a, #27425f); 
	
	/* IE 10 */ 
	background: -ms-linear-gradient(top, #1c314a, #27425f); 
	
	/* Opera 11.10+ */ 
	background: -o-linear-gradient(top, #1c314a, #27425f);	
}

.progress-bg h3.goal, .progress-bg h3.raised {
	font-family: Arial,sans-serif;
  font-size: 2em;
  font-weight: 600;
	line-height: 78px;
	margin: 0;
	padding: 0;
	text-align: center;
	display: inline;
}


.progress-bg h3.raised {
	color: #fff;
	margin: 14px 25px 0 50px;
	padding: 0 25px 0 0;
}

.progress-bg h3.goal {
	color: #b2b2b2;
  text-align: center;
}

body .progress-bg h3.raised {
    -webkit-animation: fadein 4s; /* Safari and Chrome */
       -moz-animation: fadein 4s; /* Firefox */
        -ms-animation: fadein 4s; /* Internet Explorer */
         -o-animation: fadein 4s; /* Opera */
            animation: fadein 4s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}​

/* Opera */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}​

.progress-bg h3.goal {
	float: right;
	display: inline;
	padding: 0 25px 0 0;
  text-align: center;
}

body .progress-bg div {
	-webkit-animation: progress-bar 2s ease forwards;
	-moz-animation: progress-bar 2s ease forwards;
	-o-animation: progress-bar 2s ease forwards;
	animation: progress-bar 2s ease forwards;
}

@-webkit-keyframes progress-bar {
    from { width: 0%; }
    to { width: 50%; }
}

@-moz-keyframes progress-bar {
    from { width: 0%; }
    to { width: 50%; }
}

@-o-keyframes progress-bar {
    from { width: 0%; }
    to { width: 50%; }
}

@keyframes progress-bar {
    from { width: 0%; }
    to { width: 50%; }
}
</style>
</head>
<body>
  <div class="progress-bg">
    	<div class="progress-bar">
        	<h3 class="raised">$50,000&nbsp;raised </h3>
        </div>
        	
        	<h3 class="goal">Goal: $100,000</h3>
    </div>
</body>
</html>

2. By FEAR oF CODE

Made by FEAR oF CODE. light progress bar with colorful animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body,
html,
.wrapper {
  width: 100%;
  height: 100%;
}
.wrapper {
  position: relative;
  background: #e7f0f7;
}
.progressbar {
  display: block;
  position: absolute;
  z-index: 9;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 400px;
  height: 30px;
}
.progressbar::before,
.progressbar::after {
  content: '';
  display: block;
  position: absolute;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background-image: linear-gradient(90deg, #e91e63 0%, #e91e63 20%, #03a9f4 20%, #03a9f4 40%, #8bc34a 40%, #8bc34a 60%, #ffeb3b 60%, #ffeb3b 80%, #ff5722 80%, #ff5722 100%);
  background-position: 0 0;
  background-repeat: repeat-x;
  -webkit-animation: movebar 5s linear infinite;
          animation: movebar 5s linear infinite;
}
.progressbar::before {
  box-shadow: 0 6px 10px 0 rgba(0,0,0,0.1);
}
.progressbar::after {
  z-index: 9;
  top: 6px;
  filter: blur(16px);
  opacity: 0.7;
}
.stylization {
  position: absolute;
  z-index: 999;
  height: 4px;
  width: 90%;
  left: 5%;
  top: 6px;
  opacity: 0.3;
}
.stylization::before,
.stylization::after {
  content: '';
  display: block;
  position: absolute;
  height: 4px;
  top: 0;
  border-radius: 2px;
}
.stylization::before {
  background: #fff;
  left: 0;
  right: 10px;
}
.stylization::after {
  width: 6px;
  background: #fff;
  right: 0;
}
@-webkit-keyframes movebar {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 400px 0;
  }
}
@keyframes movebar {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 400px 0;
  }
}
</style>
</head>
<body>
  <div class="wrapper">
  <div class="progressbar">
    <div class="stylization"></div>
  </div>
</div>
</body>
</html>

3. By Chokcoco

Made by Chokcoco. Pure Css Wave Progress bar. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
<style>
.container {
  position: absolute;
  width: 200px;
  height: 200px;
  padding: 5px;
  border: 5px solid #76daff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
}

.wave {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #76daff;
  border-radius: 50%;
}
.wave::before, .wave::after {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  top: 0;
  left: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 45%;
  transform: translate(-50%, -70%) rotate(0);
  -webkit-animation: rotate 6s linear infinite;
          animation: rotate 6s linear infinite;
  z-index: 1;
}
.wave::after {
  border-radius: 47%;
  background-color: rgba(255, 255, 255, 0.9);
  transform: translate(-50%, -70%) rotate(0);
  -webkit-animation: rotate 10s linear -5s infinite;
          animation: rotate 10s linear -5s infinite;
  z-index: 2;
}

p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 36px;
  color: #000;
  z-index: 10;
}

@-webkit-keyframes rotate {
  50% {
    transform: translate(-50%, -73%) rotate(180deg);
  }
  100% {
    transform: translate(-50%, -70%) rotate(360deg);
  }
}

@keyframes rotate {
  50% {
    transform: translate(-50%, -73%) rotate(180deg);
  }
  100% {
    transform: translate(-50%, -70%) rotate(360deg);
  }
}
</style>
</head>
<body>
<div class="container">
    <div class="wave"></div>
    <p>45%</p>
</div>
</body>
</html>

4. By Kevin Sweeney

Made by Kevin Sweeney. Static Progress Bar &. Progress Bar with Opposing Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
<style>
body, html {
  height: 100%;
  background: #0e0e15;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

@keyframes animate-stripes {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 60px 0;
  }
}
@keyframes auto-progress {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
.progress-bar {
  background-color: #1a1a1a;
  height: 45px;
  width: 450px;
  margin: 50px auto;
  border-radius: 5px;
  box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
}

.stripes {
  background-size: 30px 30px;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.stripes.animated {
  animation: animate-stripes 0.6s linear infinite;
}

.stripes.animated.slower {
  animation-duration: 1.25s;
}

.stripes.reverse {
  animation-direction: reverse;
}

.progress-bar-inner {
  display: block;
  height: 45px;
  width: 0%;
  background-color: #34c2e3;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  position: relative;
  animation: auto-progress 10s infinite linear;
}
</style>
</head>
<body>
  <div>
  <div class="progress-bar-container">
    <div class="progress-bar stripes">
      <span class="progress-bar-inner"></span>
    </div>
    <div class="progress-bar stripes animated reverse slower">
      <span class="progress-bar-inner"></span>
    </div>
  </div>
</div>
</body>
</html>

5. By Thibaut

Made by Thibaut. Animated Progress Bar. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
<style>
body {
  font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
  color: #404040;
  background: #2a2a2a;
}

.container {
  margin: 60px auto;
  width: 400px;
  text-align: center;
}

.container .progress {
  margin: 0 auto;
  width: 400px;
}

.progress {
  padding: 4px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}

.progress-bar {
  height: 16px;
  border-radius: 4px;
	background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  -webkit-transition: 0.4s linear;
  -moz-transition: 0.4s linear;
  -o-transition: 0.4s linear;
  transition: 0.4s linear;
  -webkit-transition-property: width, background-color;
  -moz-transition-property: width, background-color;
  -o-transition-property: width, background-color;
  transition-property: width, background-color;
  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}

/*
 * Note: using adjacent or general sibling selectors combined with
 *       pseudo classes doesn't work in Safari 5.0 and Chrome 12.
 *       See this article for more info and a potential fix:
 *       https://css-tricks.com/webkit-sibling-bug/
 */

#five:checked ~ .progress > .progress-bar {
  width: 5%;
  background-color: #f63a0f;
}

#twentyfive:checked ~ .progress > .progress-bar {
  width: 25%;
  background-color: #f27011;
}

#fifty:checked ~ .progress > .progress-bar {
  width: 50%;
  background-color: #f2b01e;
}

#seventyfive:checked ~ .progress > .progress-bar {
  width: 75%;
  background-color: #f2d31b;
}

#onehundred:checked ~ .progress > .progress-bar {
  width: 100%;
  background-color: #86e01e;
}

.radio {
  display: none;
}

.label {
  display: inline-block;
  margin: 0 5px 20px;
  padding: 3px 8px;
  color: #aaa;
  text-shadow: 0 1px black;
  border-radius: 3px;
  cursor: pointer;
}

.radio:checked + .label {
  color: white;
  background: rgba(0, 0, 0, 0.25);
}
</style>
</head>
<body>
  <div class="container">
  <input type="radio" class="radio" name="progress" value="five" id="five">
  <label for="five" class="label">5%</label>

  <input type="radio" class="radio" name="progress" value="twentyfive" id="twentyfive" checked>
  <label for="twentyfive" class="label">25%</label>

  <input type="radio" class="radio" name="progress" value="fifty" id="fifty">
  <label for="fifty" class="label">50%</label>

  <input type="radio" class="radio" name="progress" value="seventyfive" id="seventyfive">
  <label for="seventyfive" class="label">75%</label>

  <input type="radio" class="radio" name="progress" value="onehundred" id="onehundred">
  <label for="onehundred" class="label">100%</label>

  <div class="progress">
    <div class="progress-bar"></div>
  </div>
</div>
</body>
</html>

6. By Rafael GonzΓ‘lez

Made by Rafael GonzΓ‘lez. Pure CSS Liquid Progress bars. Source

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="utf-8">
    <title>Pure CSS Progress</title>
    <meta content="chrome=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable = no">
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1em;
  text-align: center;
  color: #444;
  background: #d0d0d0;
}

h1 {
  font-size: 2.5em;
  margin: 2em 0 .5em;
}

h2 {
  margin-bottom: 3em;
}

em,
strong {
  font-weight: 700;
}

input {
  display: none;
}

header p {
  margin-bottom: 0;
}

section {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 2em;
  padding: 0;
}
section:last-of-type {
  margin-bottom: 0;
}
section article {
  align-self: center;
  width: 20em;
  margin-bottom: 2em;
}
section article p, section article:last-of-type {
  margin-bottom: 0;
}

p {
  line-height: 1.5em;
  max-width: 20em;
  margin: 1.5em auto 2em;
  padding-bottom: 1.5em;
}
p span {
  display: block;
}

.container {
  z-index: 1;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 4em;
}

/*
*
*
START // CHART'S RULES
 -> "if you're picking code, don't forget the variables :)"
*/
.chart {
  font-size: 1em;
  perspective: 1000px;
  perspective-origin: 50% 50%;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
}

.bar {
  font-size: 1em;
  position: relative;
  height: 10em;
  transition: all 0.3s ease-in-out;
  transform: rotateX(60deg) rotateY(0deg);
  transform-style: preserve-3d;
}
.bar .face {
  font-size: 2em;
  position: relative;
  width: 100%;
  height: 2em;
  background-color: rgba(254, 254, 254, 0.3);
}
.bar .face.side-a, .bar .face.side-b {
  width: 2em;
}
.bar .side-a {
  transform: rotateX(90deg) rotateY(-90deg) translateX(2em) translateY(1em) translateZ(1em);
}
.bar .side-b {
  transform: rotateX(90deg) rotateY(-90deg) translateX(4em) translateY(1em) translateZ(-1em);
  position: absolute;
  right: 0;
}
.bar .side-0 {
  transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(-1em);
}
.bar .side-1 {
  transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(3em);
}
.bar .top {
  transform: rotateX(0deg) rotateY(0) translateX(0em) translateY(4em) translateZ(2em);
}
.bar .floor {
  box-shadow: 0 0.1em 0.6em rgba(0, 0, 0, 0.3), 0.6em -0.5em 3em rgba(0, 0, 0, 0.3), 1em -1em 8em #fefefe;
}

.growing-bar {
  transition: all 0.3s ease-in-out;
  background-color: rgba(236, 0, 140, 0.6);
  width: 100%;
  height: 2em;
}

.bar.yellow .side-a,
.bar.yellow .growing-bar {
  background-color: rgba(241, 196, 15, 0.6);
}
.bar.yellow .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em rgba(241, 196, 15, 0.8);
}
.bar.yellow .floor .growing-bar {
  box-shadow: 0em 0em 2em rgba(241, 196, 15, 0.8);
}

.bar.red .side-a, input[id='red']:checked ~ .chart .side-a,
.bar.red .growing-bar,
input[id='red']:checked ~ .chart .growing-bar {
  background-color: rgba(236, 0, 140, 0.6);
}
.bar.red .side-0 .growing-bar, input[id='red']:checked ~ .chart .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em rgba(236, 0, 140, 0.8);
}
.bar.red .floor .growing-bar, input[id='red']:checked ~ .chart .floor .growing-bar {
  box-shadow: 0em 0em 2em rgba(236, 0, 140, 0.8);
}

.bar.cyan .side-a, input[id='cyan']:checked ~ .chart .side-a,
.bar.cyan .growing-bar,
input[id='cyan']:checked ~ .chart .growing-bar {
  background-color: rgba(87, 202, 244, 0.6);
}
.bar.cyan .side-0 .growing-bar, input[id='cyan']:checked ~ .chart .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em #57caf4;
}
.bar.cyan .floor .growing-bar, input[id='cyan']:checked ~ .chart .floor .growing-bar {
  box-shadow: 0em 0em 2em #57caf4;
}

.bar.navy .side-a,
.bar.navy .growing-bar {
  background-color: rgba(10, 64, 105, 0.6);
}
.bar.navy .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em rgba(10, 64, 105, 0.8);
}
.bar.navy .floor .growing-bar {
  box-shadow: 0em 0em 2em rgba(10, 64, 105, 0.8);
}

.bar.lime .side-a, input[id='lime']:checked ~ .chart .side-a,
.bar.lime .growing-bar,
input[id='lime']:checked ~ .chart .growing-bar {
  background-color: rgba(118, 201, 0, 0.6);
}
.bar.lime .side-0 .growing-bar, input[id='lime']:checked ~ .chart .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em #76c900;
}
.bar.lime .floor .growing-bar, input[id='lime']:checked ~ .chart .floor .growing-bar {
  box-shadow: 0em 0em 2em #76c900;
}

.bar.white .side-a,
.bar.white .growing-bar {
  background-color: rgba(254, 254, 254, 0.6);
}
.bar.white .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em #fefefe;
}
.bar.white .floor .growing-bar {
  box-shadow: 0em 0em 2em #fefefe;
}

.bar.gray .side-a,
.bar.gray .growing-bar {
  background-color: rgba(68, 68, 68, 0.6);
}
.bar.gray .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em #444;
}
.bar.gray .floor .growing-bar {
  box-shadow: 0em 0em 2em #444;
}

.chart .bar.yellow-face .face {
  background-color: rgba(241, 196, 15, 0.2);
}

.chart .bar.lime-face .face {
  background-color: rgba(118, 201, 0, 0.2);
}

.chart .bar.red-face .face {
  background-color: rgba(236, 0, 140, 0.2);
}

.chart .bar.navy-face .face {
  background-color: rgba(10, 64, 105, 0.2);
}

.chart .bar.cyan-face .face {
  background-color: rgba(87, 202, 244, 0.2);
}

.chart .bar.gray-face .face {
  background-color: rgba(68, 68, 68, 0.2);
}

.chart .bar.lightGray-face .face {
  background-color: rgba(145, 145, 145, 0.2);
}

.bar-0 .growing-bar {
  width: 0%;
}

.bar-1 .growing-bar {
  width: 1%;
}

.bar-2 .growing-bar {
  width: 2%;
}

.bar-3 .growing-bar {
  width: 3%;
}

.bar-4 .growing-bar {
  width: 4%;
}

.bar-5 .growing-bar {
  width: 5%;
}

.bar-6 .growing-bar {
  width: 6%;
}

.bar-7 .growing-bar {
  width: 7%;
}

.bar-8 .growing-bar {
  width: 8%;
}

.bar-9 .growing-bar {
  width: 9%;
}

.bar-10 .growing-bar {
  width: 10%;
}

.bar-11 .growing-bar {
  width: 11%;
}

.bar-12 .growing-bar {
  width: 12%;
}

.bar-13 .growing-bar {
  width: 13%;
}

.bar-14 .growing-bar {
  width: 14%;
}

.bar-15 .growing-bar {
  width: 15%;
}

.bar-16 .growing-bar {
  width: 16%;
}

.bar-17 .growing-bar {
  width: 17%;
}

.bar-18 .growing-bar {
  width: 18%;
}

.bar-19 .growing-bar {
  width: 19%;
}

.bar-20 .growing-bar, input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(1) .growing-bar {
  width: 20%;
}

.bar-21 .growing-bar {
  width: 21%;
}

.bar-22 .growing-bar {
  width: 22%;
}

.bar-23 .growing-bar {
  width: 23%;
}

.bar-24 .growing-bar {
  width: 24%;
}

.bar-25 .growing-bar, input[id='pos-0']:checked ~ .chart .growing-bar {
  width: 25%;
}

.bar-26 .growing-bar {
  width: 26%;
}

.bar-27 .growing-bar {
  width: 27%;
}

.bar-28 .growing-bar {
  width: 28%;
}

.bar-29 .growing-bar {
  width: 29%;
}

.bar-30 .growing-bar {
  width: 30%;
}

.bar-31 .growing-bar {
  width: 31%;
}

.bar-32 .growing-bar {
  width: 32%;
}

.bar-33 .growing-bar {
  width: 33%;
}

.bar-34 .growing-bar {
  width: 34%;
}

.bar-35 .growing-bar {
  width: 35%;
}

.bar-36 .growing-bar {
  width: 36%;
}

.bar-37 .growing-bar {
  width: 37%;
}

.bar-38 .growing-bar {
  width: 38%;
}

.bar-39 .growing-bar {
  width: 39%;
}

.bar-40 .growing-bar {
  width: 40%;
}

.bar-41 .growing-bar {
  width: 41%;
}

.bar-42 .growing-bar {
  width: 42%;
}

.bar-43 .growing-bar {
  width: 43%;
}

.bar-44 .growing-bar {
  width: 44%;
}

.bar-45 .growing-bar {
  width: 45%;
}

.bar-46 .growing-bar {
  width: 46%;
}

.bar-47 .growing-bar {
  width: 47%;
}

.bar-48 .growing-bar {
  width: 48%;
}

.bar-49 .growing-bar {
  width: 49%;
}

.bar-50 .growing-bar, input[id='pos-1']:checked ~ .chart .growing-bar, input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(2) .growing-bar, input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(1) .growing-bar, input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(2) .growing-bar {
  width: 50%;
}

.bar-51 .growing-bar {
  width: 51%;
}

.bar-52 .growing-bar {
  width: 52%;
}

.bar-53 .growing-bar {
  width: 53%;
}

.bar-54 .growing-bar {
  width: 54%;
}

.bar-55 .growing-bar {
  width: 55%;
}

.bar-56 .growing-bar {
  width: 56%;
}

.bar-57 .growing-bar {
  width: 57%;
}

.bar-58 .growing-bar {
  width: 58%;
}

.bar-59 .growing-bar {
  width: 59%;
}

.bar-60 .growing-bar {
  width: 60%;
}

.bar-61 .growing-bar {
  width: 61%;
}

.bar-62 .growing-bar {
  width: 62%;
}

.bar-63 .growing-bar {
  width: 63%;
}

.bar-64 .growing-bar {
  width: 64%;
}

.bar-65 .growing-bar {
  width: 65%;
}

.bar-66 .growing-bar {
  width: 66%;
}

.bar-67 .growing-bar {
  width: 67%;
}

.bar-68 .growing-bar {
  width: 68%;
}

.bar-69 .growing-bar {
  width: 69%;
}

.bar-70 .growing-bar, input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(1) .growing-bar, input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(2) .growing-bar, input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(3) .growing-bar {
  width: 70%;
}

.bar-71 .growing-bar {
  width: 71%;
}

.bar-72 .growing-bar {
  width: 72%;
}

.bar-73 .growing-bar {
  width: 73%;
}

.bar-74 .growing-bar {
  width: 74%;
}

.bar-75 .growing-bar, input[id='pos-2']:checked ~ .chart .growing-bar {
  width: 75%;
}

.bar-76 .growing-bar {
  width: 76%;
}

.bar-77 .growing-bar {
  width: 77%;
}

.bar-78 .growing-bar {
  width: 78%;
}

.bar-79 .growing-bar {
  width: 79%;
}

.bar-80 .growing-bar, input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(3) .growing-bar {
  width: 80%;
}

.bar-81 .growing-bar {
  width: 81%;
}

.bar-82 .growing-bar {
  width: 82%;
}

.bar-83 .growing-bar {
  width: 83%;
}

.bar-84 .growing-bar {
  width: 84%;
}

.bar-85 .growing-bar {
  width: 85%;
}

.bar-86 .growing-bar {
  width: 86%;
}

.bar-87 .growing-bar {
  width: 87%;
}

.bar-88 .growing-bar {
  width: 88%;
}

.bar-89 .growing-bar {
  width: 89%;
}

.bar-90 .growing-bar {
  width: 90%;
}

.bar-91 .growing-bar {
  width: 91%;
}

.bar-92 .growing-bar {
  width: 92%;
}

.bar-93 .growing-bar {
  width: 93%;
}

.bar-94 .growing-bar {
  width: 94%;
}

.bar-95 .growing-bar {
  width: 95%;
}

.bar-96 .growing-bar {
  width: 96%;
}

.bar-97 .growing-bar {
  width: 97%;
}

.bar-98 .growing-bar {
  width: 98%;
}

.bar-99 .growing-bar {
  width: 99%;
}

.bar-100 .growing-bar, input[id='pos-3']:checked ~ .chart .growing-bar, input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(3) .growing-bar {
  width: 100%;
}

/*
END // CHART'S RULES
*
*
*/
.chart.grid {
  display: flex;
  flex-direction: row;
}
.chart.grid .exercise {
  flex: 0 0 100%;
  display: flex;
}
.chart.grid .exercise .bar {
  flex: 1;
  margin: 0 .5em;
}
.chart.grid .exercise .bar:nth-child(2) {
  z-index: 8;
  flex: 1 0 40%;
}
.chart.grid .exercise .bar:first-child {
  z-index: 10;
  margin-left: 0;
}
.chart.grid .exercise .bar:last-child {
  margin-right: 0;
}

.actions {
  display: flex;
  justify-content: center;
  margin-bottom: 0;
  padding-bottom: 2em;
  border-bottom: 1px dotted rgba(68, 68, 68, 0.4);
}

label {
  box-sizing: border-box;
  padding: 1em;
  margin: 0 .2em;
  cursor: pointer;
  transition: all .15s ease-in-out;
  color: #0a4069;
  border: 1px solid rgba(254, 254, 254, 0.6);
  border-radius: 0;
  flex: 1;
}
label:first-child {
  margin-left: 0;
  border-radius: .2em 0 0 .2em;
}
label:last-child {
  margin-right: 0;
  border-radius: 0 .2em .2em 0;
}

input[id='exercise-1']:checked ~ .actions label[for='exercise-1'],
input[id='exercise-2']:checked ~ .actions label[for='exercise-2'],
input[id='exercise-3']:checked ~ .actions label[for='exercise-3'],
input[id='exercise-4']:checked ~ .actions label[for='exercise-4'],
input[id='pos-0']:checked ~ .actions label[for='pos-0'],
input[id='pos-1']:checked ~ .actions label[for='pos-1'],
input[id='pos-2']:checked ~ .actions label[for='pos-2'],
input[id='pos-3']:checked ~ .actions label[for='pos-3'],
input[id='red']:checked ~ .actions label[for='red'],
input[id='cyan']:checked ~ .actions label[for='cyan'],
input[id='lime']:checked ~ .actions label[for='lime'] {
  color: #76c900;
  border: 1px solid #031523;
  background-color: #0a4069;
}

input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(1) {
  flex: 1 0 0%;
}
input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(2) {
  flex: 1;
}
input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(3) {
  flex: 1 0 30%;
}

input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(1), input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(2), input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(3) {
  flex: 1;
}

input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(1), input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(2) {
  flex: 1 0 30%;
}
input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(3) {
  flex: 1;
}
</style>
</head>
<body>
  <div class="container">
        <header>
            <h1>Pure <strong>CSS</strong> Progress</h1>
            <p>... a pretty liquid progress-bar.</p>
        </header>
        <section>
            <article>
                <input type="radio" name="switch-color" id="red" checked>
                <input type="radio" name="switch-color" id="cyan">
                <input type="radio" name="switch-color" id="lime">
                <div class="chart">
                    <div class="bar bar-75 white">
                        <div class="face top">
                            <div class="growing-bar"></div>
                        </div>
                        <div class="face side-0">
                            <div class="growing-bar"></div>
                        </div>
                        <div class="face floor">
                            <div class="growing-bar"></div>
                        </div>
                        <div class="face side-a"></div>
                        <div class="face side-b"></div>
                        <div class="face side-1">
                            <div class="growing-bar"></div>
                        </div>
                    </div>
                </div>
                <p>Try another color :)</p>
                <nav class="actions">
                    <label for="red">Red</label>
                    <label for="cyan">Cyan</label>
                    <label for="lime">Lime</label>
                </nav>
            </article>
            <article>
                <input type="radio" name="switch-pos" id="pos-0">
                <input type="radio" name="switch-pos" id="pos-1">
                <input type="radio" name="switch-pos" id="pos-2" checked>
                <input type="radio" name="switch-pos" id="pos-3">
                <div class="chart">
                    <div class="bar bar-30 white">
                        <div class="face top">
                            <div class="growing-bar"></div>
                        </div>
                        <div class="face side-0">
                            <div class="growing-bar"></div>
                        </div>
                        <div class="face floor">
                            <div class="growing-bar"></div>
                        </div>
                        <div class="face side-a"></div>
                        <div class="face side-b"></div>
                        <div class="face side-1">
                            <div class="growing-bar"></div>
                        </div>
                    </div>
                </div>
                <p>Try another position :)</p>
                <nav class="actions">
                    <label for="pos-0">1/4</label>
                    <label for="pos-1">2/4</label>
                    <label for="pos-2">3/4</label>
                    <label for="pos-3">Full</label>
                </nav>
            </article>
            <article>
                <input type="radio" name="exercises" id="exercise-1" checked>
                <input type="radio" name="exercises" id="exercise-2">
                <input type="radio" name="exercises" id="exercise-3">
                <input type="radio" name="exercises" id="exercise-4">
                <div class="chart grid">
                    <div class="exercise second">
                        <div class="bar bar-45 navy lightGray-face">
                            <div class="face top">
                                <div class="growing-bar"></div>
                            </div>
                            <div class="face side-0">
                                <div class="growing-bar"></div>
                            </div>
                            <div class="face floor">
                                <div class="growing-bar"></div>
                            </div>
                            <div class="face side-a"></div>
                            <div class="face side-b"></div>
                            <div class="face side-1">
                                <div class="growing-bar"></div>
                            </div>
                        </div>
                        <div class="bar bar-80 yellow lightGray-face">
                            <div class="face top">
                                <div class="growing-bar"></div>
                            </div>
                            <div class="face side-0">
                                <div class="growing-bar"></div>
                            </div>
                            <div class="face floor">
                                <div class="growing-bar"></div>
                            </div>
                            <div class="face side-a"></div>
                            <div class="face side-b"></div>
                            <div class="face side-1">
                                <div class="growing-bar"></div>
                            </div>
                        </div>
                        <div class="bar bar-60 red lightGray-face">
                            <div class="face top">
                                <div class="growing-bar"></div>
                            </div>
                            <div class="face side-0">
                                <div class="growing-bar"></div>
                            </div>
                            <div class="face floor">
                                <div class="growing-bar"></div>
                            </div>
                            <div class="face side-a"></div>
                            <div class="face side-b"></div>
                            <div class="face side-1">
                                <div class="growing-bar"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <p><em>It's liquid</em>, so adding a bit of code you can make charts like this :P</p>
                <nav class="actions">
                    <label for="exercise-1">E-1</label>
                    <label for="exercise-2">E-2</label>
                    <label for="exercise-3">E-3</label>
                    <label for="exercise-4">E-4</label>
                </nav>
            </article>
        </section>
    </div>
</body>
</html>

7. By Antoinette Janus

Made by Antoinette Janus. Rainbow Progress bar with Hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);
html, body {
  height: 100%;
  background-color: #FFF;
  padding: 0;
  margin: 0;
  font-family: "Roboto Condensed";
  text-align: center;
}

#prog-bar-cont {
  background: gainsboro;
  width: 75vw;
  height: 2.5em;
  padding: 0.5em;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  border-radius: 50px;
  box-sizing: border-box;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.75) inset, 0 0 4px 0 rgba(0, 0, 0, 0.5);
}
#prog-bar-cont #prog-bar {
  background: #000;
  width: 100%;
  height: 100%;
  border-radius: 50px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 1px 3px rgba(255, 255, 255, 0.75) inset;
  background: transparent;
}
#prog-bar-cont #prog-bar:before {
  border-radius: 50px;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3) inset, 0 0 5px 2px rgba(255, 255, 255, 0.8) inset;
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
#prog-bar-cont #prog-bar:after {
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  width: 96%;
  left: 50%;
  margin-left: -48%;
  border-radius: 20px;
  height: 10px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85) 30%, transparent 120%);
}
#prog-bar-cont #prog-bar #background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(-90deg, violet, #30b3fc, #70dc23, yellow, orange, #ff1076);
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  transition: all 3s;
  -webkit-transition: all 3s;
}
#prog-bar-cont #prog-bar #background:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, #000 10px, #000 20px);
  opacity: 0.75;
  mix-blend-mode: overlay;
  border-radius: 50px;
}
#prog-bar-cont:hover #prog-bar #background {
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
}
</style>
</head>
<body>
  <h1>Rainbow Progress Bar</h1>
<p>Try hovering over the bar</p>
<div id='prog-bar-cont'>
  <div id="prog-bar">
    <div id="background"></div>
  </div>
</div>
</body>
</html>

8. By BrawadaCom

Made by BrawadaCom. Multistep progress bar. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700);
@-webkit-keyframes part {
  0%, 100% {
    box-shadow: 0 0 0 0 #fff, 0 0 0 0 #66bd6c, 0 0 0 0 #66bd6c;
  }
  50% {
    box-shadow: 0 0 0 2px #ffffff, 0 0 3px 2px #66bd6c, 0 0 9px 0 #66bd6c;
  }
}
@-moz-keyframes part {
  0%, 100% {
    box-shadow: 0 0 0 0 #fff, 0 0 0 0 #66bd6c, 0 0 0 0 #66bd6c;
  }
  50% {
    box-shadow: 0 0 0 2px #ffffff, 0 0 3px 2px #66bd6c, 0 0 9px 0 #66bd6c;
  }
}
@keyframes part {
  0%, 100% {
    box-shadow: 0 0 0 0 #fff, 0 0 0 0 #66bd6c, 0 0 0 0 #66bd6c;
  }
  50% {
    box-shadow: 0 0 0 2px #ffffff, 0 0 3px 2px #66bd6c, 0 0 9px 0 #66bd6c;
  }
}
body {
  background-color: #CBE9E4;
  height: 100vh;
  overflow: hidden;
  font-family: "Roboto", sans-serif;
}

.timeline {
  height: 100vh;
}

.w-table {
  display: table;
  width: 100%;
  height: 100%;
}

.w-table-cell {
  display: table-cell;
  vertical-align: middle;
}

.timeline_title {
  color: #525252;
  text-align: center;
  font-weight: 100;
  letter-spacing: 1px;
  font-size: 45px;
}

.timeline_card {
  position: relative;
  width: 320px;
  height: 200px;
  background-color: #fff;
  margin: 30px auto;
  padding: 20px;
  overflow: hidden;
  box-shadow: 0 9px 20px 0px rgba(133, 144, 166, 0.1);
}

.timeline_label {
  cursor: pointer;
  position: relative;
  width: 28%;
  float: left;
  text-align: right;
  color: #909090;
  font-weight: 100;
  text-transform: uppercase;
  padding-right: 5.33333%;
  letter-spacing: 1px;
}
.timeline_label:before {
  content: "";
  position: absolute;
  z-index: 1;
  right: 0;
  top: 20px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #fff;
  border: 2px #66bd6c solid;
}

.timeline_info {
  position: absolute;
  right: 0;
  left: 0;
  top: 45px;
  bottom: 0;
  text-align: center;
  font-size: 40px;
  color: #eee;
  opacity: 0;
  font-weight: 100;
  letter-spacing: 1px;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}

.timeline_line {
  position: absolute;
  right: 0;
  left: 0;
  top: 45px;
  border-bottom: 2px #eee solid;
}
.timeline_line:before {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background-color: #66bd6c;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.timeline_input[type=radio] {
  display: none;
}
.timeline_input[type=radio]:checked + .timeline_label {
  color: #525252;
}
.timeline_input[type=radio]:checked + .timeline_label:before {
  background-color: #66bd6c;
  -moz-animation: part 1.6s infinite ease-in-out;
  -webkit-animation: part 1.6s infinite ease-in-out;
  animation: part 1.6s infinite ease-in-out;
}
.timeline_input[type=radio]:checked + .timeline_label + .timeline_info {
  -moz-transform: translateY(30%);
  -ms-transform: translateY(30%);
  -webkit-transform: translateY(30%);
  transform: translateY(30%);
  opacity: 1;
}
.timeline_input[type=radio]:checked:nth-of-type(1) + .timeline_label + .timeline_info + .timeline_input + .timeline_label + .timeline_info + .timeline_input + .timeline_label + .timeline_info + .timeline_line:before {
  width: 33%;
}
.timeline_input[type=radio]:checked:nth-of-type(2) + .timeline_label + .timeline_info + .timeline_input + .timeline_label + .timeline_info + .timeline_line:before {
  width: 63%;
}
.timeline_input[type=radio]:checked:nth-of-type(3) + .timeline_label + .timeline_info + .timeline_line:before {
  width: 100%;
}

.rabbit {
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 3;
  fill: #fff;
}
</style>
</head>
<body>
  <div class="timeline">
  <div class="w-table">
    <div class="w-table-cell">
      <h1 class="timeline_title">
        Multistep 
      </h1>
      <div class="timeline_card">
        <input checked="" class="timeline_input" id="btn1" name="timeline" type="radio" /><label class="timeline_label" for="btn1">Step 1</label>
        <div class="timeline_info">
          Step 1
        </div>
        <input class="timeline_input" id="btn2" name="timeline" type="radio" /><label class="timeline_label" for="btn2">Step 2</label>
        <div class="timeline_info">
          Step 2
        </div>
        <input class="timeline_input" id="btn3" name="timeline" type="radio" /><label class="timeline_label" for="btn3">Step 3</label>
        <div class="timeline_info">
          Step 3
        </div>
        <div class="timeline_line"></div>
      </div>
    </div>
  </div>
</div>
<a class="box-item" href="https://codepen.io/Anna_Batura/" target="_blank"><svg class="rabbit" version="1.2" viewBox="0 0 600 600"><path d="m 335.94313,30.576451 c -9.79312,-0.146115 -17.39091,4.439466 -17.39091,13.789758 0,11.508038 -2.91019,60.415461 1.40532,76.238951 4.31553,15.82355 21.58583,38.97215 34.51834,54.67597 10.06946,12.22726 4.34772,41.69626 4.34772,56.0813 0,14.38499 -2.89751,25.9107 -8.65153,25.9107 -5.75402,0 -14.35971,5.75217 -20.11373,11.50612 -5.75395,5.75402 -11.51588,12.95631 -18.70841,7.20229 -7.19251,-5.75402 -20.15388,-11.49441 -43.16987,-15.80992 -23.01609,-4.31551 -61.84129,-0.0234 -86.29583,8.60763 -24.45458,8.63104 -76.25857,56.11061 -90.643535,77.6882 -14.385056,21.5775 -15.799189,87.73247 -14.36068,97.80193 1.438509,10.06953 -2.908267,17.28255 -10.100778,8.65153 -7.192459,-8.63104 -12.911438,-4.30381 -12.911438,-4.30381 0,0 -7.202292,14.37045 -7.202292,21.56298 0,7.19244 2.854564,14.36068 2.854564,14.36068 0,0 -11.506099,8.65056 -11.506099,14.40458 0,5.75397 11.515881,15.83044 18.708391,24.46146 7.192546,8.63097 31.651182,25.89997 41.720624,24.46148 10.069543,-1.43851 28.775063,-0.0121 35.967573,4.3038 7.19253,4.31551 24.44687,10.06761 46.02443,11.5061 21.57752,1.43851 81.97845,5.75307 97.80193,5.75307 15.82357,0 20.1675,-2.86435 27.35996,-10.05688 7.19253,-7.19245 -5.78527,-15.84115 -10.10079,-25.9107 -4.31551,-10.06946 14.40363,-7.16912 20.15765,-8.60763 5.75402,-1.43849 21.59424,-11.5061 31.66376,-11.5061 10.06953,0 8.6165,10.05589 21.56298,15.80993 12.94654,5.75393 31.63939,24.43902 46.02443,27.31602 14.38497,2.87695 47.47173,0.0121 58.97979,-4.30381 11.50797,-4.31551 10.06946,-14.37044 0,-21.56297 -10.06955,-7.19244 -34.50663,-20.16742 -38.82214,-27.35994 -4.31551,-7.19246 -5.74329,-15.81969 1.44924,-23.01224 7.19251,-7.19252 14.35876,-4.30292 25.86678,-10.05685 11.50806,-5.75402 15.80992,-23.04354 15.80992,-33.11301 0,-10.06953 1.36928,-21.01352 5.75307,-27.31602 3.67345,-5.28128 5.10015,-22.13212 5.30499,-33.64009 0.21874,-12.28864 -5.29329,-15.24871 -9.60881,-22.44122 -4.31543,-7.19246 4.30285,-17.25917 10.05687,-17.25917 5.75402,0 31.65108,-4.33602 41.72062,-8.65153 10.06946,-4.31546 20.16744,-23.03273 27.35995,-31.66377 7.19246,-8.63095 1.41799,-27.31512 -8.65154,-33.06907 -10.06954,-5.75402 -10.07746,-21.59431 -18.70841,-31.66377 -8.63103,-10.06953 -18.68507,-31.62961 -27.31604,-38.82213 -8.63101,-7.19253 -28.77502,-12.95535 -35.96755,-12.95535 -7.19253,0 -11.50612,9e-4 -11.50612,-5.75306 0,-5.75402 -1.44924,-12.9203 -1.44924,-25.86678 0,-12.94655 -16.24344,-68.464566 -37.3729,-102.149659 -4.40799,-7.027282 -11.5581,-5.405316 -20.15765,-2.898485 -5.69412,1.659863 -8.60761,4.35564 -8.60761,23.056136 0,18.700566 -11.50515,-0.03133 -17.25917,-10.100794 -5.75403,-10.069512 -15.86265,-21.58444 -28.80918,-24.461458 -2.42749,-0.539415 -4.76669,-0.800692 -7.02665,-0.834399 z" id="rabbit"></path></svg></a>
</body>
</html>

9. By mattdrose

Made by mattdrose. Responsive progress bar. Source

CSS Progress Bar by Mattdrose
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
.progress {
  list-style: none;
  margin: 0;
  padding: 0;
  display: table;
  table-layout: fixed;
  width: 100%;
  color: #849397;
}
.progress > li {
  position: relative;
  display: table-cell;
  text-align: center;
  font-size: 0.8em;
}
.progress > li:before {
  content: attr(data-step);
  display: block;
  margin: 0 auto;
  background: #DFE3E4;
  width: 3em;
  height: 3em;
  text-align: center;
  margin-bottom: 0.25em;
  line-height: 3em;
  border-radius: 100%;
  position: relative;
  z-index: 1000;
}
.progress > li:after {
  content: '';
  position: absolute;
  display: block;
  background: #DFE3E4;
  width: 100%;
  height: 0.5em;
  top: 1.25em;
  left: 50%;
  margin-left: 1.5em\9;
  z-index: -1;
}
.progress > li:last-child:after {
  display: none;
}
.progress > li.is-complete {
  color: #2ECC71;
}
.progress > li.is-complete:before, .progress > li.is-complete:after {
  color: #FFF;
  background: #2ECC71;
}
.progress > li.is-active {
  color: #3498DB;
}
.progress > li.is-active:before {
  color: #FFF;
  background: #3498DB;
}

/**
 * Needed for IE8
 */
.progress__last:after {
  display: none !important;
}

/**
 * Size Extensions
 */
.progress--medium {
  font-size: 1.5em;
}

.progress--large {
  font-size: 2em;
}

/**
 * Some Generic Stylings
 */
*, *:after, *:before {
  box-sizing: border-box;
}

h1 {
  margin-bottom: 1.5em;
}

.progress {
  margin-bottom: 3em;
}

a {
  color: #3498DB;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

body {
  text-align: center;
  color: #444;
}
</style>
</head>
<body>
  <h1>Scalable Responsive Progress Bar</h1>

<ol class="progress">
  <li class="is-active" data-step="1">
    Step 1
  </li>
  <li data-step="2">
    Step 2
  </li>
  <li data-step="3" class="progress__last">
    Step 3
  </li>
</ol>

<ol class="progress progress--medium">
  <li class="is-complete" data-step="1">
    Step 1
  </li>
  <li class="is-active" data-step="2">
    Step 2
  </li>
  <li data-step="3" class="progress__last">
    Step 3
  </li>
</ol>

<ol class="progress progress--large">
  <li class="is-complete" data-step="1">
    Create Account
  </li>
  <li class="is-complete" data-step="2">
    Login
  </li>
  <li class="is-active" data-step="3">
    Payment
  </li>
  <li data-step="4" class="progress__last">
    Confirm
  </li>
</ol>
</body>
</html>

10. By Tobias Glaus

Made by Tobias Glaus. CSS Progress Bar animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.6.1/css/all.css'>
<style>
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Montserrat:600");
* {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  box-sizing: border-box;
  animation-timing-function: ease;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}

#wrapper {
  position: relative;
  width: 350px;
  animation: out 0.3s forwards ease;
  animation-delay: 5s;
  transform: scale(1);
  opacity: 1;
  transform-origin: center -80%;
}
@keyframes out {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}
#wrapper .loader {
  animation: rotation 3.5s forwards linear;
  position: absolute;
  top: -120px;
  left: calc(50% - 35px);
  border: 5px solid #fff;
  border-radius: 50%;
  border-top-color: #a29bfe;
  height: 70px;
  width: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@keyframes rotation {
  0% {
    transform: rotate(0);
  }
  84% {
    transform: rotate(500deg);
  }
  95% {
    border: 5px solid #fff;
    border-top-color: #a29bfe;
  }
  100% {
    transform: rotate(1800deg);
    border: 5px solid #2ed573;
  }
}
#wrapper .loader:before {
  content: "ο€Œ";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 2em;
  color: #2ed573;
  animation: overspin 0.5s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation-delay: 3.4s;
  transform: rotate(180deg);
  opacity: 0;
}
@keyframes overspin {
  0% {
    transform: rotate(180deg);
    opacity: 0;
  }
  100% {
    transform: rotate(0);
    opacity: 1;
  }
}
#wrapper #mouse {
  position: absolute;
  top: 100px;
  left: 80%;
  animation: mouse-pos 3.5s forwards, mouse-pos2 1s forwards;
  animation-delay: 0s, 4s;
  z-index: 20;
}
@keyframes mouse-pos {
  30% {
    top: 100px;
    left: 80%;
  }
  50% {
    top: 15px;
    left: 4%;
  }
  60% {
    top: 15px;
    left: 4%;
  }
  75% {
    top: 5px;
    left: 7.3%;
  }
  85% {
    top: 5px;
    left: 7.3%;
  }
  95% {
    top: 15px;
    left: 105%;
  }
  100% {
    top: 15px;
    left: 105%;
  }
}
@keyframes mouse-pos2 {
  0% {
    top: 15px;
    left: 105%;
  }
  100% {
    top: -85px;
    left: 53%;
  }
}
#wrapper #mouse:after {
  content: "ο‰…";
  position: absolute;
  top: 0;
  left: 0;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 20px;
  animation: mouse-cont 2s forwards;
  animation-delay: 1.7s;
  color: #341f97;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}
@keyframes mouse-cont {
  0% {
    font-size: 20px;
  }
  2% {
    font-size: 15px;
  }
  4% {
    font-size: 20px;
  }
  33% {
    content: "ο‰…";
  }
  34% {
    content: "";
  }
  80% {
    content: "";
  }
  81% {
    content: "ο‰…";
  }
}
#wrapper #mouse:before {
  content: "";
  position: absolute;
  top: -22px;
  left: -24px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #222f3e;
  animation: circle 3.5s forwards;
  animation-delay: 1.7s;
  opacity: 0;
  transform: scale(0);
}
@keyframes circle {
  0% {
    transform: scale(0);
  }
  4% {
    opacity: 1;
  }
  8% {
    transform: scale(1);
    opacity: 0;
  }
  92% {
    transform: scale(0);
    opacity: 0;
  }
  95% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
#wrapper .loading-bar {
  width: 100%;
  height: 30px;
  background: #dfe6e9;
  border-radius: 5px;
}
#wrapper .loading-bar .progress-bar {
  animation: progress 3.5s forwards;
  width: 6%;
  height: 100%;
  background: #a29bfe;
  border-radius: 5px;
  border: 0 solid #0abde3;
}
@keyframes progress {
  0% {
    width: 6%;
  }
  50% {
    border: 0 solid #0abde3;
  }
  51% {
    border: 4px solid #0abde3;
  }
  85% {
    width: 11%;
  }
  95% {
    border: 4px solid #0abde3;
    width: 100%;
  }
  100% {
    width: 100%;
  }
}
#wrapper .status {
  margin-top: 10px;
}
#wrapper .status .state {
  float: left;
  font-size: 0.9em;
  letter-spacing: 1pt;
  text-transform: uppercase;
  width: 100px;
  height: 20px;
  position: relative;
}
#wrapper .status .state:before {
  content: "Loading";
  position: absolute;
  left: 0;
  top: 0;
  animation: fadeLeft 0.5s forwards ease;
  animation-delay: 3.2s;
}
@keyframes fadeLeft {
  0% {
    text-indent: 0;
    opacity: 1;
  }
  100% {
    text-indent: -100px;
    opacity: 0;
  }
}
#wrapper .status .state:after {
  content: "Complete";
  position: absolute;
  left: 0;
  top: 0;
  text-indent: 100px;
  opacity: 0;
  animation: fadeLeft2 0.5s forwards ease;
  animation-delay: 3.2s;
}
@keyframes fadeLeft2 {
  0% {
    text-indent: 100px;
    opacity: 0;
  }
  100% {
    text-indent: 0;
    opacity: 1;
  }
}
#wrapper .status .percentage {
  float: right;
}
#wrapper .status .percentage:before {
  -webkit-animation: percentage-slow 3s forwards, percentage-fast 0.4s forwards;
  -webkit-animation-delay: 0s, 3s;
  content: "10%";
  font-size: 0.9em;
  letter-spacing: 1pt;
}
@keyframes percentage-slow {
  0% {
    content: "6%";
  }
  25% {
    content: "7%";
  }
  50% {
    content: "8%";
  }
  75% {
    content: "9%";
  }
  100% {
    content: "10%";
  }
}
@keyframes percentage-fast {
  11% {
    content: "11%";
  }
  12% {
    content: "12%";
  }
  13% {
    content: "13%";
  }
  14% {
    content: "14%";
  }
  15% {
    content: "15%";
  }
  16% {
    content: "16%";
  }
  17% {
    content: "17%";
  }
  18% {
    content: "18%";
  }
  19% {
    content: "19%";
  }
  20% {
    content: "20%";
  }
  21% {
    content: "21%";
  }
  22% {
    content: "22%";
  }
  23% {
    content: "23%";
  }
  24% {
    content: "24%";
  }
  25% {
    content: "25%";
  }
  26% {
    content: "26%";
  }
  27% {
    content: "27%";
  }
  28% {
    content: "28%";
  }
  29% {
    content: "29%";
  }
  30% {
    content: "30%";
  }
  31% {
    content: "31%";
  }
  32% {
    content: "32%";
  }
  33% {
    content: "33%";
  }
  34% {
    content: "34%";
  }
  35% {
    content: "35%";
  }
  36% {
    content: "36%";
  }
  37% {
    content: "37%";
  }
  38% {
    content: "38%";
  }
  39% {
    content: "39%";
  }
  40% {
    content: "40%";
  }
  41% {
    content: "41%";
  }
  42% {
    content: "42%";
  }
  43% {
    content: "43%";
  }
  44% {
    content: "44%";
  }
  45% {
    content: "45%";
  }
  46% {
    content: "46%";
  }
  47% {
    content: "47%";
  }
  48% {
    content: "48%";
  }
  49% {
    content: "49%";
  }
  50% {
    content: "50%";
  }
  51% {
    content: "51%";
  }
  52% {
    content: "52%";
  }
  53% {
    content: "53%";
  }
  54% {
    content: "54%";
  }
  55% {
    content: "55%";
  }
  56% {
    content: "56%";
  }
  57% {
    content: "57%";
  }
  58% {
    content: "58%";
  }
  59% {
    content: "59%";
  }
  60% {
    content: "60%";
  }
  61% {
    content: "61%";
  }
  62% {
    content: "62%";
  }
  63% {
    content: "63%";
  }
  64% {
    content: "64%";
  }
  65% {
    content: "65%";
  }
  66% {
    content: "66%";
  }
  67% {
    content: "67%";
  }
  68% {
    content: "68%";
  }
  69% {
    content: "69%";
  }
  70% {
    content: "70%";
  }
  71% {
    content: "71%";
  }
  72% {
    content: "72%";
  }
  73% {
    content: "73%";
  }
  74% {
    content: "74%";
  }
  75% {
    content: "75%";
  }
  76% {
    content: "76%";
  }
  77% {
    content: "77%";
  }
  78% {
    content: "78%";
  }
  79% {
    content: "79%";
  }
  80% {
    content: "80%";
  }
  81% {
    content: "81%";
  }
  82% {
    content: "82%";
  }
  83% {
    content: "83%";
  }
  84% {
    content: "84%";
  }
  85% {
    content: "85%";
  }
  86% {
    content: "86%";
  }
  87% {
    content: "87%";
  }
  88% {
    content: "88%";
  }
  89% {
    content: "89%";
  }
  90% {
    content: "90%";
  }
  91% {
    content: "91%";
  }
  92% {
    content: "92%";
  }
  93% {
    content: "93%";
  }
  94% {
    content: "94%";
  }
  95% {
    content: "95%";
  }
  96% {
    content: "96%";
  }
  97% {
    content: "97%";
  }
  98% {
    content: "98%";
  }
  99% {
    content: "99%";
  }
  100% {
    content: "100%";
  }
}
</style>
</head>
<body>
  <div id="wrapper">
  <div id="mouse"></div>
  <div class="loader">
  </div>
  <div class="loading-bar">
    <div class="progress-bar"></div>
  </div>
  <div class="status">
    <div class="state"></div>
    <div class="percentage"></div>
  </div>
</div>
</body>
</html>

11. By Brandon

Made by Brandon. Tapered Glow Progress Bar. Source

CSS Progress Bar by Brandon
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Poppins:400,300" rel="stylesheet" type="text/css">
<style>
.progress-bar {
  height: 3px;
  width: 100%;
  position: relative;
  z-index: 10;
  background-color: #55708d;
}
.progress-bar .progress {
  position: relative;
  height: 100%;
  background-color: #cfd6dd;
  transition: width 0.5s ease-out;
  border-radius: 0px 2px 2px 0px;
}
.progress-bar .glow {
  width: 60px;
  max-width: 100%;
  height: 100%;
  float: right;
}
.progress-bar .glow::before,
.progress-bar .glow::after {
  content: "";
  display: block;
  position: relative;
  border-radius: 0px 2px 2px 0px;
}
.progress-bar .glow::before {
  background: transparent;
  height: 100%;
  box-shadow: 0px 0px 10px #cfd6dd, 0px 0px 10px #04bfff;
  z-index: -5;
}
.progress-bar .glow::after {
  background: linear-gradient(to right, #3d5980 0%, transparent 100%);
  height: calc(100% + 10px + 10px);
  width: calc(100% + 10px);
  top: -10px;
  left: -10px;
  z-index: -3;
}

.label {
  font-family: Poppins;
  color: white;
  text-shadow: 0px 0px 2px #cfd6dd;
  font-size: 24px;
}

.fill-1 {
  animation: fill-1 0.5s ease-out 0s;
  animation-fill-mode: forwards;
  width: 0%;
}

.fill-2 {
  animation: fill-2 0.5s ease-out 0.5s;
  animation-fill-mode: forwards;
  width: 0%;
}

.fill-3 {
  animation: fill-3 0.5s ease-out 1s;
  animation-fill-mode: forwards;
  width: 0%;
}

@keyframes fill-1 {
  0% {
    width: 0%;
  }
  100% {
    width: 70%;
  }
}
@keyframes fill-2 {
  0% {
    width: 0%;
  }
  100% {
    width: 40%;
  }
}
@keyframes fill-3 {
  0% {
    width: 0%;
  }
  100% {
    width: 90%;
  }
}
.label.one {
  animation: label 0.5s ease-out 0s;
  animation-fill-mode: forwards;
  opacity: 0;
}

.label.two {
  animation: label 0.5s ease-out 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

.label.three {
  animation: label 0.5s ease-out 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes label {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 0.9;
    transform: translateY(0);
  }
}
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: #3d5980;
  box-sizing: border-box;
}

body {
  padding: 60px 20px;
}
body .wrapper {
  max-width: 600px;
  margin: 0 auto;
}
body .wrapper .container {
  padding: 20px;
}
body .wrapper .container > * {
  margin-bottom: 10px;
}
</style>
</head>
<body>
  <div class="wrapper">
  <div class="container">
    <div class="label one">Metric 1</div>
    <div class="progress-bar">
      <div class="progress fill-1">
        <div class="glow"></div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="label two">Metric 2</div>
    <div class="progress-bar">
      <div class="progress fill-2">
        <div class="glow"></div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="label three">Metric 3</div>
    <div class="progress-bar">
      <div class="progress fill-3">
        <div class="glow"></div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

12. By Geedmo

Made by Geedmo. CSS3 Radial ( Circle )Progress Bar. Source

CSS Progress Bar by Geedmo
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
<style>
@import url(https://fonts.googleapis.com/css?family=Noto+Sans);
body {
  padding: 30px 0;
  background-color: #2f3439;
  font-family: "Noto Sans", sans-serif;
}

.wrap {
  width: 600px;
  margin: 0 auto;
}

/* -------------------------------------
 * Bar container
 * ------------------------------------- */
.progress-radial {
  float: left;
  margin-right: 30px;
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid #2f3439;
  background-color: tomato;
}

/* -------------------------------------
 * Optional centered circle w/text
 * ------------------------------------- */
.progress-radial .overlay {
  position: absolute;
  width: 60px;
  height: 60px;
  background-color: #fffde8;
  border-radius: 50%;
  margin-left: 20px;
  margin-top: 20px;
  text-align: center;
  line-height: 60px;
  font-size: 16px;
}

/* -------------------------------------
 * Mixin for progress-% class
 * ------------------------------------- */
.progress-0 {
  background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(90deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-5 {
  background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(108deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-10 {
  background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(126deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-15 {
  background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(144deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-20 {
  background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(162deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-25 {
  background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(180deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-30 {
  background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(198deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-35 {
  background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(216deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-40 {
  background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(234deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-45 {
  background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(252deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-50 {
  background-image: linear-gradient(-90deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-55 {
  background-image: linear-gradient(-72deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-60 {
  background-image: linear-gradient(-54deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-65 {
  background-image: linear-gradient(-36deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-70 {
  background-image: linear-gradient(-18deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-75 {
  background-image: linear-gradient(0deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-80 {
  background-image: linear-gradient(18deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-85 {
  background-image: linear-gradient(36deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-90 {
  background-image: linear-gradient(54deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-95 {
  background-image: linear-gradient(72deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-100 {
  background-image: linear-gradient(90deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}
</style> 
</head>
<body>
  <div class="wrap">
  
<div class="progress-radial progress-25">
  <div class="overlay">25%</div>
</div>

<div class="progress-radial progress-50">
  <div class="overlay">50%</div>
</div>

<div class="progress-radial progress-75">
  <div class="overlay">75%</div>
</div>

<div class="progress-radial progress-90">
  <div class="overlay">90%</div>
</div>
  
</div>
</body>
</html>

13. By wolfgang

Made by wolfgang. Simple Progress Bar CSS. Source

CSS Progress Bar by Wolfgang
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
<style>
.container {
width: 300px;
margin: 30px auto 0;
}

.progress {
overflow: hidden;
height: 18px;

background-color: #f7f7f7;
background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: -ms-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: linear-gradient(top, #f5f5f5, #f9f9f9);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0);

-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;

}

.progress .bar {
width: 50%;
height: 18px;
  
  
background-color: #0e90d2;
background-image: -moz-linear-gradient(top, #149bdf, #0480be);
background-image: -ms-linear-gradient(top, #149bdf, #0480be);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
background-image: -o-linear-gradient(top, #149bdf, #0480be);
background-image: linear-gradient(top, #149bdf, #0480be);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0);
  
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
  
-webkit-transition: width 0.6s ease;
-moz-transition: width 0.6s ease;
-ms-transition: width 0.6s ease;
-o-transition: width 0.6s ease;
transition: width 0.6s ease;
}
</style>
</head>
<body>
  <div class="container">
<div class="progress">
<div class="bar"></div>
</div>
</div>
</body>
</html>

14. By Traf

Made by Traf. Simple progress bar animation. Source

CSS Progress Bar by Traf
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
  justify-content: center;
  align-items: center;
  background: #000;
  display: flex;
  height: 100vh;
  padding: 0;
  margin: 0;
}

.progress {
  background: rgba(255,255,255,0.1);
  justify-content: flex-start;
  border-radius: 100px;
  align-items: center;
  position: relative;
  padding: 0 5px;
  display: flex;
  height: 40px;
  width: 500px;
}

.progress-value {
  animation: load 3s normal forwards;
  box-shadow: 0 10px 40px -10px #fff;
  border-radius: 100px;
  background: #fff;
  height: 30px;
  width: 0;
}

@keyframes load {
  0% { width: 0; }
  100% { width: 68%; }
}
</style>
</head>
<body>
  <div class="progress">
  <div class="progress-value"></div>
</div>
</body>
</html>

15. By gediminas

Made by gediminas. CSS progress bar with inverted colors. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
h1 {
  text-align: center;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-weight: normal;
  margin: 50px 0 0;
}

.progress-bar {
  position: relative;
  border: #ccc solid 1px;
  width: 400px;
  height: 40px;
  line-height: 40px;
  vertical-align: midle;
  overflow: hidden;
  margin: 100px auto 50px;
  font-family: arial, sans-serif;
  font-weight: bold;
  font-size: 30px;
  box-shadow: 0 4px 10px -5px rgba(0, 0, 0, 0.25);
}
.progress-bar .bar {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: hidden;
}
.progress-bar .bar span {
  position: absolute;
  display: block;
  width: 400px;
  height: 100%;
  text-align: center;
}
.progress-bar .bar.positive {
  background: #fff;
  left: 0;
  width: 54%;
  -webkit-animation: animate-positive 4s;
  animation: animate-positive 4s;
}
.progress-bar .bar.positive span {
  left: 0;
  color: #333;
}
.progress-bar .bar.negative {
  background: #07A4DD;
  right: 0;
  width: 46%;
  -webkit-animation: animate-negative 4s;
  animation: animate-negative 4s;
}
.progress-bar .bar.negative span {
  right: 0;
  color: #fff;
}

@-webkit-keyframes animate-positive {
  0% {
    width: 0%;
  }
}
@keyframes animate-positive {
  0% {
    width: 0%;
  }
}
@-webkit-keyframes animate-negative {
  0% {
    width: 100%;
  }
}
@keyframes animate-negative {
  0% {
    width: 100%;
  }
}
</style>
</head>
<body>
  <h1>CSS progress bar with inverted colors</h1>
<div class="progress-bar">
  <div class="bar positive">
    <span>54%</span>
  </div>
  <div class="bar negative">
    <span>54%</span>
  </div>
</div>
</body>
</html>