Skip to content

Instantly share code, notes, and snippets.

@WeiChiaChang

WeiChiaChang/progress.html

Created July 26, 2017 10:08
Show Gist options
  • Star 27 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save WeiChiaChang/abe92ca2e8da86ef69560b63903e8764 to your computer and use it in GitHub Desktop.
Save WeiChiaChang/abe92ca2e8da86ef69560b63903e8764 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>
@alvesoaj
Copy link

Thank you!

@mrtoluadesina
Copy link

This is still very helpful

@fhulufhelo
Copy link

nice

@charlesreitz
Copy link

Tks

@sbin0819
Copy link

Thanks

@nour-sidaoui
Copy link

Clean, neat and does the job!
Thanks

@abdoachhoubi
Copy link

Thanks!

@KoolKeith
Copy link

Beautiful. Exactly what I needed !

@kavinduUdhara
Copy link

thanks... really easy to customize

@Mahmoud6867
Copy link

thanks man great effort

@anjalee-kulasinghe
Copy link

Thank you!

@kkkristo
Copy link

kkkristo commented Oct 9, 2023

superb. thank you :)

@abhiupadhyay-Dev
Copy link

thanks

@Munyasi
Copy link

Munyasi commented Dec 27, 2023

Thanks

@marcusglowe
Copy link

thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment