Permalink
Browse files

initial import

  • Loading branch information...
0 parents commit 7f4904212a0ed8dbbff2c26e4fb1bc64e4d732f2 @MSNexploder committed Apr 21, 2011
Showing with 708 additions and 0 deletions.
  1. +8 −0 .gitignore
  2. +3 −0 CHANGELOG.md
  3. +4 −0 Gemfile
  4. +19 −0 LICENSE
  5. +53 −0 README.md
  6. +7 −0 Rakefile
  7. +30 −0 example/basics.html
  8. +30 −0 example/colors.html
  9. +21 −0 example/config.rb
  10. +71 −0 example/javascripts/progress.js
  11. +45 −0 example/sass/_page-styles.scss
  12. +14 −0 example/sass/basics.scss
  13. +16 −0 example/sass/colors.scss
  14. +5 −0 example/sass/ie.scss
  15. +14 −0 example/sass/size.scss
  16. +14 −0 example/sass/styles.scss
  17. +30 −0 example/size.html
  18. +30 −0 example/styles.html
  19. +25 −0 fancy-progress-bars.gemspec
  20. +10 −0 lib/fancy-progress-bars.rb
  21. +22 −0 lib/fancy-progress-bars/stylesheets/_fancy-progress-bars.scss
  22. +18 −0 lib/fancy-progress-bars/stylesheets/fancy-progress-bars/_animated.scss
  23. +13 −0 lib/fancy-progress-bars/stylesheets/fancy-progress-bars/_background.scss
  24. +19 −0 lib/fancy-progress-bars/stylesheets/fancy-progress-bars/_common.scss
  25. +6 −0 lib/fancy-progress-bars/stylesheets/fancy-progress-bars/_defaults.scss
  26. +42 −0 lib/fancy-progress-bars/stylesheets/fancy-progress-bars/_glossy-gradient.scss
  27. +25 −0 lib/fancy-progress-bars/stylesheets/fancy-progress-bars/_label.scss
  28. +36 −0 lib/fancy-progress-bars/stylesheets/fancy-progress-bars/_matte-gradient.scss
  29. +26 −0 lib/fancy-progress-bars/stylesheets/fancy-progress-bars/_plain.scss
  30. +36 −0 lib/fancy-progress-bars/stylesheets/fancy-progress-bars/_stripes.scss
  31. +2 −0 lib/fancy-progress-bars/templates/project/manifest.rb
  32. +3 −0 lib/fancy-progress-bars/templates/project/screen.scss
  33. +11 −0 lib/fancy-progress-bars/version.rb
