diff --git a/demo/meter.html b/demo/meter.html
new file mode 100644
index 0000000..3cff232
--- /dev/null
+++ b/demo/meter.html
@@ -0,0 +1,13 @@
+
+
+
+
+ CSS Chassis - Meter
+
+
+
+
+
+
+
+
diff --git a/scss/atoms/meter/_meter.scss b/scss/atoms/meter/_meter.scss
new file mode 100644
index 0000000..e742717
--- /dev/null
+++ b/scss/atoms/meter/_meter.scss
@@ -0,0 +1,114 @@
+/*
+* ==========================================================================
+* meter
+* ==========================================================================
+*/
+
+@import
+ "variables";
+
+meter {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ width: 550px;
+ height: 25px;
+ margin:10px;
+ display:block;
+ box-shadow: inset 0 0 7px -2px rgba(0,0,0,0.35);
+ background: $meterbar-background-color;
+}
+
+.meter-simple::-webkit-meter-bar,
+.meter-multicolor::-webkit-meter-bar,
+.meter-strip::-webkit-meter-bar {
+ box-shadow: inset 0 0 7px -2px rgba(0,0,0,0.35);
+ background: $meterbar-background-color;
+}
+
+.meter-simple::-webkit-meter-optimum-value {
+ background: $chassis-blue;
+}
+
+
+.meter-multicolor::-webkit-meter-optimum-value {
+ background-image: linear-gradient(
+ 90deg,
+ adjust-saturation($color , $percentage) 10%,
+ adjust-saturation($color , $percentage - 5%) 10%,
+ adjust-saturation($color , $percentage - 5%) 20%,
+ adjust-saturation($color , $percentage - 10%) 20%,
+ adjust-saturation($color , $percentage - 10%) 30%,
+ adjust-saturation($color , $percentage - 15%) 30%,
+ adjust-saturation($color , $percentage - 15%) 40%,
+ adjust-saturation($color , $percentage - 20%) 40%,
+ adjust-saturation($color , $percentage - 20%) 50%,
+ adjust-saturation($color , $percentage - 25%) 50%,
+ adjust-saturation($color , $percentage - 25%) 60%,
+ adjust-saturation($color , $percentage - 30%) 60%,
+ adjust-saturation($color , $percentage - 30%) 70%,
+ adjust-saturation($color , $percentage - 35%) 70%,
+ adjust-saturation($color , $percentage - 35%) 80%,
+ adjust-saturation($color , $percentage - 40%) 80%,
+ adjust-saturation($color , $percentage - 40%) 90%,
+ adjust-saturation($color , $percentage - 45%) 90%,
+ adjust-saturation($color , $percentage - 45%) 100%
+ );
+ background-size: 100% 100%;
+}
+
+.meter-strip::-webkit-meter-optimum-value {
+ background-image: linear-gradient(
+ 135deg,
+ transparent,
+ transparent 33%,
+ $chassis-blue 33%,
+ $chassis-blue 66%,
+ transparent 66%
+ );
+ background-size: 50px 25px;
+}
+
+
+
+.meter-simple:-moz-meter-optimum::-moz-meter-bar {
+ background: $chassis-blue;
+}
+
+
+.meter-multicolor:-moz-meter-optimum::-moz-meter-bar {
+ background-image: linear-gradient(
+ 90deg,
+ adjust-saturation($color , $percentage) 10%,
+ adjust-saturation($color , $percentage - 5%) 10%,
+ adjust-saturation($color , $percentage - 5%) 20%,
+ adjust-saturation($color , $percentage - 10%) 20%,
+ adjust-saturation($color , $percentage - 10%) 30%,
+ adjust-saturation($color , $percentage - 15%) 30%,
+ adjust-saturation($color , $percentage - 15%) 40%,
+ adjust-saturation($color , $percentage - 20%) 40%,
+ adjust-saturation($color , $percentage - 20%) 50%,
+ adjust-saturation($color , $percentage - 25%) 50%,
+ adjust-saturation($color , $percentage - 25%) 60%,
+ adjust-saturation($color , $percentage - 30%) 60%,
+ adjust-saturation($color , $percentage - 30%) 70%,
+ adjust-saturation($color , $percentage - 35%) 70%,
+ adjust-saturation($color , $percentage - 35%) 80%,
+ adjust-saturation($color , $percentage - 40%) 80%,
+ adjust-saturation($color , $percentage - 40%) 90%,
+ adjust-saturation($color , $percentage - 45%) 90%,
+ adjust-saturation($color , $percentage - 45%) 100%
+ );
+ background-size: 100% 100%;
+}
+
+.meter-strip:-moz-meter-optimum::-moz-meter-bar {
+ background-image: linear-gradient(
+ 135deg,
+ transparent,
+ transparent 33%,
+ $chassis-blue 33%,
+ $chassis-blue 66%,
+ transparent 66%
+ );
+ background-size: 50px 25px;
+}
diff --git a/scss/atoms/meter/_variables.scss b/scss/atoms/meter/_variables.scss
new file mode 100644
index 0000000..e500ecf
--- /dev/null
+++ b/scss/atoms/meter/_variables.scss
@@ -0,0 +1,20 @@
+/*
+* ==========================================================================
+* meter variables
+* ==========================================================================
+*/
+$chassis-blue: #37bfc9;
+$meterbar-background-color: #f1f1f1;
+
+
+/*
+* For multi color Meter bar
+* Scales $color's saturation value by $amount. $amount can be negative.
+* scale-saturation($color, $amount)
+*/
+
+/* This is the staring color, whose the saturation increse with percentage. */
+$color: #3ee3ef;
+
+/* The starting percentage, which increse the saturation of the color. */
+$percentage: 0;
diff --git a/scss/lint.scss b/scss/lint.scss
index 186712c..c4d405e 100644
--- a/scss/lint.scss
+++ b/scss/lint.scss
@@ -12,7 +12,8 @@
@import
"atoms/icons/icons",
- "atoms/typography/typography";
+ "atoms/typography/typography",
+ "atoms/meter/meter";
@import
"views/main";