progress + image

by cesar nieto

HTML

<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<br>
<div class="progress"  style="height: 0.10px;">
  <div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuemin="0" aria-valuemax="100"></div>
  <padlock></padlock>
</div>

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">90</div>
</div>

CSS

padlock {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTczbp9jAAADdUlEQVRYR+WYzUtUURjG7bss6Yuk2kZlEPQxULaaNjM6M3dGJTXcuQnETf9AoIRQRItw0bqobBPoIsLAWoVB0EqL0GhhC8MWURFlqPV7pze9c+bcufeO1w/qgYe595znfd73nHPvnDNT8U8jl8tVwVw2m+1xHKePz6FsNjOk1z25XEa6q1S+fEin08czmcw9CvlOIb9KUTTwrsRo+NIhmUzuItltOGcrphQlBt5iYDvVLlpgfhJO2JKHoXiw7CfUNhpgGodfbQnLoXiJp9ovDjw7RzD7ZEtkoSx9oOUXT1ijacpDPB7fjNmIaW6SRM9gsrm5eYuQtoS0mTqTaEbq6+s3abrwwOCSzdhNNH0MZH0sFtvAC3BWKPdC+u7YYtyUHJouHBoaGnYQ/MVm+pf0T8BKHvr9fI662ke1rVI07phiOp9bWlq2a9rgYCYu2g0L2C1aPvuNdilyQH26zT6Tkku0oUDgsGlkocPoN1LMT7OPtmld5pTZZ+Gwpg0G2Z4wnrUY5UnfILyP7rC8SHJtozyXopFrxjJo8xLSP8NAt2l6fxBUa5os0JlUWWgQP1nsN89alfkDcasRPE9G+15loSGxNk9lq8r8gbjdCJ7nYgpk9ksV2K4yfyBuM4JdtBfIjrOX/gdCudbmAvjMYJvK/IFR3GKQp9cM0nfNpbmuzQUoVaDkVJk/2H722EyEXgXS3unSdGpzAbyX2JlrbGzcrbJgIMkbDzOvZ3ANMeNCuf7TVAj6rAXS/lolwUHQVQ8zz5dEEsFXelsEibV5wisqCQ7MaggsOjr5FPgUPtHbItgKpG02lUodUkk4EDxgMfQsUI5OpY5PtgJhv3aHB5v4MRlhoaEzxba0TiWBIfsy8R/dXnjPkOOoSsoDJr1uUzWWl+F5GBI3ZvG5oWnKh2ziGL01zSPgWCKR2KppFgeW4RRFTluSlMsfeMbUPhpQYIclUVmkuAtqGy0o8qYtYRji0at20UNPyJ4HTz8S+7Crq2ut2i0N5KUh2UszeQC+iOyl8ENdXd0+ZuOdpQgr0Y5TXLWGLw940A+SvOCL14NTnFQOaNjygpk5A0v9BfeNH02nVb4yoMDzFGL5Pyb/d9s5la0sKOSyWSCPQP5H/aqAHB4o6vFCgZlHS/51EhZNTU3VzOQHlnZSfjJo8+oCy5oW6u3/gIqK3xeWehrcSy7iAAAAAElFTkSuQmCC");
  width: 40px;
  height: 40px;
  position: absolute;
  margin-top: -10px;
  margin-left: -20px;
}