Simple CSS3 Progress Bar - Snippet

--- jQuery jQuery UI Bootstrap Angular Backbone D3 Ember GreenSock TweenMax Handlebars Lodash Modernizr Polymer React React DOM Snap.svg Three.js Underscore Zepto ZingChart

--- Bootstrap Foundation Animate.css

• Preview
• HTML
• CSS
• JS

<div class='frame'> <div class='progress-container'> <div class='progress-meter'></div> </div> </div>

body { background: #ccc; font-family: 'Helvetica'; font-size: 13px; } @-webkit-keyframes bg-anim { from {background-position: 0 0} to {background-position: -40px 0} } @-moz-keyframes bg-anim { from {background-position: 0 0} to {background-position: -40px 0} } @-ms-keyframes bg-anim { from {background-position: 0 0} to {background-position: -40px 0} } @keyframes bg-anim { from {background-position: 0 0} to {background-position: -40px 0} } .frame { color: #444; margin: 50px auto; width: 400px; padding: 50px 40px; background: -webkit-linear-gradient(left top, #eee, #fff); background: -moz-linear-gradient(left top, #eee, #fff); background: -ms-linear-gradient(left top, #eee, #fff); background: -o-linear-gradient(left top, #eee, #fff); background: linear-gradient(left top, #eee, #fff); border: 1px solid #bbb; -webkit-box-shadow: rgba(0,0,0,0.3) 0px 2px 4px; -moz-box-shadow: rgba(0,0,0,0.3) 0px 2px 4px; box-shadow: rgba(0,0,0,0.3) 0px 2px 4px; } .progress-container { margin: 0 auto; padding-right: 2px; -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.8); -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.8); box-shadow: inset 0px 1px 2px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.8); background: -webkit-linear-gradient(90deg, rgb(182,188,198), rgb(157,165,176)); background: -moz-linear-gradient(90deg, rgb(182,188,198), rgb(157,165,176)); background: -ms-linear-gradient(90deg, rgb(182,188,198), rgb(157,165,176)); background: -o-linear-gradient(90deg, rgb(182,188,198), rgb(157,165,176)); background: linear-gradient(90deg, rgb(182,188,198), rgb(157,165,176)); width: 300px; -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em; height: 20px; } .progress-meter { color: rgba(0, 0, 0, 0.6); font-size: 1em; text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px; text-align: right; font-weight: bold; height: 18px; border: 1px solid rgb(152,105,56); -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em; -webkit-box-shadow: inset 0px 1px 0px rgba(255,255,255,0.3), inset 0px -1px 1px rgba(0,0,0,0.2); -moz-box-shadow: inset 0px 1px 0px rgba(255,255,255,0.3), inset 0px -1px 1px rgba(0,0,0,0.2); box-shadow: inset 0px 1px 0px rgba(255,255,255,0.3), inset 0px -1px 1px rgba(0,0,0,0.2); background-image: -webkit-repeating-linear-gradient( -45deg, rgba(255,255,255,0), rgba(255,255,255,0) 15px, rgba(255,255,255,0.2) 15px, rgba(255,255,255,0.2) 30px), -webkit-linear-gradient( -90deg, rgb(240,179,123), rgb(234,171,107)); background-image: -moz-repeating-linear-gradient( -45deg, rgba(255,255,255,0), rgba(255,255,255,0) 15px, rgba(255,255,255,0.2) 15px, rgba(255,255,255,0.2) 30px), -moz-linear-gradient( -90deg, rgb(240,179,123), rgb(234,171,107)); background-image: -ms-repeating-linear-gradient( -45deg, rgba(255,255,255,0), rgba(255,255,255,0) 15px, rgba(255,255,255,0.2) 15px, rgba(255,255,255,0.2) 30px), -ms-linear-gradient( -90deg, rgb(240,179,123), rgb(234,171,107)); background-image: -o-repeating-linear-gradient( -45deg, rgba(255,255,255,0), rgba(255,255,255,0) 15px, rgba(255,255,255,0.2) 15px, rgba(255,255,255,0.2) 30px), -o-linear-gradient( -90deg, rgb(240,179,123), rgb(234,171,107)); background-image: repeating-linear-gradient( -45deg, rgba(255,255,255,0), rgba(255,255,255,0) 15px, rgba(255,255,255,0.2) 15px, rgba(255,255,255,0.2) 30px), linear-gradient( -90deg, rgb(240,179,123), rgb(234,171,107)); width: 100%; -webkit-animation: bg-anim 2s linear infinite; -moz-animation: bg-anim 2s linear infinite; -ms-animation: bg-anim 2s linear infinite; animation: bg-anim 2s linear infinite; }

Tutorials Palace 7 August, 2018 No Comments

211 Views