Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI CodeMyUI/index.html
Created Nov 10, 2017

Embed
What would you like to do?
Progress Card
<div class="card">
<div class="progress" style="width:70%"></div>
<div class="content">
<h3>Progress Card</h3>
<p>Card which uses the background colour to show progress.</p>
<p class="percentage">70%</p>
</div>
</div>
<div class="card">
<div class="progress" style="width:90%"></div>
<div class="content">
<h3>Progress Card</h3>
<p>Card which uses the background colour to show progress.</p>
<p class="percentage">90%</p>
</div>
</div>
<div class="card">
<div class="progress" style="width:40%"></div>
<div class="content">
<h3>Progress Card</h3>
<p>Card which uses the background colour to show progress.</p>
<p class="percentage">40%</p>
</div>
</div>
<div class="card">
<div class="progress" style="width:60%"></div>
<div class="content">
<h3>Progress Card</h3>
<p>Card which uses the background colour to show progress.</p>
<p class="percentage">60%</p>
</div>
</div>
<div class="card">
<div class="progress" style="width:10%"></div>
<div class="content">
<h3>Progress Card</h3>
<p>Card which uses the background colour to show progress.</p>
<p class="percentage">10%</p>
</div>
</div>
<div class="card">
<div class="progress" style="width:50%"></div>
<div class="content">
<h3>Progress Card</h3>
<p>Card which uses the background colour to show progress.</p>
<p class="percentage">50%</p>
</div>
</div>
.card {
background-color:#eee;
box-sizing:border-box;
float:left;
height:10em;
margin:.5em;
padding:1em;
position:relative;
width:20em;
}
.progress {
bottom:0;
left:0;
position:absolute;
top:0;
}
.progress:before {
animation:slideIn 2s ease-out;
background-color:#def;
bottom:0;
left:0;
content:"";
position:absolute;
top:0;
width:100%;
}
.content {
position:relative;
}
.percentage {
text-align:right;
}
@keyframes slideIn {
0% {
width:0;
}
100% {
width:100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.