Generated by SassMeister.com.

SassMeister-input-HTML.html

<h2>Progress bar</h2>
<div class="progress">
  <span style="width: 25%"></span>
</div>
<div class="progress red">
  <span style="width: 25%"></span>
</div>
<div class="progress orange">
  <span style="width: 25%"></span>
</div>
<div class="progress orange striped">
  <span style="width: 25%"></span>
</div>
<h2>Hamburger menu icon</h2>
<p>Using box-shadow</p>
<a class="shadow-icon"></a>
<hr>
<h2>Hamburger menu icon</h2>
<p>using linear-gradient</p>
<a class="gradient-icon"></a>

SassMeister-input.scss

// ----
// libsass (v3.3.2)
// ----

@import "bourbon/bourbon";
/* # Progress bar


@see - https://css-tricks.com/css3-progress-bars/
@see - http://lab.galengidman.com/progress-bars/
*/
.progress { 
	height: 20px;  // Can be anything 
	margin-bottom: 1em;
	position: relative;
	background: #555;
	border-radius: 25px;
	padding: 10px;
	box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}

.progress > span {
  display: block;
  height: 100%;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: rgb(43,194,83);
  background-image: linear-gradient(
    center bottom,
    rgb(43,194,83) 37%,
    rgb(84,240,84) 69%
  );
  box-shadow: 
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
}

.progress.orange > span {
  background-color: #f1a165;
  background-image: linear-gradient(to bottom, #f1a165, #f36d0a);
}

.progress.red > span {
  background-color: #f0a3a3;
  background-image: linear-gradient(to bottom, #f0a3a3, #f42323);
}

.progress.striped > span:after {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background-image: linear-gradient(
    -45deg, 
    rgba(255, 255, 255, .2) 25%, 
    transparent 25%, 
    transparent 50%, 
    rgba(255, 255, 255, .2) 50%, 
    rgba(255, 255, 255, .2) 75%, 
    transparent 75%, 
    transparent
  );
  z-index: 1;
  background-size: 50px 50px;
  animation: move 2s linear infinite;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  overflow: hidden;
}

// Hamburger icon
// @see http://ipestov.com/22-essential-css-recipes/
a {
  color: black;
  text-decoration: none;
  float: left;
  width: 50px;
  height: 50px;
}

shadow-icon {
   position: relative;
}
 .shadow-icon:after {
    content: "";
  position: absolute;
  left: 0;
  top: -50px;
  height: 100%;
  width: 100%;
  box-shadow: 0 6px 0 #000, 0 18px 0 #fff, 0 25px 0 #000, 0 37px 0 #fff, 0 44px 0 #000;
  }
     
     
.gradient-icon {
  position:relative;
  display:block;
  width:32px;
  height:32px;
  
  background: linear-gradient(#000 0%, #000 20%, transparent 20%, transparent 40%, #000 40%, #000 60%, transparent 60%, transparent 80%, #000 80%, #000 100%);
}

SassMeister-output.css

/* # Progress bar


@see - https://css-tricks.com/css3-progress-bars/
@see - http://lab.galengidman.com/progress-bars/
*/
.progress {
  height: 20px;
  margin-bottom: 1em;
  position: relative;
  background: #555;
  border-radius: 25px;
  padding: 10px;
  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}

.progress > span {
  display: block;
  height: 100%;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: #2bc253;
  background-image: linear-gradient(center bottom, #2bc253 37%, #54f054 69%);
  box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}

.progress.orange > span {
  background-color: #f1a165;
  background-image: linear-gradient(to bottom, #f1a165, #f36d0a);
}

.progress.red > span {
  background-color: #f0a3a3;
  background-image: linear-gradient(to bottom, #f0a3a3, #f42323);
}

.progress.striped > span:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  z-index: 1;
  background-size: 50px 50px;
  animation: move 2s linear infinite;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  overflow: hidden;
}

a {
  color: black;
  text-decoration: none;
  float: left;
  width: 50px;
  height: 50px;
}

shadow-icon {
  position: relative;
}

.shadow-icon:after {
  content: "";
  position: absolute;
  left: 0;
  top: -50px;
  height: 100%;
  width: 100%;
  box-shadow: 0 6px 0 #000, 0 18px 0 #fff, 0 25px 0 #000, 0 37px 0 #fff, 0 44px 0 #000;
}

.gradient-icon {
  position: relative;
  display: block;
  width: 32px;
  height: 32px;
  background: linear-gradient(#000 0%, #000 20%, transparent 20%, transparent 40%, #000 40%, #000 60%, transparent 60%, transparent 80%, #000 80%, #000 100%);
}

SassMeister-rendered.html

<h2>Progress bar</h2>
<div class="progress">
  <span style="width: 25%"></span>
</div>
<div class="progress red">
  <span style="width: 25%"></span>
</div>
<div class="progress orange">
  <span style="width: 25%"></span>
</div>
<div class="progress orange striped">
  <span style="width: 25%"></span>
</div>
<h2>Hamburger menu icon</h2>
<p>Using box-shadow</p>
<a class="shadow-icon"></a>
<hr>
<h2>Hamburger menu icon</h2>
<p>using linear-gradient</p>
<a class="gradient-icon"></a>