Permalink
Browse files

New snippet: animated progress bar (22)

  • Loading branch information...
1 parent 79bc7e0 commit 33ae9506929c136698f2dd4e7d88397b458f9771 @Thibaut Thibaut committed Jun 6, 2012
@@ -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.
@@ -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)
@@ -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;
+}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -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>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.

0 comments on commit 33ae950

Please sign in to comment.