loading_screen 0.2.0 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: a32c306ec19b16373d852dde3a0855ec4b8ae044
-  data.tar.gz: eb8c2b1160b2ff97146020593752244ec39d9150
+  metadata.gz: 20eb3c1d766e90b00d5320038153803678a36b25
+  data.tar.gz: cd4ca7605bb2ece39dd6407ab699b267e866980f
 SHA512:
-  metadata.gz: 05a08482e0cd0a4dd4abdb04594f45d2acb639bb588cd6349e430e92b801cb30b072d9c258fc53c8899b247a59116f291cb324fce647d0f4557bee0956f743a1
-  data.tar.gz: a0379f6b0c4e6e5b220e77f2450fad95e971fd856f24ca4a0873243bd23e2780e853050733f8386e2a3e53858522998a29ec8c125e709d97a697d6849daae1c5
+  metadata.gz: cfef88009cbedb2b5d605da20fee4291e8b924b021f8675d501d8ccc8697ae75115ba6995d5b2d59f5639b01efc0bb5dacae17ed9411e325a579611e2755890a
+  data.tar.gz: 6d5424d63a3ea6045220de2b1f6f95ad9b4b78e601c6e114c9e406cbc56f88e9a3becb6b3efcff764d8870820c40117e0589e834abb88ec6df13ca1027dae3ed

data/README.md

@@ -44,13 +44,25 @@ We are all set, to use it with default `rotating_square` animation in any view f
 There are also other loading animation available for you to choose from, like:
 
 ```
-<%= loading_screen style: :double_bounce %> 
+<%= loading_screen style: :double_bounce %>
 ```
+
+```
+<%= loading_screen style: :rectangle_bounce %>
+```
+
 Other animations will be available shortly...
 
+You can change the color of the animation and also the background of the loader just add:
+
+```
+<%= loading_screen style: :double_bounce, color: 'red', background: 'green' %>
+```
+Color format like `hash`, `rgb`, `rgba`, etc css color format are acceptable
+
 ### Using custom gif images
 
-if you want to add custom gif as the loading screen just download a gif and put it inside the `assets/images/` and add: 
+if you want to add custom gif as the loading screen just download a gif and put it inside the `assets/images/` and add:
 ```
 <%= loading_screen gif: 'your gif file name witout ".gif" ' %>
 ```

data/app/helpers/loading_screen/loading_screen_helper.rb

@@ -1,9 +1,9 @@
 module LoadingScreen::LoadingScreenHelper
 
   def loading_screen(options={})
-    options[:style] = :default unless options[:style].present?
-
-    content_tag :div, '', class: 'loading_screen-spinner' do
+    options[:style] = :default unless options[:style]
+    options[:background] = "background-color: " + options[:background] if options[:background]
+    content_tag :div, '', class: 'loading_screen-spinner', style: options[:background] do
       if options[:gif].present?
         gif_handler options
       else
@@ -23,25 +23,38 @@ module LoadingScreen::LoadingScreenHelper
   end
 
   def css_handler(options)
+    options[:color] = "background-color: " + options[:color] if options[:color]
     content_tag :div, '', class: 'loading_screen-css' do
       if options[:style] == :double_bounce
-        load_double_bounce
+        load_double_bounce options[:color]
+      elsif options[:style] == :rectangle_bounce
+        load_rectangle_bounce options[:color]
       elsif options[:style] == :default
-        load_rotate_square
+        load_rotate_square options[:color]
       else
         raise LoadingScreen::InvalidOptionError.new "Wrong style name: '#{options[:style]}'"
       end
     end
   end
 
-  def load_double_bounce
+  def load_double_bounce(color)
     [].tap do |array|
-      array << content_tag(:div, '', id: 'loading_screen-double_bounce1')
-      array << content_tag(:div, '', id: 'loading_screen-double_bounce2')
+      array << content_tag(:div, '', id: 'loading_screen-double-bounce1', style: color )
+      array << content_tag(:div, '', id: 'loading_screen-double-bounce2' , style: color )
     end.join.html_safe
   end
 
