move.gl 0.0.1 → 0.0.2

package/dist/scss/mixins/loaders/_bubble.scss

@@ -0,0 +1,395 @@
+// ============================================================================
+// move.gl | Bubble Loader Mixins
+// ============================================================================
+// Copyright 2025 Scape Agency BV
+// Licensed under MIT License
+// ============================================================================
+
+////
+/// Bubble Loader Mixins
+/// ===========================================================================
+///
+/// This module provides mixins for bubble/ball-based loading animations.
+///
+/// @group Loaders
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0
+/// @access public
+////
+
+@use "../../variables" as *;
+
+
+// ============================================================================
+// Keyframes
+// ============================================================================
+
+///
+/// Scale bubble animation keyframes.
+///
+@mixin keyframes_bubble_scale {
+    @keyframes bubble-scale {
+        0%, 100% { transform: scale(0); }
+        50% { transform: scale(1); }
+    }
+}
+
+///
+/// Bubble fade animation keyframes.
+///
+@mixin keyframes_bubble_fade {
+    @keyframes bubble-fade {
+        0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em; }
+        40% { box-shadow: 0 2.5em 0 0; }
+    }
+}
+
+///
+/// Bubble flash animation keyframes.
+///
+@mixin keyframes_bubble_flash {
+    @keyframes bubble-flash {
+        0% {
+            background-color: rgba(255, 255, 255, 0.2);
+            box-shadow: 32px 0 rgba(255, 255, 255, 0.2), -32px 0 var(--loader-color, $loader-color);
+        }
+        50% {
+            background-color: var(--loader-color, $loader-color);
+            box-shadow: 32px 0 rgba(255, 255, 255, 0.2), -32px 0 rgba(255, 255, 255, 0.2);
+        }
+        100% {
+            background-color: rgba(255, 255, 255, 0.2);
+            box-shadow: 32px 0 var(--loader-color, $loader-color), -32px 0 rgba(255, 255, 255, 0.2);
+        }
+    }
+}
+
+///
+/// Bubble pulse keyframes.
+///
+@mixin keyframes_bubble_pulse {
+    @keyframes bubble-pulse {
+        33% {
+            background: var(--loader-color, $loader-color);
+            box-shadow: -24px 0 var(--loader-accent, $loader-accent), 24px 0 var(--loader-color, $loader-color);
+        }
+        66% {
+            background: var(--loader-accent, $loader-accent);
+            box-shadow: -24px 0 var(--loader-color, $loader-color), 24px 0 var(--loader-color, $loader-color);
+        }
+        100% {
+            background: var(--loader-color, $loader-color);
+            box-shadow: -24px 0 var(--loader-color, $loader-color), 24px 0 var(--loader-accent, $loader-accent);
+        }
+    }
+}
+
+///
+/// Bubble expand keyframes.
+///
+@mixin keyframes_bubble_expand {
+    @keyframes bubble-expand {
+        0% {
+            box-shadow: 0 0, 0 0;
+            color: rgba(255, 255, 255, 0.2);
+        }
+        100% {
+            box-shadow: -24px 0, 24px 0;
+            color: rgba(255, 255, 255, 0.8);
+        }
+    }
+}
+
+///
+/// Bubble collision keyframes.
+///
+@mixin keyframes_bubble_collision {
+    @keyframes bubble-collision-left {
+        0%, 100% { transform: translate(-15px); }
+        50% { transform: translate(15px); }
+    }
+    @keyframes bubble-collision-right {
+        0%, 100% { transform: translate(15px); }
+        50% { transform: translate(-15px); }
+    }
+}
+
+
+// ============================================================================
+// Bubble Loader Mixins
+// ============================================================================
+
+///
+/// Rotating bubbles loader.
+///
+/// @param {Length} $size [48px] - Loader size.
+/// @param {Color} $color [#FFF] - Primary color.
+/// @param {Color} $accent [#FF3D00] - Accent color.
+/// @param {Time} $duration [1s] - Animation duration.
+///
+@mixin loader_bubble_rotate(
+    $size: $loader-size,
+    $color: $loader-color,
+    $accent: $loader-accent,
+    $duration: $loader-speed
+) {
+    width: var(--loader-size, $size);
+    height: var(--loader-size, $size);
+    display: block;
+    position: relative;
+    box-sizing: border-box;
+    animation: rotation $duration linear infinite;
+
+    &::after,
+    &::before {
+        content: '';
+        box-sizing: border-box;
+        position: absolute;
+        width: calc(var(--loader-size, $size) / 2);
+        height: calc(var(--loader-size, $size) / 2);
+        top: 0;
+        background-color: var(--loader-color, $color);
+        border-radius: 50%;
+        animation: bubble-scale $duration infinite ease-in-out;
+    }
+
+    &::before {
+        top: auto;
+        bottom: 0;
+        background-color: var(--loader-accent, $accent);
+        animation-delay: calc($duration / 2);
+    }
+}
+
+///
+/// Three dots bounce loader.
+///
+/// @param {Length} $size [7px] - Base font size.
+/// @param {Color} $color [#FFF] - Dot color.
+/// @param {Time} $duration [1.8s] - Animation duration.
+///
+@mixin loader_bubble_dots_bounce(
+    $size: 7px,
+    $color: $loader-color,
+    $duration: 1.8s
+) {
+    &, &::before, &::after {
+        border-radius: 50%;
+        width: 2.5em;
+        height: 2.5em;
+        animation-fill-mode: both;
+        animation: bubble-fade $duration infinite ease-in-out;
+    }
+
+    color: var(--loader-color, $color);
+    font-size: $size;
+    position: relative;
+    text-indent: -9999em;
+    transform: translateZ(0);
+    animation-delay: -0.16s;
+
+    &::before,
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+    }
+
+    &::before {
+        left: -3.5em;
+        animation-delay: -0.32s;
+    }
+
+    &::after {
+        left: 3.5em;
+    }
+}
+
+///
+/// Three dots flash loader.
+///
+/// @param {Length} $size [16px] - Dot size.
+/// @param {Color} $color [#FFF] - Dot color.
+/// @param {Time} $duration [0.5s] - Animation duration.
+///
+@mixin loader_bubble_dots_flash(
+    $size: 16px,
+    $color: $loader-color,
+    $duration: 0.5s
+) {
+    width: $size;
+    height: $size;
+    border-radius: 50%;
+    background-color: var(--loader-color, $color);
+    box-shadow: calc($size * 2) 0 var(--loader-color, $color), calc($size * -2) 0 var(--loader-color, $color);
+    position: relative;
+    animation: bubble-flash $duration ease-out infinite alternate;
+}
+
+///
+/// Three dots pulse loader.
+///
+/// @param {Length} $size [16px] - Dot size.
+/// @param {Color} $color [#FFF] - Primary color.
+/// @param {Color} $accent [#FF3D00] - Accent color.
+/// @param {Time} $duration [2s] - Animation duration.
+///
+@mixin loader_bubble_dots_pulse(
+    $size: 16px,
+    $color: $loader-color,
+    $accent: $loader-accent,
+    $duration: 2s
+) {
+    width: $size;
+    height: $size;
+    border-radius: 50%;
+    display: block;
+    position: relative;
+    background: var(--loader-accent, $accent);
+    color: var(--loader-color, $color);
+    box-shadow: -24px 0, 24px 0;
+    box-sizing: border-box;
+    animation: bubble-pulse $duration ease-in-out infinite;
+}
+
+///
+/// Three dots rotation loader.
+///
+/// @param {Length} $size [16px] - Dot size.
+/// @param {Color} $color [#FF3D00] - Primary color.
+/// @param {Color} $accent [#FFF] - Secondary color.
+/// @param {Time} $duration [2s] - Animation duration.
+///
+@mixin loader_bubble_dots_rotate(
+    $size: 16px,
+    $color: $loader-accent,
+    $accent: $loader-color,
+    $duration: 2s
+) {
+    width: $size;
+    height: $size;
+    border-radius: 50%;
+    display: block;
+    position: relative;
+    background: var(--loader-accent, $color);
+    color: var(--loader-color, $accent);
+    box-shadow: -24px 0, 24px 0;
+    box-sizing: border-box;
+    animation: rotation $duration ease-in-out infinite;
+}
+
+///
+/// Expanding shadow dots loader.
+///
+/// @param {Length} $size [16px] - Dot size.
+/// @param {Color} $color [#FFF] - Dot color.
+/// @param {Time} $duration [2s] - Animation duration.
+///
+@mixin loader_bubble_expand(
+    $size: 16px,
+    $color: $loader-color,
+    $duration: 2s
+) {
+    width: $size;
+    height: $size;
+    border-radius: 50%;
+    display: block;
+    position: relative;
+    background: var(--loader-color, $color);
+    box-sizing: border-box;
+    animation: bubble-expand $duration linear infinite alternate;
+}
+
+///
+/// Colliding dots loader.
+///
+/// @param {Length} $size [15px] - Dot size.
+/// @param {Color} $color [#FFF] - Primary color.
+/// @param {Color} $accent [#FF3D00] - Accent color.
+/// @param {Time} $duration [1s] - Animation duration.
+///
+@mixin loader_bubble_collision(
+    $size: 15px,
+    $color: $loader-color,
+    $accent: $loader-accent,
+    $duration: 1s
+) {
+    position: relative;
+
+    &::before,
+    &::after {
+        content: '';
+        width: $size;
+        height: $size;
+        display: block;
+        position: relative;
+        margin: 10px auto;
+        border-radius: 50%;
+        background: var(--loader-color, $color);
+        animation: bubble-collision-left $duration infinite ease-in-out;
+    }
+
+    &::after {
+        background: var(--loader-accent, $accent);
+        animation: bubble-collision-right $duration infinite ease-in-out;
+    }
+}
+
+///
+/// Two balls flip loader.
+///
+/// @param {Length} $size [48px] - Loader size.
+/// @param {Color} $color [#FFF] - Primary color.
+/// @param {Color} $accent [#FF3D00] - Accent color.
+/// @param {Time} $duration [1s] - Animation duration.
+///
+@mixin loader_bubble_flip(
+    $size: $loader-size,
+    $color: $loader-color,
+    $accent: $loader-accent,
+    $duration: 1s
+) {
+    box-sizing: border-box;
+    position: relative;
+    width: var(--loader-size, $size);
+    height: var(--loader-size, $size);
+    animation: flip $duration linear infinite;
+
+    &::after,
+    &::before {
+        content: '';
+        width: calc(var(--loader-size, $size) / 2);
+        height: calc(var(--loader-size, $size) / 2);
+        position: absolute;
+        border-radius: 50%;
+        background: var(--loader-accent, $accent);
+        animation: rotation $duration linear infinite;
+        transform-origin: calc(var(--loader-size, $size) / 4) 100%;
+    }
+
+    &::before {
+        transform-origin: 0 50%;
+        background: var(--loader-color, $color);
+    }
+}
+
+///
+/// Rotation keyframes (shared).
+///
+@mixin keyframes_rotation {
+    @keyframes rotation {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+}
+
+///
+/// Flip keyframes.
+///
+@mixin keyframes_flip {
+    @keyframes flip {
+        0%, 50% { transform: rotateY(0deg); }
+        50%, 100% { transform: rotateY(180deg); }
+    }
+}