From d179bd49a7a553e533d7afefde908b2b055e357a Mon Sep 17 00:00:00 2001 From: prashrey Date: Sat, 5 Oct 2019 16:59:36 +0530 Subject: [PATCH 1/3] Added snippet for pulse-loader --- snippets/pulse-loader.md | 63 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 63 insertions(+) create mode 100644 snippets/pulse-loader.md diff --git a/snippets/pulse-loader.md b/snippets/pulse-loader.md new file mode 100644 index 000000000..be417eff1 --- /dev/null +++ b/snippets/pulse-loader.md @@ -0,0 +1,63 @@ +--- +title: Pulse loader +tags: animation +--- + +Creates a pulse effect loader animation using `animation-delay` property. + +```html +
+
+
+
+``` + +```css + .ripple-loader { + position: relative; + width: 64px; + height: 64px; + } + .ripple-loader div { + position: absolute; + border: 4px solid #76ff03; + border-radius: 50%; + animation: ripple-loader 1s ease-out infinite; + } + .ripple-loader div:nth-child(2) { + animation-delay: -0.5s; + } + @keyframes ripple-loader { + 0% { + top: 32px; + left: 32px; + width: 0; + height: 0; + opacity: 1; + } + 100% { + top: 0; + left: 0; + width: 64px; + height: 64px; + opacity: 0; + } + } +``` + + +#### Explanation + +Note: `1rem` is usually `16px`. + +1. `@keyframes` defines an animation at two points in the cycle, Start(0%), where the `div`s neither have width nor height and are positioned at the center & End(100%), where the `div`s have increased `height` & `width` but `position` is reset to 0. +2. The `div`s seem to disappear as they expand. This is achieved using `opacity` property, which transitions from 1 to 0 in the animation. +3. `.ripple-loader` is the parent container of the ripples and has a definite width and height. It uses `position: relative` to position child divs. +4. `.ripple > div`, targets the two child `div`s of the parent to be styled. The `div`s are given a border of `4px` & `border-radius: 50%` to turn them from squares to circles. +5. `animation` is a shorthand property for the various animation properties: `animation-name`, `animation-duration`, `animation-direction`, `animation-iteration-count` are used. +6. `nth-child(n)` targets the element which is the nth child of its parent. +7. `animation-delay` is used on the second `div`, so that each element does not start the animation at the same time. + +#### Browser support + +- https://caniuse.com/#feat=css-animation \ No newline at end of file From bf2656379e78c46cca2383656dc5096bbda8bfeb Mon Sep 17 00:00:00 2001 From: prashrey Date: Sat, 5 Oct 2019 18:00:24 +0530 Subject: [PATCH 2/3] indentation changes and added snippet expertise level --- snippets/pulse-loader.md | 67 ++++++++++++++++++++-------------------- 1 file changed, 33 insertions(+), 34 deletions(-) diff --git a/snippets/pulse-loader.md b/snippets/pulse-loader.md index be417eff1..a8d2c210e 100644 --- a/snippets/pulse-loader.md +++ b/snippets/pulse-loader.md @@ -1,51 +1,50 @@ --- title: Pulse loader -tags: animation +tags: animation, beginner --- Creates a pulse effect loader animation using `animation-delay` property. ```html
-
-
+
+
``` ```css - .ripple-loader { - position: relative; - width: 64px; - height: 64px; - } - .ripple-loader div { - position: absolute; - border: 4px solid #76ff03; - border-radius: 50%; - animation: ripple-loader 1s ease-out infinite; - } - .ripple-loader div:nth-child(2) { - animation-delay: -0.5s; - } - @keyframes ripple-loader { - 0% { - top: 32px; - left: 32px; - width: 0; - height: 0; - opacity: 1; - } - 100% { - top: 0; - left: 0; - width: 64px; - height: 64px; - opacity: 0; - } - } +.ripple-loader { + position: relative; + width: 64px; + height: 64px; +} +.ripple-loader div { + position: absolute; + border: 4px solid #76ff03; + border-radius: 50%; + animation: ripple-loader 1s ease-out infinite; +} +.ripple-loader div:nth-child(2) { + animation-delay: -0.5s; +} +@keyframes ripple-loader { + 0% { + top: 32px; + left: 32px; + width: 0; + height: 0; + opacity: 1; + } + 100% { + top: 0; + left: 0; + width: 64px; + height: 64px; + opacity: 0; + } +} ``` - #### Explanation Note: `1rem` is usually `16px`. From de696c348cc9e32779848922afa18da9b8cfd7f1 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Sun, 6 Oct 2019 07:26:13 +0300 Subject: [PATCH 3/3] Update pulse-loader.md --- snippets/pulse-loader.md | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/snippets/pulse-loader.md b/snippets/pulse-loader.md index a8d2c210e..b6aa9d084 100644 --- a/snippets/pulse-loader.md +++ b/snippets/pulse-loader.md @@ -1,9 +1,9 @@ --- title: Pulse loader -tags: animation, beginner +tags: animation,beginner --- -Creates a pulse effect loader animation using `animation-delay` property. +Creates a pulse effect loader animation using the `animation-delay` property. ```html
@@ -18,15 +18,18 @@ Creates a pulse effect loader animation using `animation-delay` property. width: 64px; height: 64px; } + .ripple-loader div { position: absolute; border: 4px solid #76ff03; border-radius: 50%; animation: ripple-loader 1s ease-out infinite; } + .ripple-loader div:nth-child(2) { animation-delay: -0.5s; } + @keyframes ripple-loader { 0% { top: 32px; @@ -47,16 +50,11 @@ Creates a pulse effect loader animation using `animation-delay` property. #### Explanation -Note: `1rem` is usually `16px`. - -1. `@keyframes` defines an animation at two points in the cycle, Start(0%), where the `div`s neither have width nor height and are positioned at the center & End(100%), where the `div`s have increased `height` & `width` but `position` is reset to 0. -2. The `div`s seem to disappear as they expand. This is achieved using `opacity` property, which transitions from 1 to 0 in the animation. -3. `.ripple-loader` is the parent container of the ripples and has a definite width and height. It uses `position: relative` to position child divs. -4. `.ripple > div`, targets the two child `div`s of the parent to be styled. The `div`s are given a border of `4px` & `border-radius: 50%` to turn them from squares to circles. -5. `animation` is a shorthand property for the various animation properties: `animation-name`, `animation-duration`, `animation-direction`, `animation-iteration-count` are used. -6. `nth-child(n)` targets the element which is the nth child of its parent. -7. `animation-delay` is used on the second `div`, so that each element does not start the animation at the same time. +- Use `@keyframes` to define an animation at two points in the cycle, start (`0%`), where the two `
` elements have no `width` or `height` and are positioned at the center and end (`100%`), where both `
` elements have increased `width` and `height`, but their `position` is reset to `0`. +- Use `opacity` to transition from `1` to `0` when animating to give the `
` elements a disappearing effect as they expand. +- `.ripple-loader`, which is the parent container, has a predefined `width` and `height`. It uses `position: relative` to position its children. +- Use `animation-delay` on the second `
` element, so that each element starts its animation at a different time. #### Browser support -- https://caniuse.com/#feat=css-animation \ No newline at end of file +- https://caniuse.com/#feat=css-animation