"Progress Bar"
Bootstrap 4.1.1 Snippet by siberci

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>Progress Bar</title> <link rel="stylesheet" href="codescaptain.css"> </head> <body> <div class="kutu"> <div class="bar-dis"> <div class="bar"> </div> </div> </div> </body> </html>
body{ margin: 0; padding: 0; background:#fbc531; } .kutu{ position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); } .bar-dis{ width: 250px; height: 50px; background: #dcdde1; border-radius: 20px; border:solid #000 4px; box-shadow: 2px 2px 3px #000 inset; overflow: hidden; } .bar{ height: 100%; background: #4cd137; animation:samet 10s ease; animation-iteration-count: 1; } @keyframes samet{ 0%{ width: 0; } 50%{ width: 250px; } }

Related: See More

Full Calendar
circle progress bar
Progress bars Responsive
Progress Bar Meter!

Questions / Comments: