Skip to content

Instantly share code, notes, and snippets.

@itwasmattgregg
Last active March 16, 2016 18:11
Show Gist options
  • Save itwasmattgregg/5102988d648aa4bd9ffd to your computer and use it in GitHub Desktop.
Save itwasmattgregg/5102988d648aa4bd9ffd to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="progress-button loading">
<button></button>
<svg class="progress-circle" width="134" height="134">
<path id="svg_3" d="M67,6c33.7,0,61,27.3,61,61s-27.3,61-61,61S6,100.7,6,67S33.3,6,67,6z"/>
</svg>
</div>
// ----
// libsass (v3.3.2)
// ----
.progress-button {
position: relative;
display: inline-block;
text-align: center;
min-width: 250px;
margin: 10px;
background-color: #eee;
button {
width: 134px;
height: 134px;
border: 2px solid #1ecd97;
border-width: 12px;
border-color: #fff;
border-radius: 50%;
display: block;
margin: 0 auto;
padding: 0;
background: transparent;
}
.progress-circle {
position: absolute;
background-color: transparent;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
pointer-events: none;
path {
stroke-dasharray: 383px;
stroke-dashoffset: 250px;
opacity: 1;
-webkit-transition: stroke-dashoffset 0.3s;
transition: stroke-dashoffset 0.3s;
stroke: #1ECD97;
stroke-width: 12;
fill: none;
}
}
}
.progress-button {
position: relative;
display: inline-block;
text-align: center;
min-width: 250px;
margin: 10px;
background-color: #eee;
}
.progress-button button {
width: 134px;
height: 134px;
border: 2px solid #1ecd97;
border-width: 12px;
border-color: #fff;
border-radius: 50%;
display: block;
margin: 0 auto;
padding: 0;
background: transparent;
}
.progress-button .progress-circle {
position: absolute;
background-color: transparent;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
pointer-events: none;
}
.progress-button .progress-circle path {
stroke-dasharray: 383px;
stroke-dashoffset: 250px;
opacity: 1;
-webkit-transition: stroke-dashoffset 0.3s;
transition: stroke-dashoffset 0.3s;
stroke: #1ECD97;
stroke-width: 12;
fill: none;
}
<div class="progress-button loading">
<button></button>
<svg class="progress-circle" width="134" height="134">
<path id="svg_3" d="M67,6c33.7,0,61,27.3,61,61s-27.3,61-61,61S6,100.7,6,67S33.3,6,67,6z"/>
</svg>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment