Skip to content

Instantly share code, notes, and snippets.

@edwinyzh

edwinyzh/progress.html

Forked from WeiChiaChang/progress.html
Created June 7, 2018 04:05
Show Gist options
  • Save edwinyzh/5526cfad60677c0bec298555dc5434a3 to your computer and use it in GitHub Desktop.
Save edwinyzh/5526cfad60677c0bec298555dc5434a3 to your computer and use it in GitHub Desktop.
Download ZIP
Simple Pure CSS Progress Bar
Raw
progress.html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta chatset="UTF-8" />
<title>CSS Progress Bar</title>
<style>
.wrapper {
width: 500px;
}
.progress-bar {
width: 100%;
background-color: #e0e0e0;
padding: 3px;
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
}
.progress-bar-fill {
display: block;
height: 22px;
background-color: #659cef;
border-radius: 3px;
transition: width 500ms ease-in-out;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="progress-bar">
<span class="progress-bar-fill" style="width: 70%;"></span>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment