Animated Progress Bar

test.gif
Description
This BBCode will appear as a progress bar with a filled percentage value of your choice. The progress bar has an attractive animation to it.

Pure CSS3. No images included!
  • Author Dugi
  • Last updated Sun Nov 10, 2013 6:33 pm
  • Rating
    (3)
  • Categories Layout, Misc

Public performance attribution has been waived.

Settings

BBCode Usage: Select all
[progress]{NUMBER}[/progress]

HTML Replacement: Select all
<style> @-webkit-keyframes progress{to{background-position: 30px 0;}}@-moz-keyframes progress{to{background-position: 30px 0;}}@keyframes progress{to{background-position: 30px 0;}} </style><div style="display: inline-block; background-color: #282828; border-radius: 7px; box-shadow:inset 0px 0px 6px 2px rgba(255,255,255,.3); height: 17px; padding: 6px; width: 380px;"><div style="display: inline-block; height: 100%; width: {NUMBER}%; max-width: 100%; background-color: CornflowerBlue; border-radius: 3px;"><div style="width: 100%; height: 15px; border-radius: 20px; -webkit-animation: progress 1s linear infinite; -moz-animation: progress 1s linear infinite; animation: progress 1s linear infinite; background-repeat: repeat-x; background-size: 30px 30px; background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);"></div></div></div>

Help Line: Select all
[progress]Number from 1 to 100[/progress]
  • Revisions
    Version
    phpBB Version(s)
  • THE Progress Bar
    1.0.0
    3.0.x
    Validation time: Nov 10, 2013 6:33 pm

    BBCode Usage: Select all
    [progress]{NUMBER}[/progress]

    HTML Replacement: Select all
    <style> @-webkit-keyframes progress{to{background-position: 30px 0;}}@-moz-keyframes progress{to{background-position: 30px 0;}}@keyframes progress{to{background-position: 30px 0;}} </style><div style="display: inline-block; background-color: #282828; border-radius: 7px; box-shadow:inset 0px 0px 6px 2px rgba(255,255,255,.3); height: 17px; padding: 6px; width: 380px;"><div style="display: inline-block; height: 100%; width: {NUMBER}%; max-width: 100%; background-color: CornflowerBlue; border-radius: 3px;"><div style="width: 100%; height: 15px; border-radius: 20px; -webkit-animation: progress 1s linear infinite; -moz-animation: progress 1s linear infinite; animation: progress 1s linear infinite; background-repeat: repeat-x; background-size: 30px 30px; background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);"></div></div></div>

    Help Line: Select all
    [progress]Number from 1 to 100[/progress]