Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

New snippet: animated progress bar (22)

  • Loading branch information...
commit 33ae9506929c136698f2dd4e7d88397b458f9771 1 parent 79bc7e0
@Thibaut authored
View
20 22-progress-bar-anim/LICENSE
@@ -0,0 +1,20 @@
+Copyright (c) 2012 Thibaut Courouble
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
View
39 22-progress-bar-anim/README.md
@@ -0,0 +1,39 @@
+# Animated Progress Bar — HML5 & CSS3 Snippet
+
+**Demo**: [demo.webinterfacelab.com/22-progress-bar-anim](http://demo.webinterfacelab.com/22-progress-bar-anim/)
+
+[![Preview](http://www.webinterfacelab.com/snippets/animated-progress-bar/preview.png)](http://www.webinterfacelab.com/snippets/animated-progress-bar)
+
+This snippet is implemented with [Sass](https://github.com/nex3/sass), with help from [Bourbon](https://github.com/thoughtbot/bourbon).
+
+To compile:
+
+`sass --update scss:css -r ../bourbon/lib/bourbon.rb`
+
+To compile and watch:
+
+`sass --watch scss:css -r ../bourbon/lib/bourbon.rb`
+
+## Browser Compatibility
+
+Firefox 4+, Safari 5.1+, Chrome 13+, Opera 10+, Internet Explorer 9+.
+
+## Credits
+
+Coded by [Thibaut Courouble](http://thibaut.me).
+
+Original PSD by [Vin Thomas](http://365psd.com/day/2-117/).
+
+For more snippets, visit [WebInterfaceLab.com](http://www.webinterfacelab.com) or follow [@WebInterfaceLab](http://twitter.com/WebInterfaceLab).
+
+## License
+
+Copyright (c) 2012 Thibaut Courouble
+
+Licensed under the MIT License
+
+## More CSS3
+
+Have a look at my [CSS3 Toolkits](http://www.webinterfacelab.com/css3-web-interface-toolkits):
+
+[![Thumb #1](http://cdn.webinterfacelab.com/elegant/thumb-180-1.png)](http://www.webinterfacelab.com/css3-web-interface-toolkits/elegant) [![Thumb #2](http://cdn.webinterfacelab.com/simple/thumb-180-1.png)](http://www.webinterfacelab.com/css3-web-interface-toolkits/simple) [![Thumb #3](http://cdn.webinterfacelab.com/elegant/thumb-180-2.png)](http://www.webinterfacelab.com/css3-web-interface-toolkits/elegant) [![Thumb #4](http://cdn.webinterfacelab.com/simple/thumb-180-2.png)](http://www.webinterfacelab.com/css3-web-interface-toolkits/simple)
View
231 22-progress-bar-anim/css/style.css
@@ -0,0 +1,231 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+
+body {
+ line-height: 1;
+}
+
+ol, ul {
+ list-style: none;
+}
+
+blockquote, q {
+ quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+/*
+ * Copyright (c) 2012 Thibaut Courouble
+ * http://www.webinterfacelab.com
+ *
+ * Licensed under the MIT License:
+ * http://www.opensource.org/licenses/mit-license.php
+ */
+/* ========================================================
+ Page
+ ===================================================== */
+body {
+ color: #404040;
+ font-family: 'Lucida Grande', Verdana, sans-serif;
+ font-size: 13px;
+ font-weight: normal;
+ line-height: 20px;
+ background: #2a2a2a url("../img/bg.png") 0 0 repeat;
+}
+
+.container {
+ margin: 80px auto;
+ width: 400px;
+ text-align: center;
+}
+
+/* ========================================================
+ Progress bar
+ ===================================================== */
+.progress {
+ padding: 4px;
+ margin-bottom: 25px;
+ background: rgba(0, 0, 0, 0.25);
+ border-radius: 6px;
+ -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
+ -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
+}
+
+.progress-bar {
+ position: relative;
+ height: 16px;
+ border-radius: 4px;
+ -webkit-transition: 0.4s linear;
+ -moz-transition: 0.4s linear;
+ -ms-transition: 0.4s linear;
+ -o-transition: 0.4s linear;
+ transition: 0.4s linear;
+ -webkit-transition-property: width, background-color;
+ -moz-transition-property: width, background-color;
+ -ms-transition-property: width, background-color;
+ -o-transition-property: width, background-color;
+ transition-property: width, background-color;
+ -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
+ -moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
+ box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
+}
+.progress-bar:before, .progress-bar:after {
+ content: '';
+ top: 0;
+ right: 0;
+ left: 0;
+ position: absolute;
+}
+.progress-bar:before {
+ bottom: 0;
+ z-index: 2;
+ background: url("../img/stripes.png") 0 0 repeat;
+ border-radius: 4px 4px 0 0;
+}
+.progress-bar:after {
+ bottom: 45%;
+ z-index: 3;
+ border-radius: 4px;
+ background-color: transparent;
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(255, 255, 255, 0.05)));
+ background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
+ background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
+ background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
+ background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
+ background-image: linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
+}
+
+/*
+ * Note: using adjacent or general sibling selectors combined with
+ * pseudo classes doesn't work in Safari 5.0 and Chrome 12.
+ * See this article for more info and a potential fix:
+ * http://css-tricks.com/webkit-sibling-bug/
+ */
+#five:checked ~ .progress > .progress-bar {
+ width: 5%;
+ background-color: #f63a0f;
+}
+
+#twentyfive:checked ~ .progress > .progress-bar {
+ width: 25%;
+ background-color: #f27011;
+}
+
+#fifty:checked ~ .progress > .progress-bar {
+ width: 50%;
+ background-color: #f2b01e;
+}
+
+#seventyfive:checked ~ .progress > .progress-bar {
+ width: 75%;
+ background-color: #f2d31b;
+}
+
+#onehundred:checked ~ .progress > .progress-bar {
+ width: 100%;
+ background-color: #86e01e;
+}
+
+.radio {
+ display: none;
+}
+
+.label {
+ display: inline-block;
+ margin: 0 5px 20px;
+ padding: 3px 8px;
+ color: #aaa;
+ text-shadow: 0 1px #000;
+ cursor: pointer;
+ border-radius: 3px;
+}
+.radio:checked + .label {
+ color: #fff;
+ background: rgba(0, 0, 0, 0.25);
+}
+
+/* ========================================================
+ About
+ ===================================================== */
+.about {
+ margin: 100px auto 80px;
+ padding: 15px 20px;
+ width: 300px;
+ text-align: center;
+ color: #aaa;
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
+ background: rgba(0, 0, 0, 0.1);
+ border-radius: 3px;
+}
+.about a {
+ padding: 1px 3px;
+ margin: 0 -1px;
+ color: #fafafa;
+ text-decoration: none;
+ border-radius: 2px;
+}
+.about a:hover {
+ color: #111;
+ text-shadow: none;
+ background: #fafafa;
+}
+
+.links {
+ zoom: 1;
+}
+.links:before, .links:after {
+ content: "";
+ display: table;
+}
+.links:after {
+ clear: both;
+}
+.links a {
+ padding: 6px 0;
+ float: left;
+ width: 50%;
+ font-size: 14px;
+}
+
+.author {
+ margin-top: 15px;
+ font-size: 11px;
+}
View
BIN  22-progress-bar-anim/img/bg.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  22-progress-bar-anim/img/stripes.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
51 22-progress-bar-anim/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
+<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
+<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+ <title>Animated Progress Bar</title>
+
+ <link rel="stylesheet" href="css/style.css">
+
+ <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+</head>
+
+<body>
+ <div class="container">
+ <input type="radio" class="radio" name="progress" value="five" id="five">
+ <label for="five" class="label">5%</label>
+
+ <input type="radio" class="radio" name="progress" value="twentyfive" id="twentyfive" checked>
+ <label for="twentyfive" class="label">25%</label>
+
+ <input type="radio" class="radio" name="progress" value="fifty" id="fifty">
+ <label for="fifty" class="label">50%</label>
+
+ <input type="radio" class="radio" name="progress" value="seventyfive" id="seventyfive">
+ <label for="seventyfive" class="label">75%</label>
+
+ <input type="radio" class="radio" name="progress" value="onehundred" id="onehundred">
+ <label for="onehundred" class="label">100%</label>
+
+ <div class="progress">
+ <div class="progress-bar"></div>
+ </div>
+ </div>
+
+ <section class="about">
+ <p class="links">
+ <a href="http://www.webinterfacelab.com/snippets/animated-progress-bar" target="_parent">View Article</a>
+ <a href="http://www.webinterfacelab.com/snippets/animated-progress-bar.zip" target="_parent">Download Snippet</a>
+ </p>
+ <p class="author">
+ &copy; 2012 <a href="http://thibaut.me" target="_blank">Thibaut Courouble</a> &ndash;
+ <a href="http://www.webinterfacelab.com/mit-license" target="_blank" rel="nofollow">MIT License</a><br>
+ Original PSD by <a href="http://365psd.com/day/2-117/" target="_blank" rel="nofollow">Vin Thomas</a>
+ </p>
+ </section>
+</body>
+</html>
View
BIN  22-progress-bar-anim/preview.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
168 22-progress-bar-anim/scss/style.scss
@@ -0,0 +1,168 @@
+@import '../../bourbon/bourbon';
+@import '../../css/reset';
+
+/*
+ * Copyright (c) 2012 Thibaut Courouble
+ * http://www.webinterfacelab.com
+ *
+ * Licensed under the MIT License:
+ * http://www.opensource.org/licenses/mit-license.php
+ */
+
+/* ========================================================
+ Page
+ ===================================================== */
+
+$siteWidth: 400px;
+
+body {
+ color: #404040;
+ font-family: 'Lucida Grande', Verdana, sans-serif;
+ font-size: 13px;
+ font-weight: normal;
+ line-height: 20px;
+ background: #2a2a2a url('../img/bg.png') 0 0 repeat;
+}
+
+.container {
+ margin: 80px auto;
+ width: $siteWidth;
+ text-align: center;
+}
+
+/* ========================================================
+ Progress bar
+ ===================================================== */
+
+.progress {
+ padding: 4px;
+ margin-bottom: 25px;
+ background: rgba(0, 0, 0, .25);
+ border-radius: 6px;
+ @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, .25),
+ 0 1px rgba(255, 255, 255, .08));
+}
+
+.progress-bar {
+ position: relative;
+ height: 16px;
+ border-radius: 4px;
+ @include transition(.4s linear);
+ @include transition-property(width, background-color);
+ @include box-shadow(0 0 1px 1px rgba(0, 0, 0, .25),
+ inset 0 1px rgba(255, 255, 255, .1));
+
+ &:before, &:after {
+ content: '';
+ top: 0; right: 0; left: 0;
+ position: absolute;
+ }
+
+ &:before {
+ bottom: 0;
+ z-index: 2;
+ background: url('../img/stripes.png') 0 0 repeat;
+ border-radius: 4px 4px 0 0;
+ }
+
+ &:after {
+ bottom: 45%;
+ z-index: 3;
+ border-radius: 4px;
+ @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, .05), $fallback: transparent);
+ }
+}
+
+/*
+ * Note: using adjacent or general sibling selectors combined with
+ * pseudo classes doesn't work in Safari 5.0 and Chrome 12.
+ * See this article for more info and a potential fix:
+ * http://css-tricks.com/webkit-sibling-bug/
+ */
+
+#five:checked ~ .progress > .progress-bar, {
+ width: 5%;
+ background-color: #f63a0f;
+}
+
+#twentyfive:checked ~ .progress > .progress-bar {
+ width: 25%;
+ background-color: #f27011;
+}
+
+#fifty:checked ~ .progress > .progress-bar {
+ width: 50%;
+ background-color: #f2b01e;
+}
+
+#seventyfive:checked ~ .progress > .progress-bar {
+ width: 75%;
+ background-color: #f2d31b;
+}
+
+#onehundred:checked ~ .progress > .progress-bar {
+ width: 100%;
+ background-color: #86e01e;
+}
+
+.radio { display: none; }
+
+.label {
+ display: inline-block;
+ margin: 0 5px 20px;
+ padding: 3px 8px;
+ color: #aaa;
+ text-shadow: 0 1px #000;
+ cursor: pointer;
+ border-radius: 3px;
+
+ .radio:checked + & {
+ color: #fff;
+ background: rgba(0, 0, 0, .25);
+ }
+}
+
+/* ========================================================
+ About
+ ===================================================== */
+
+.about {
+ margin: 100px auto 80px;
+ padding: 15px 20px;
+ width: 300px;
+ text-align: center;
+ color: #aaa;
+ text-shadow: 0 -1px rgba(0, 0, 0, .2);
+ background: rgba(0, 0, 0, .1);
+ border-radius: 3px;
+
+ a {
+ padding: 1px 3px;
+ margin: 0 -1px;
+ color: #fafafa;
+ text-decoration: none;
+ border-radius: 2px;
+
+ &:hover {
+ color: #111;
+ text-shadow: none;
+ background: #fafafa;
+ }
+ }
+}
+
+.links {
+ @include clearfix;
+
+ a {
+ padding: 6px 0;
+ float: left;
+ width: 50%;
+ font-size: 14px;
+ }
+}
+
+.author {
+ margin-top: 15px;
+ font-size: 11px;
+}
Please sign in to comment.
Something went wrong with that request. Please try again.