@@ -0,0 +1,8 @@
+src/.sass-cache
+example/stylesheets
+example/sass/.sass-cache
+*.gem
+.bundle
+.DS_Store
+Gemfile.lock
+pkg/*
@@ -0,0 +1,3 @@
+## 0.1.0 (unreleased)
+
+ * Initial release
@@ -0,0 +1,4 @@
+source "http://rubygems.org"
+
+# Specify your gem's dependencies in progress_bars.gemspec
+gemspec
@@ -0,0 +1,19 @@
+Copyright (C) 2011 by Stefan Huber
+
+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,53 @@
+## Install
+
+Install the plugin: (should automatically install latest dependencies for Compass, and Haml)
+ gem install fancy-progress-bars
+
+To create a new project based on fancy-progress-bars:
+
+ compass install -r fancy-progress-bars -f fancy-progress-bars
+
+To add fancy-progress-bars to an existing compass project:
+
+ # Add the following lines to your compass configuration file:
+ require 'fancy-progress-bars'
+
+ # Then run the following command:
+ compass install -r fancy-progress-bars -f fancy-progress-bars
+
+## Basic usage
+
+In order to work correctly fancy-progress-bars assume the following html (the class name is - of course - arbitrary):
+
+ <div class="progress">
+ <div><span></span></div>
+ </div>
+
+fancy-progress-bars are added by simply including the progress-bar mixin:
+
+ @import "fancy-progress-bars";
+
+ .progress {
+ @include progress-bar;
+ }
+
+Various options are available (check [examples](https://github.com/MSNexploder/fancy-progress-bars/tree/master/example) for more details).
+
+## Note on Patches/Pull Requests
+
+* Fork the project.
+* Make your feature addition or bug fix.
+* Commit, do not mess with rakefile, gemspec, version, or history. (if you want to have your own version, that is fine but bump version in a commit by itself I can ignore when I pull)
+* Send me a pull request. Bonus points for topic branches.
+
+## License
+
+(The MIT License)
+
+Copyright © 2011 Stefan Huber
+
+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,7 @@
+# -*- encoding: utf-8 -*-
+begin
+ require 'bundler'
+ Bundler::GemHelper.install_tasks
+rescue LoadError
+ $stderr.puts "Bundler not installed. You should install it with: [sudo] gem install bundler"
+end
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+ <title>Fancy Progress Bars - Basics Demo</title>
+ <link href="stylesheets/basics.css" media="screen, projection" rel="stylesheet" type="text/css" />
+ <!--[if IE]>
+ <link href="stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
+ <![endif]-->
+</head>
+ <body>
+ <h1>Fancy Progress Bars</h1>
+ <div class="base">
+ <div class="basics">
+ <div><span></span></div>
+ </div>
+
+ <div class="striped">
+ <div><span></span></div>
+ </div>
+
+ <div class="animated">
+ <div><span></span></div>
+ </div>
+ </div>
+
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" charset="utf-8"></script>
+ <script src="javascripts/progress.js" charset="utf-8"></script>
+ </body>
+</html>
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+ <title>Fancy Progress Bars - Basics Demo</title>
+ <link href="stylesheets/colors.css" media="screen, projection" rel="stylesheet" type="text/css" />
+ <!--[if IE]>
+ <link href="stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
+ <![endif]-->
+</head>
+ <body>
+ <h1>Fancy Progress Bars</h1>
+ <div class="base">
+ <div class="bluish">
+ <div><span></span></div>
+ </div>
+
+ <div class="background">
+ <div><span></span></div>
+ </div>
+
+ <div class="stripes">
+ <div><span></span></div>
+ </div>
+ </div>
+
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" charset="utf-8"></script>
+ <script src="javascripts/progress.js" charset="utf-8"></script>
+ </body>
+</html>
@@ -0,0 +1,21 @@
+# -*- encoding: utf-8 -*-
+# Require any additional compass plugins here.
+require 'fancy-progress-bars'
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "stylesheets"
+sass_dir = "sass"
+images_dir = "images"
+javascripts_dir = "javascripts"
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+# To enable relative paths to assets via compass helper functions. Uncomment:
+relative_assets = true
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
@@ -0,0 +1,71 @@
+// Copyright (c) 2010 Ivan Vanderbyl
+// Originally found at http://ivan.ly/ui
+//
+// 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.
+
+// slightly modified for fancy-progress-bars examples by Stefan Huber
+
+(function($) {
+ // Simple wrapper around jQuery animate to simplify animating progress from your app
+ // Inputs: Progress as a percent, Callback
+ // TODO: Add options and jQuery UI support.
+ $.fn.animateProgress = function(progress, callback) {
+ return this.each(function() {
+ $(this).animate({
+ width: progress+'%'
+ }, {
+ duration: 2000,
+
+ // swing or linear
+ easing: 'swing',
+
+ // this gets called every step of the animation, and updates the label
+ step: function(progress) {
+ var labelEl = $('> span', this);
+
+ if (Math.ceil(progress) == 100) {
+ labelEl.text('Done');
+ } else {
+ labelEl.text('processing... ' + Math.ceil(progress) + '%');
+ }
+ },
+ complete: function(scope, i, elem) {
+ if (callback) {
+ callback.call(this, i, elem);
+ }
+ }
+ });
+ });
+ };
+})(jQuery);
+
+$(function() {
+ // Set initial value
+ $('.base > div > div').css('width', '7%');
+
+ // Simulate some progress
+ $('.base > div > div').animateProgress(43, function() {
+ $(this).animateProgress(79, function() {
+ setTimeout(function() {
+ $('.base > div > div').animateProgress(100, function() {
+ });
+ }, 2000);
+ });
+ });
+});
@@ -0,0 +1,45 @@
+@import "compass";
+@include global-reset;
+@include reset-html5;
+
+html {
+ @include background-image(linear-gradient(#ddd, darken(#ddd, 20)));
+ background-color: #ddd;
+ height: 100%;
+}
+
+body {
+ background: none;
+ text-align: center;
+ padding-top: 10px;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ color: #fff;
+}
+
+#{headings()} {
+ @include text-shadow(rgba(#000, 0.3) 1px 1px 4px);
+ letter-spacing: -1px;
+ margin: 0.4em 0 0.8em;
+ font-weight: bold;
+}
+
+h1 {
+ font-size: 50px;
+}
+h2 {
+ font-size: 30px;
+}
+
+div.base {
+ @include box-shadow(rgba(#000, 0.4) 0 0 1px 1px inset);
+ @include border-radius(10px);
+ @include background-clip(padding-box);
+ background: #eee;
+ width: 810px;
+ margin: 0 auto;
+ padding: 40px 20px;
+
+ & > div {
+ margin: 1em 0;
+ }
+}
@@ -0,0 +1,14 @@
+@import "page-styles";
+@import "fancy-progress-bars";
+
+.basics {
+ @include progress-bar;
+}
+
+.striped {
+ @include progress-bar-striped;
+}
+
+.animated {
+ @include progress-bar-animated;
+}
@@ -0,0 +1,16 @@
+@import "page-styles";
+@import "fancy-progress-bars";
+
+.bluish {
+ @include progress-bar-plain-animated($default-progress-bar-height, #87cefa);
+}
+
+.background {
+ @include progress-bar-plain-animated;
+ @include progress-bar-background($default-progress-bar-height, #87cefa);
+}
+
+.stripes {
+ @include progress-bar-plain-animated;
+ @include progress-bar-stripes(#87cefa);
+}
@@ -0,0 +1,5 @@
+/* Welcome to Compass. Use this file to write IE specific override styles.
+ * Import this file using the following HTML or equivalent:
+ * <!--[if IE]>
+ * <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
+ * <![endif]--> */
@@ -0,0 +1,14 @@
+@import "page-styles";
+@import "fancy-progress-bars";
+
+.smallish {
+ @include progress-bar(10px);
+}
+
+.big {
+ @include progress-bar(30px);
+}
+
+.huge {
+ @include progress-bar(60px);
+}
@@ -0,0 +1,14 @@
+@import "page-styles";
+@import "fancy-progress-bars";
+
+.plain {
+ @include progress-bar-plain-striped;
+}
+
+.glossy {
+ @include progress-bar-glossy-striped;
+}
+
+.matte {
+ @include progress-bar-matte-striped;
+}
Oops, something went wrong.

0 comments on commit 7f49042

Please sign in to comment.