Permalink
Browse files

Adding IE styles, refactoring out extra div.

  • Loading branch information...
1 parent 844731c commit 30ab564f70c5677a994c8f55c7f2a52db714de97 @honzie honzie committed Apr 23, 2012
Showing with 162 additions and 233 deletions.
  1. +7 −1 README.markdown
  2. +15 −0 css3-progress-bar-ie.css
  3. +73 −106 css3-progress-bar.css
  4. +67 −126 example.html
View
8 README.markdown
@@ -6,7 +6,13 @@ They are light-weight, requiring no javascript. They work on iOS devices, they'r
## Instructions
1. Include the progress bar stylesheet:
- <link rel="stylesheet" href="css3-progress-bar.css">
+ <link rel="stylesheet" href="css3-progress-bar.css" />
+
+1.1. If you need to fully support versions of Internet Explorer prior to 9, include the IE supplemental styles after the above line. Keep in mind that the progress bars will still render well in IE6/7/8 without these styles. These styles use proprietary IE style techniques that are known to not be performant. To keep your site rendering quickly and responding well, consider not including this line and gracefully degrading in older browsers.
+
+ <!--[if lt IE 9]>
+ <link rel="stylesheet" href="css3-progress-bar-ie.css" />
+ <![endif]-->
2. Paste the following syntax where you want a progress bar. The progress far will fill the width of its containing block element.
View
15 css3-progress-bar-ie.css
@@ -0,0 +1,15 @@
+/* CSS3 Progress bars by Josh Sullivan
+ @jsullivandigs on Twitter
+ josh@dipperstove.com */
+
+.progress {filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );}
+
+/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+ COLORS
+=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
+
+.green {filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#AAFF00', endColorstr='#8c0',GradientType=0 );}
+.orange {filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFAA00', endColorstr='#dd9300',GradientType=0 );}
+.pink {filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF00AA', endColorstr='#dd0093',GradientType=0 );}
+.purple {filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#AA00FF', endColorstr='#9300dd',GradientType=0 );}
+.blue {filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00AAFF', endColorstr='#0093dd',GradientType=0 );}
View
179 css3-progress-bar.css
@@ -2,61 +2,37 @@
@jsullivandigs on Twitter
josh@dipperstove.com */
-.bar_container {
- margin: 0 auto;
- padding: 5px;
- height: 20px;
- background: #a0a0a0;
- -webkit-box-shadow: 0px 1px 1px 0px #f0f0f0;
- -moz-box-shadow: 0px 1px 1px 0px #f0f0f0;
- box-shadow: 0px 1px 0px 0px #f0f0f0;
-}
-
.bar_mortice {
height: 20px;
background: #777;
- -webkit-box-shadow: inset 0px 1px 2px 0px #333;
- -moz-box-shadow: inset 0px 1px 2px 0px #333;
- box-shadow: inset 0px 1px 2px 0px #333;
- border-bottom: 1px solid #d0d0d0;
+ -moz-box-shadow: inset 0px 1px 2px 0px #333, inset 0px -1px 1px 0px #d0d0d0, 0px 1px 1px 0px #f0f0f0;
+ box-shadow: inset 0px 1px 2px 0px #333, inset 0px -1px 1px 0px #d0d0d0, 0px 1px 0px 0px #f0f0f0;
+ border: 5px solid #a0a0a0;
}
.progress {
height: 19px;
background: #FFF;
float: left;
- background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
- background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
- background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
- background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
- background: linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
+ background: -moz-linear-gradient(top, #fff 0%, #e5e5e5 100%);
+ background: -webkit-linear-gradient(top, #fff 0%,#e5e5e5 100%);
+ background: -o-linear-gradient(top, #fff 0%,#e5e5e5 100%);
+ background: -ms-linear-gradient(top, #fff 0%,#e5e5e5 100%);
+ background: linear-gradient(top, #fff 0%,#e5e5e5 100%);
border-top: 1px solid #fff;
border-bottom: 1px solid #999;
}
/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
TINY
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
-.container_tiny {
- margin: 0 auto;
- padding: 3px;
- height: 7px;
- background: #a0a0a0;
- -webkit-box-shadow: 0px 1px 1px 0px #f0f0f0;
- -moz-box-shadow: 0px 1px 1px 0px #f0f0f0;
- box-shadow: 0px 1px 0px 0px #f0f0f0;
-
-}
.mortice_tiny {
height: 7px;
background: #777;
- -webkit-box-shadow: inset 0px 1px 2px 0px #333;
-moz-box-shadow: inset 0px 1px 2px 0px #333;
box-shadow: inset 0px 1px 2px 0px #333;
- border-bottom: 1px solid #d0d0d0;
+ border-width: 3px;
}
.progress_tiny {
@@ -69,24 +45,20 @@
STYLES
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
-.rounded_bar_container {
- -webkit-border-radius: 10px;
+.rounded {
-moz-border-radius: 10px;
border-radius: 10px;
}
-.rounded {
- -webkit-border-radius: 6px;
+.rounded .rounded {
-moz-border-radius: 6px;
border-radius: 6px;
}
-.rounded_bar_container_tiny {
- -webkit-border-radius: 5px;
+.rounded_tiny {
-moz-border-radius: 5px;
border-radius: 5px;
}
-.rounded_tiny {
- -webkit-border-radius: 2px;
+.rounded_tiny .rounded_tiny {
-moz-border-radius: 2px;
border-radius: 2px;
}
@@ -99,103 +71,98 @@
/* GREEN */
.green {
- background: #AAFF00;
- background: -moz-linear-gradient(top, #AAFF00 0%, #8c0 100%);
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#AAFF00), color-stop(100%,#8c0));
- background: -webkit-linear-gradient(top, #AAFF00 0%,#8c0 100%);
- background: -o-linear-gradient(top, #AAFF00 0%,#8c0 100%);
- background: -ms-linear-gradient(top, #AAFF00 0%,#8c0 100%);
- background: linear-gradient(top, #AAFF00 0%,#8c0 100%);
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#AAFF00', endColorstr='#8c0',GradientType=0 );
- border-top: 1px solid #e8ffbb;
- border-bottom: 1px solid #690;
-}
-.green_container {background: #690;}
+ background: #af0;
+ background: -moz-linear-gradient(top, #af0 0%, #8c0 100%);
+ background: -webkit-linear-gradient(top, #af0 0%,#8c0 100%);
+ background: -o-linear-gradient(top, #af0 0%,#8c0 100%);
+ background: -ms-linear-gradient(top, #af0 0%,#8c0 100%);
+ background: linear-gradient(top, #af0 0%,#8c0 100%);
+ border-top-color: #e8ffbb;
+ border-bottom-color: #690;
+}
.green_mortice {
background: #460;
- border-bottom: 1px solid #8c0;
+ border-color: #690;
+ -moz-box-shadow: inset 0px 1px 2px 0px #333, inset 0px -1px 1px 0px #8c0, 0px 1px 1px 0px #f0f0f0;
+ box-shadow: inset 0px 1px 2px 0px #333, inset 0px -1px 1px 0px #8c0, 0px 1px 0px 0px #f0f0f0;
}
/* ORANGE */
.orange {
- background: #FFAA00;
- background: -moz-linear-gradient(top, #FFAA00 0%, #dd9300 100%);
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFAA00), color-stop(100%,#dd9300));
- background: -webkit-linear-gradient(top, #FFAA00 0%,#dd9300 100%);
- background: -o-linear-gradient(top, #FFAA00 0%,#dd9300 100%);
- background: -ms-linear-gradient(top, #FFAA00 0%,#dd9300 100%);
- background: linear-gradient(top, #FFAA00 0%,#dd9300 100%);
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFAA00', endColorstr='#dd9300',GradientType=0 );
- border-top: 1px solid #ffd277;
- border-bottom: 1px solid #960;
-}
-.orange_container {background: #960;}
+ background: #fa0;
+ background: -moz-linear-gradient(top, #fa0 0%, #dd9300 100%);
+ background: -webkit-linear-gradient(top, #fa0 0%,#dd9300 100%);
+ background: -o-linear-gradient(top, #fa0 0%,#dd9300 100%);
+ background: -ms-linear-gradient(top, #fa0 0%,#dd9300 100%);
+ background: linear-gradient(top, #fa0 0%,#dd9300 100%);
+ border-top-color: #ffd277;
+ border-bottom-color: #960;
+}
.orange_mortice {
background: #640;
- border-bottom: 1px solid #CC8800;
+ border-color: #960;
+ -moz-box-shadow: inset 0px 1px 2px 0px #333, inset 0px -1px 1px 0px #c80, 0px 1px 1px 0px #f0f0f0;
+ box-shadow: inset 0px 1px 2px 0px #333, inset 0px -1px 1px 0px #c80, 0px 1px 0px 0px #f0f0f0;
}
/* PINK */
.pink {
- background: #FF00AA;
- background: -moz-linear-gradient(top, #FF00AA 0%, #dd0093 100%);
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF00AA), color-stop(100%,#dd0093));
- background: -webkit-linear-gradient(top, #FF00AA 0%,#dd0093 100%);
- background: -o-linear-gradient(top, #FF00AA 0%,#dd0093 100%);
- background: -ms-linear-gradient(top, #FF00AA 0%,#dd0093 100%);
- background: linear-gradient(top, #FF00AA 0%,#dd0093 100%);
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF00AA', endColorstr='#dd0093',GradientType=0 );
- border-top: 1px solid #f6c;
- border-bottom: 1px solid #906;
-}
-.pink_container {background: #906;}
+ background: #f0a;
+ background: -moz-linear-gradient(top, #f0a 0%, #dd0093 100%);
+ background: -webkit-linear-gradient(top, #f0a 0%,#dd0093 100%);
+ background: -o-linear-gradient(top, #f0a 0%,#dd0093 100%);
+ background: -ms-linear-gradient(top, #f0a 0%,#dd0093 100%);
+ background: linear-gradient(top, #f0a 0%,#dd0093 100%);
+ border-top-color: #f6c;
+ border-bottom-color: #906;
+}
.pink_mortice {
background: #604;
- border-bottom: 1px solid #c08;
+ border-color: #906;
+ -moz-box-shadow: inset 0px 1px 2px 0px #333, inset 0px -1px 1px 0px #c08, 0px 1px 1px 0px #f0f0f0;
+ box-shadow: inset 0px 1px 2px 0px #333, inset 0px -1px 1px 0px #c08, 0px 1px 0px 0px #f0f0f0;
}
/* PURPLE */
.purple {
- background: #AA00FF;
- background: -moz-linear-gradient(top, #AA00FF 0%, #9300dd 100%);
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#AA00FF), color-stop(100%,#9300dd));
- background: -webkit-linear-gradient(top, #AA00FF 0%,#9300dd 100%);
- background: -o-linear-gradient(top, #AA00FF 0%,#9300dd 100%);
- background: -ms-linear-gradient(top, #AA00FF 0%,#9300dd 100%);
- background: linear-gradient(top, #AA00FF 0%,#9300dd 100%);
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#AA00FF', endColorstr='#9300dd',GradientType=0 );
- border-top: 1px solid #c655ff;
- border-bottom: 1px solid #5b0088;
-}
-.purple_container {background: #609;}
+ background: #a0f;
+ background: -moz-linear-gradient(top, #A0F 0%, #9300dd 100%);
+ background: -webkit-linear-gradient(top, #A0F 0%,#9300dd 100%);
+ background: -o-linear-gradient(top, #A0F 0%,#9300dd 100%);
+ background: -ms-linear-gradient(top, #A0F 0%,#9300dd 100%);
+ background: linear-gradient(top, #A0F 0%,#9300dd 100%);
+ border-top-color: #c655ff;
+ border-bottom-color: #5b0088;
+}
.purple_mortice {
background: #406;
- border-bottom: 1px solid #80c;
+ border-color: #609;
+ -moz-box-shadow: inset 0px 1px 2px 0px #333, inset 0px -1px 1px 0px #80c, 0px 1px 1px 0px #f0f0f0;
+ box-shadow: inset 0px 1px 2px 0px #333, inset 0px -1px 1px 0px #80c, 0px 1px 0px 0px #f0f0f0;
}
/* BLUE */
.blue {
- background: #00AAFF;
- background: -moz-linear-gradient(top, #00AAFF 0%, #0093dd 100%);
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00AAFF), color-stop(100%,#0093dd));
- background: -webkit-linear-gradient(top, #00AAFF 0%,#0093dd 100%);
- background: -o-linear-gradient(top, #00AAFF 0%,#0093dd 100%);
- background: -ms-linear-gradient(top, #00AAFF 0%,#0093dd 100%);
- background: linear-gradient(top, #00AAFF 0%,#0093dd 100%);
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00AAFF', endColorstr='#0093dd',GradientType=0 );
- border-top: 1px solid #88d7ff;
- border-bottom: 1px solid #069;
-}
-.blue_container {background: #069;}
+ background: #0af;
+ background: -moz-linear-gradient(top, #0af 0%, #0093dd 100%);
+ background: -webkit-linear-gradient(top, #0af 0%,#0093dd 100%);
+ background: -o-linear-gradient(top, #0af 0%,#0093dd 100%);
+ background: -ms-linear-gradient(top, #0af 0%,#0093dd 100%);
+ background: linear-gradient(top, #0af 0%,#0093dd 100%);
+ border-top-color: #88d7ff;
+ border-bottom-color: #069;
+}
.blue_mortice {
background: #046;
- border-bottom: 1px solid #08c;
+ border-color: #069;
+ -moz-box-shadow: inset 0px 1px 2px 0px #333, inset 0px -1px 1px 0px #08c, 0px 1px 1px 0px #f0f0f0;
+ box-shadow: inset 0px 1px 2px 0px #333, inset 0px -1px 1px 0px #08c, 0px 1px 0px 0px #f0f0f0;
}
View
193 example.html
@@ -7,147 +7,88 @@
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>CSS3 Progress bars</title>
<link rel="stylesheet" href="css3-progress-bar.css">
+ <!--[if lt IE 9]>
+ <link rel="stylesheet" href="css3-progress-bar-ie.css" />
+ <![endif]-->
<style type="text/css">
body {
background: #D0D0D0;
padding: 5%;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
+ text-shadow: 0 1px 1px #F0F0F0;
}
- p {text-shadow: 0 1px 1px #F0F0F0;}
h1 {
color: #444;
text-align: center;
- text-shadow: 0 1px 1px #F0F0F0;
font-weight: 700;
}
+ .bar_mortice {
+ margin:0 0 1em;
+ }
</style>
</head>
<body>
<h1>CSS3 Progress bars</h1>
- <p>
- Default
- <div class="bar_container">
- <div class="bar_mortice">
- <div class="progress" style="width: 40%;"></div>
- </div>
- </div>
- </p>
- <p>
- Round
- <div class="bar_container rounded_bar_container">
- <div class="bar_mortice rounded">
- <div class="progress rounded" style="width: 80%;"></div>
- </div>
- </div>
- </p>
- <p>
- <div class="bar_container rounded_bar_container green_container">
- <div class="bar_mortice rounded green_mortice">
- <div class="progress rounded green" style="width: 50%;"></div>
- </div>
- </div>
- </p>
- <p>
- <div class="bar_container rounded_bar_container orange_container">
- <div class="bar_mortice rounded orange_mortice">
- <div class="progress rounded orange" style="width: 75%;"></div>
- </div>
- </div>
- </p>
- <p>
- <div class="bar_container rounded_bar_container pink_container">
- <div class="bar_mortice rounded pink_mortice">
- <div class="progress rounded pink" style="width: 35%;"></div>
- </div>
- </div>
- </p>
- <p>
- <div class="bar_container rounded_bar_container purple_container">
- <div class="bar_mortice rounded purple_mortice">
- <div class="progress rounded purple" style="width: 59%;"></div>
- </div>
- </div>
- </p>
- <p>
- <div class="bar_container rounded_bar_container blue_container">
- <div class="bar_mortice rounded blue_mortice">
- <div class="progress rounded blue" style="width: 40%;"></div>
- </div>
- </div>
- </p>
- <p>
- Combo
- <div class="bar_container">
- <div class="bar_mortice">
- <div class="progress green" style="width: 40%;"></div>
- <div class="progress orange" style="width: 10%;"></div>
- <div class="progress pink" style="width: 25%;"></div>
- <div class="progress blue" style="width: 15%;"></div>
- </div>
- </div>
- </p>
- <p>
- Tiny
- <div class="bar_container container_tiny">
- <div class="bar_mortice mortice_tiny">
- <div class="progress progress_tiny" style="width: 66%;"></div>
- </div>
- </div>
- </p>
- <p>
- Tiny Round
- <div class="bar_container rounded_bar_container_tiny container_tiny">
- <div class="bar_mortice rounded_tiny mortice_tiny">
- <div class="progress rounded_tiny progress_tiny" style="width: 33%;"></div>
- </div>
- </div>
- </p>
- <p>
- <div class="bar_container rounded_bar_container_tiny container_tiny green_container">
- <div class="bar_mortice rounded_tiny mortice_tiny green_mortice">
- <div class="progress rounded_tiny progress_tiny green" style="width: 45%;"></div>
- </div>
- </div>
- </p>
- <p>
- <div class="bar_container rounded_bar_container_tiny container_tiny orange_container">
- <div class="bar_mortice rounded_tiny mortice_tiny orange_mortice">
- <div class="progress rounded_tiny progress_tiny orange" style="width: 80%;"></div>
- </div>
- </div>
- </p>
- <p>
- <div class="bar_container rounded_bar_container_tiny container_tiny pink_container">
- <div class="bar_mortice rounded_tiny mortice_tiny pink_mortice">
- <div class="progress rounded_tiny progress_tiny pink" style="width: 66%;"></div>
- </div>
- </div>
- </p>
- <p>
- <div class="bar_container rounded_bar_container_tiny container_tiny purple_container">
- <div class="bar_mortice rounded_tiny mortice_tiny purple_mortice">
- <div class="progress rounded_tiny progress_tiny purple" style="width: 37%;"></div>
- </div>
- </div>
- </p>
- <p>
- <div class="bar_container rounded_bar_container_tiny container_tiny blue_container">
- <div class="bar_mortice rounded_tiny mortice_tiny blue_mortice">
- <div class="progress rounded_tiny progress_tiny blue" style="width: 70%;"></div>
- </div>
- </div>
- </p>
- <p>
- Tiny Combo
- <div class="bar_container container_tiny">
- <div class="bar_mortice mortice_tiny">
- <div class="progress progress_tiny green" style="width: 30%;"></div>
- <div class="progress progress_tiny orange" style="width: 20%;"></div>
- <div class="progress progress_tiny pink" style="width: 20%;"></div>
- <div class="progress progress_tiny blue" style="width: 15%;"></div>
- </div>
- </div>
- </p>
+ <p>Default</p>
+ <div class="bar_mortice">
+ <div class="progress" style="width: 40%;"></div>
+ </div>
+ <p>Round<p>
+ <div class="bar_mortice rounded">
+ <div class="progress rounded" style="width: 80%;"></div>
+ </div>
+ <div class="bar_mortice rounded green_mortice">
+ <div class="progress rounded green" style="width: 50%;"></div>
+ </div>
+ <div class="bar_mortice rounded orange_mortice">
+ <div class="progress rounded orange" style="width: 75%;"></div>
+ </div>
+ <div class="bar_mortice rounded pink_mortice">
+ <div class="progress rounded pink" style="width: 35%;"></div>
+ </div>
+ <div class="bar_mortice rounded purple_mortice">
+ <div class="progress rounded purple" style="width: 59%;"></div>
+ </div>
+ <div class="bar_mortice rounded blue_mortice">
+ <div class="progress rounded blue" style="width: 40%;"></div>
+ </div>
+ <p>Combo</p>
+ <div class="bar_mortice">
+ <div class="progress green" style="width: 40%;"></div>
+ <div class="progress orange" style="width: 10%;"></div>
+ <div class="progress pink" style="width: 25%;"></div>
+ <div class="progress blue" style="width: 15%;"></div>
+ </div>
+ <p>Tiny</p>
+ <div class="bar_mortice mortice_tiny">
+ <div class="progress progress_tiny" style="width: 66%;"></div>
+ </div>
+ <p>Tiny Round</p>
+ <div class="bar_mortice rounded_tiny mortice_tiny">
+ <div class="progress rounded_tiny progress_tiny" style="width: 33%;"></div>
+ </div>
+ <div class="bar_mortice rounded_tiny mortice_tiny green_mortice">
+ <div class="progress rounded_tiny progress_tiny green" style="width: 45%;"></div>
+ </div>
+ <div class="bar_mortice rounded_tiny mortice_tiny orange_mortice">
+ <div class="progress rounded_tiny progress_tiny orange" style="width: 80%;"></div>
+ </div>
+ <div class="bar_mortice rounded_tiny mortice_tiny pink_mortice">
+ <div class="progress rounded_tiny progress_tiny pink" style="width: 66%;"></div>
+ </div>
+ <div class="bar_mortice rounded_tiny mortice_tiny purple_mortice">
+ <div class="progress rounded_tiny progress_tiny purple" style="width: 37%;"></div>
+ </div>
+ <div class="bar_mortice rounded_tiny mortice_tiny blue_mortice">
+ <div class="progress rounded_tiny progress_tiny blue" style="width: 70%;"></div>
+ </div>
+ <p>Tiny Combo</p>
+ <div class="bar_mortice mortice_tiny">
+ <div class="progress progress_tiny green" style="width: 30%;"></div>
+ <div class="progress progress_tiny orange" style="width: 20%;"></div>
+ <div class="progress progress_tiny pink" style="width: 20%;"></div>
+ <div class="progress progress_tiny blue" style="width: 15%;"></div>
+ </div>
</body>
</html>

0 comments on commit 30ab564

Please sign in to comment.