-  def load_rotate_square
-    content_tag :div, '', id: 'loading_screen-rotating-square'
+  def load_rotate_square(color)
+    content_tag :div, '', id: 'loading_screen-rotating-square' , style: color
+  end
+
+  def load_rectangle_bounce(color)
+    [].tap do |array|
+      array << content_tag(:div, '', id: 'loading_screen-rect1', style: color)
+      array << content_tag(:div, '', id: 'loading_screen-rect2', style: color)
+      array << content_tag(:div, '', id: 'loading_screen-rect3', style: color)
+      array << content_tag(:div, '', id: 'loading_screen-rect4', style: color)
+      array << content_tag(:div, '', id: 'loading_screen-rect5', style: color)
+    end.join.html_safe
   end
 end

data/loading_screen.gemspec

@@ -4,7 +4,7 @@ require "loading_screen/version"
 
 Gem::Specification.new do |spec|
   spec.name          = "loading_screen"
-  spec.version       = '0.2.0'
+  spec.version       = '0.2.1'
   spec.authors       = ["Mujadded Al Rabbani Alif", "Yearsin Ar Rahman", "Swakhar Dey"]
   spec.email         = ["Mujadded.alif@gmail.com"]
 

data/vendor/assets/stylesheets/{loading_screen-double_bounce.css → loading_screen-double-bounce.css}

@@ -1,4 +1,4 @@
-#loading_screen-double_bounce1, #loading_screen-double_bounce2 {
+#loading_screen-double-bounce1, #loading_screen-double-bounce2 {
     width: 100%;
     height: 100%;
     border-radius: 50%;
@@ -9,7 +9,7 @@
     animation: sk-bounce 2.0s infinite ease-in-out;
 }
 
-#loading_screen-double_bounce2 {
+#loading_screen-double-bounce2 {
     -webkit-animation-delay: -1.0s;
     animation-delay: -1.0s;
 }

data/vendor/assets/stylesheets/loading_screen-rectangle-bounce.css

@@ -0,0 +1,44 @@
+.loading_screen-css > div {
+  background-color: orange;
+  height: 90%;
+  width: 6px;
+  display: inline-block;
+  margin-left: 2px;
+  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
+  animation: sk-stretchdelay 1.2s infinite ease-in-out;
+}
+
+.loading_screen-css #loading_screen-rect2 {
+  -webkit-animation-delay: -1.1s;
+  animation-delay: -1.1s;
+}
+
+.loading_screen-css #loading_screen-rect3 {
+  -webkit-animation-delay: -1.0s;
+  animation-delay: -1.0s;
+}
+
+.loading_screen-css #loading_screen-rect4 {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+
+.loading_screen-css #loading_screen-rect5 {
+  -webkit-animation-delay: -0.8s;
+  animation-delay: -0.8s;
+}
+
+@-webkit-keyframes sk-stretchdelay {
+  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
+  20% { -webkit-transform: scaleY(1.0) }
+}
+
+@keyframes sk-stretchdelay {
+  0%, 40%, 100% {
+    transform: scaleY(0.4);
+    -webkit-transform: scaleY(0.4);
+  }  20% {
+    transform: scaleY(1.0);
+    -webkit-transform: scaleY(1.0);
+  }
+}

data/vendor/assets/stylesheets/loading_screen.css

@@ -1,5 +1,6 @@
 @import url("loading_screen-default.css");
-@import url("loading_screen-double_bounce.css");
+@import url("loading_screen-double-bounce.css");
+@import url("loading_screen-rectangle-bounce.css");
 
 .loading_screen-spinner {
     position: fixed;
@@ -21,4 +22,4 @@
 .loading_screen-css {
     height:90px;
     width: 90px;
-}
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: loading_screen
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.2.1
 platform: ruby
 authors:
 - Mujadded Al Rabbani Alif
@@ -10,7 +10,7 @@ authors:
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2018-01-28 00:00:00.000000000 Z
+date: 2018-02-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -100,7 +100,8 @@ files:
 - vendor/assets/images/.keep
 - vendor/assets/javascripts/loading_screen.js
 - vendor/assets/stylesheets/loading_screen-default.css
-- vendor/assets/stylesheets/loading_screen-double_bounce.css
+- vendor/assets/stylesheets/loading_screen-double-bounce.css
+- vendor/assets/stylesheets/loading_screen-rectangle-bounce.css
 - vendor/assets/stylesheets/loading_screen.css
 homepage: https://github.com/Mujadded/loading_screen
 licenses: