├── body-bg.png ├── README.md ├── index.html └── style.css /body-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kevinholesh/css-progress-bars/HEAD/body-bg.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | CSS Progress Bars 2 | ================= 3 | 4 | Heavily based off the progress bars by Galen Gidman (@galengidman) 5 | 6 | 7 | Demo 8 | ----------- 9 | View the demo at http://kevinholesh.github.com/css-progress-bars/ 10 | 11 | 12 | Any questions or suggestions, email [me@kevinholesh.com](mailto:me@kevinholesh.com) 13 | 14 | 15 | Cross-browser testing 16 | ---------------------- 17 | Compatible with: 18 | * Firefox (Mac and Windows) 19 | * Chrome (Mac and Windows) 20 | * Safari (Mac and Windows) 21 | * Opera (Mac and Windows) 22 | * iPhone 23 | * iPad 24 | * IE8 25 | * IE7 (sort of) 26 | * IE6 (sort of) 27 | 28 | 29 | TODO 30 | --------- 31 | * Make a better jQuery function for updating the completion 32 | * Better "finished" state. It looks awkward now. 33 | * Another simpler theme. Basic colors and no fancy gradient. 34 | * Test with a screenreader -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CSS3 Progress Bars 5 | 6 | 7 | 8 | 9 | 10 | 36 | 37 | 38 |
39 | 40 |

CSS3 Progress Bars

41 |
42 |
43 |
100%
44 |
45 |
46 |
40%
47 |
48 |
49 |
10%
50 |
51 |
52 |
70%
53 |
54 |
55 |
56 | 57 |

These progress bars were created by Galen Gidman using no images what-so-ever... just CSS3.

58 | 59 |

The animation was added by Kevin Holesh.

60 | 61 | 62 |

Download Source / See the code on Github / Read the original article

63 |
64 | 65 | 66 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /************ 2 | Animated CSS progress bars based on Galen Gidman's work (http://galengidman.com/2010/12/20/css3-progress-bars) 3 | 4 | c[~] Kevin Holesh (me@kevinholesh.com) 5 | ************/ 6 | 7 | /* 8 | 9 | This is just some code to make the page look nice, but 10 | it's not at all essential to making the progress bars 11 | work. Feel free to ignore it. 12 | 13 | */ 14 | 15 | @import url(http://fonts.googleapis.com/css?family=Droid+Serif);*{margin:0;padding:0}body{width:640px;margin:auto;padding:100px 0 50px 0;background:url(body-bg.png) #222}#container{font:16px/24px 'Droid Serif',Georgia,serif;text-align:center;color:#fff;text-shadow:0 1px 0 #000}h1{font-size:36px;line-height:36px}h3{font-size:18px;margin-top:50px}a{color:#fff}#bars-container{margin:50px 0}.progress-bar{float:left;margin:10px 0}.alt{float:right}.clear{clear:both} 16 | 17 | 18 | /* progress bar base */ 19 | .progress-bar { 20 | background-color: #191919; 21 | border-radius: 16px; 22 | padding: 4px; 23 | position: relative; 24 | overflow: hidden; 25 | width: 300px; 26 | height: 24px; 27 | -webkit-border-radius: 16px; 28 | -moz-border-radius: 16px; 29 | border-radius: 16px; 30 | -webkit-box-shadow: inset 0 1px 2px #000, 0 1px 0 #2b2b2b; 31 | -moz-box-shadow: inset 0 1px 2px #000, 0 1px 0 #2b2b2b; 32 | box-shadow: inset 0 1px 2px #000, 0 1px 0 #2b2b2b; 33 | } 34 | 35 | /* code for the inner (colorful) part of the bar */ 36 | .progress-bar .completion { 37 | background: #999; 38 | display: block; 39 | font: bold 16px/24px sans-serif; 40 | position: absolute; 41 | overflow: hidden; 42 | max-width: 97.5% !important; /* Prevent a full bar from overflowing */ 43 | height: 24px; 44 | text-indent: -9999px; 45 | -webkit-border-radius: 12px; 46 | -moz-border-radius: 12px; 47 | border-radius: 12px; 48 | -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 49 | inset 0 -1px 3px rgba(0, 0, 0, 0.4), 50 | 0 1px 1px #000; 51 | -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 52 | inset 0 -1px 3px rgba(0, 0, 0, 0.4), 53 | 0 1px 1px #000; 54 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 55 | inset 0 -1px 3px rgba(0, 0, 0, 0.4), 56 | 0 1px 1px #000; 57 | -webkit-transition: width 0.3s linear; 58 | -moz-transition: width 0.3s linear; 59 | transition: width 0.3s linear; 60 | } 61 | 62 | @-webkit-keyframes scrollin { 63 | 0% { left: -20px; } 64 | 100% { left: -92px; } 65 | } 66 | @-moz-keyframes scrollin { 67 | 0% { left: -20px; } 68 | 100% { left: -92px; } 69 | } 70 | @keyframes scrollin { 71 | 0% { left: -20px; } 72 | 100% { left: -92px; } 73 | } 74 | 75 | /* code to stripe the bars */ 76 | .progress-bar .completion .zebra { 77 | color: black; 78 | font: normal 120px/80px sans-serif; 79 | letter-spacing: -15px; 80 | display: block; 81 | position: absolute; 82 | top: 0; 83 | left: -20px; 84 | width: 300%; 85 | height: 24px; 86 | opacity: 0.06; 87 | overflow: hidden; 88 | text-align: left; 89 | text-indent: 0; 90 | z-index: 1; 91 | -webkit-border-radius: 12px; 92 | -moz-border-radius: 12px; 93 | border-radius: 12px; 94 | -webkit-transform: skewX(-10deg); 95 | -moz-transform: skewX(-10deg); 96 | -o-transform: skewX(-10deg); 97 | transform: skewX(-10deg); 98 | 99 | -webkit-animation-name: scrollin; 100 | -webkit-animation-duration: 3.2s; 101 | -webkit-animation-iteration-count: infinite; 102 | -webkit-animation-timing-function: linear; 103 | 104 | /* Doesn't work in FF yet. Will in version 5.0 */ 105 | -moz-animation-name: scrollin; 106 | -moz-animation-duration: 3.2s; 107 | -moz-animation-iteration-count: infinite; 108 | -moz-animation-timing-function: linear; 109 | animation-name: scrollin; 110 | animation-duration: 3.2s; 111 | animation-iteration-count: infinite; 112 | animation-timing-function: linear; 113 | 114 | /* I hate doing it, but I need it or the HTML gets very complex */ 115 | filter: alpha(opacity = 06); 116 | } 117 | 118 | 119 | /* code for the colors */ 120 | .blue .completion { 121 | background: #099; 122 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#099), to(#006A6B)); 123 | background: -moz-linear-gradient(top, #099, #006A6B); 124 | } 125 | 126 | .pink .completion { 127 | background: #f09; 128 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f36), to(#AC2246)); 129 | background: -moz-linear-gradient(top, #f36, #AC2246); 130 | } 131 | 132 | .green .completion { 133 | background: #7EBD01; 134 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7EBD01), to(#568201)); 135 | background: -moz-linear-gradient(top, #7EBD01, #568201); 136 | } 137 | 138 | .orange .completion { 139 | background: #f90; 140 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f90), to(#f60)); 141 | background: -moz-linear-gradient(top, #f90, #f60); 142 | text-indent: 0; 143 | } --------------------------------------------------------------------------------