move.gl 0.0.1 → 0.0.2

package/dist/scss/mixins/loaders/_progress.scss

@@ -0,0 +1,477 @@
+// ============================================================================
+// move.gl | Progress Loader Mixins
+// ============================================================================
+// Copyright 2025 Scape Agency BV
+// Licensed under MIT License
+// ============================================================================
+
+////
+/// Progress Loader Mixins
+/// ===========================================================================
+///
+/// This module provides mixins for progress bar loading animations.
+///
+/// @group Loaders
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0
+/// @access public
+////
+
+@use "../../variables" as *;
+
+
+// ============================================================================
+// Keyframes
+// ============================================================================
+
+///
+/// Progress fill animation keyframes.
+///
+@mixin keyframes_progress_fill {
+    @keyframes progress-fill {
+        0% { width: 0%; }
+        100% { width: 100%; }
+    }
+}
+
+///
+/// Progress indeterminate animation keyframes.
+///
+@mixin keyframes_progress_indeterminate {
+    @keyframes progress-indeterminate {
+        0% { left: 0; right: 100%; }
+        50% { left: 25%; right: 0; }
+        100% { left: 100%; right: 0; }
+    }
+}
+
+///
+/// Progress stripe animation keyframes.
+///
+@mixin keyframes_progress_stripe {
+    @keyframes progress-stripe {
+        0% { background-position: 0 0; }
+        100% { background-position: 30px 0; }
+    }
+}
+
+///
+/// Progress pulse animation keyframes.
+///
+@mixin keyframes_progress_pulse {
+    @keyframes progress-pulse {
+        0% { transform: scaleX(0.1); transform-origin: left; }
+        50% { transform: scaleX(1); transform-origin: left; }
+        51% { transform: scaleX(1); transform-origin: right; }
+        100% { transform: scaleX(0.1); transform-origin: right; }
+    }
+}
+
+///
+/// Progress split animation keyframes.
+///
+@mixin keyframes_progress_split {
+    @keyframes progress-split {
+        0% { width: 0; left: 50%; }
+        50% { width: 100%; left: 0%; }
+        100% { width: 0; left: 50%; }
+    }
+}
+
+///
+/// Progress flow animation keyframes.
+///
+@mixin keyframes_progress_flow {
+    @keyframes progress-flow {
+        0% { background-position: -200% 0, 0 0, 0 0, 0 0; }
+        100% { background-position: 200% 0, 0 0, 0 0, 0 0; }
+    }
+}
+
+///
+/// Circle progress rotation.
+///
+@mixin keyframes_circle_progress {
+    @keyframes circle-progress {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+}
+
+///
+/// Dot active state animation.
+///
+@mixin keyframes_dot_active {
+    @keyframes dot-active {
+        0%, 100% { background: var(--loader-inactive, rgba(255, 255, 255, 0.3)); }
+        50% { background: var(--loader-color, #FFF); }
+    }
+}
+
+///
+/// Segment fill animation keyframes.
+///
+@mixin keyframes_segment_fill {
+    @keyframes segment-fill {
+        0%, 20% { background: var(--loader-inactive, rgba(255, 255, 255, 0.15)); }
+        40%, 100% { background: var(--loader-color, #FFF); }
+    }
+}
+
+
+// ============================================================================
+// Progress Loader Mixins
+// ============================================================================
+
+///
+/// Basic progress bar loader.
+///
+/// @param {Length} $width [240px] - Bar width.
+/// @param {Length} $height [5px] - Bar height.
+/// @param {Color} $bg-color [rgba(255,255,255,0.15)] - Background color.
+/// @param {Color} $fill-color [#FF3D00] - Fill color.
+/// @param {Time} $duration [2s] - Animation duration.
+///
+@mixin loader_progress_fill(
+    $width: 240px,
+    $height: 5px,
+    $bg-color: rgba(255, 255, 255, 0.15),
+    $fill-color: $loader-accent,
+    $duration: 2s
+) {
+    width: $width;
+    height: $height;
+    border-radius: calc($height / 2);
+    background: var(--loader-bg, $bg-color);
+    position: relative;
+    overflow: hidden;
+
+    &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 100%;
+        width: 0%;
+        border-radius: inherit;
+        background: var(--loader-color, $fill-color);
+        animation: progress-fill $duration ease infinite;
+    }
+}
+
+///
+/// Indeterminate progress loader.
+///
+/// @param {Length} $width [240px] - Bar width.
+/// @param {Length} $height [5px] - Bar height.
+/// @param {Color} $bg-color [rgba(255,255,255,0.15)] - Background color.
+/// @param {Color} $fill-color [#FFF] - Fill color.
+/// @param {Time} $duration [1.5s] - Animation duration.
+///
+@mixin loader_progress_indeterminate(
+    $width: 240px,
+    $height: 5px,
+    $bg-color: rgba(255, 255, 255, 0.15),
+    $fill-color: $loader-color,
+    $duration: 1.5s
+) {
+    width: $width;
+    height: $height;
+    border-radius: calc($height / 2);
+    background: var(--loader-bg, $bg-color);
+    position: relative;
+    overflow: hidden;
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        height: 100%;
+        border-radius: inherit;
+        background: var(--loader-color, $fill-color);
+        animation: progress-indeterminate $duration ease-in-out infinite;
+    }
+}
+
+///
+/// Striped progress loader.
+///
+/// @param {Length} $width [240px] - Bar width.
+/// @param {Length} $height [10px] - Bar height.
+/// @param {Color} $color [#FFF] - Stripe color.
+/// @param {Time} $duration [1s] - Animation duration.
+///
+@mixin loader_progress_stripe(
+    $width: 240px,
+    $height: 10px,
+    $color: $loader-color,
+    $duration: $loader-speed
+) {
+    width: $width;
+    height: $height;
+    border-radius: calc($height / 2);
+    background:
+        repeating-linear-gradient(
+            135deg,
+            var(--loader-color, $color) 0 10px,
+            var(--loader-accent, rgba($color, 0.5)) 10px 20px
+        ) 0 / 200%;
+    animation: progress-stripe $duration linear infinite;
+}
+
+///
+/// Fill with stripe animation.
+///
+/// @param {Length} $width [240px] - Bar width.
+/// @param {Length} $height [10px] - Bar height.
+/// @param {Color} $bg-color [rgba(255,255,255,0.15)] - Background color.
+/// @param {Color} $fill-color [#FFF] - Fill color.
+/// @param {Time} $fill-duration [3s] - Fill duration.
+/// @param {Time} $stripe-duration [0.5s] - Stripe animation duration.
+///
+@mixin loader_progress_stripe_fill(
+    $width: 240px,
+    $height: 10px,
+    $bg-color: rgba(255, 255, 255, 0.15),
+    $fill-color: $loader-color,
+    $fill-duration: 3s,
+    $stripe-duration: 0.5s
+) {
+    width: $width;
+    height: $height;
+    border-radius: calc($height / 2);
+    background: var(--loader-bg, $bg-color);
+    position: relative;
+    overflow: hidden;
+
+    &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 100%;
+        width: 0%;
+        border-radius: inherit;
+        background:
+            repeating-linear-gradient(
+                135deg,
+                var(--loader-color, $fill-color) 0 10px,
+                rgba($fill-color, 0.5) 10px 20px
+            );
+        background-size: 200% 100%;
+        animation:
+            progress-fill $fill-duration ease infinite,
+            progress-stripe $stripe-duration linear infinite;
+    }
+}
+
+///
+/// Pulsing progress loader.
+///
+/// @param {Length} $width [240px] - Bar width.
+/// @param {Length} $height [8px] - Bar height.
+/// @param {Color} $bg-color [rgba(255,255,255,0.15)] - Background color.
+/// @param {Color} $fill-color [#FFF] - Fill color.
+/// @param {Time} $duration [1s] - Animation duration.
+///
+@mixin loader_progress_pulse(
+    $width: 240px,
+    $height: 8px,
+    $bg-color: rgba(255, 255, 255, 0.15),
+    $fill-color: $loader-color,
+    $duration: $loader-speed
+) {
+    width: $width;
+    height: $height;
+    border-radius: calc($height / 2);
+    background: var(--loader-bg, $bg-color);
+    position: relative;
+    overflow: hidden;
+
+    &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 100%;
+        width: 100%;
+        border-radius: inherit;
+        background: var(--loader-color, $fill-color);
+        animation: progress-pulse $duration ease-in-out infinite;
+    }
+}
+
+///
+/// Split fill progress loader.
+///
+/// @param {Length} $width [240px] - Bar width.
+/// @param {Length} $height [5px] - Bar height.
+/// @param {Color} $bg-color [rgba(255,255,255,0.15)] - Background color.
+/// @param {Color} $fill-color [#FFF] - Fill color.
+/// @param {Time} $duration [1.5s] - Animation duration.
+///
+@mixin loader_progress_split(
+    $width: 240px,
+    $height: 5px,
+    $bg-color: rgba(255, 255, 255, 0.15),
+    $fill-color: $loader-color,
+    $duration: 1.5s
+) {
+    width: $width;
+    height: $height;
+    border-radius: calc($height / 2);
+    background: var(--loader-bg, $bg-color);
+    position: relative;
+    overflow: hidden;
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        height: 100%;
+        border-radius: inherit;
+        background: var(--loader-color, $fill-color);
+        animation: progress-split $duration ease-in-out infinite;
+    }
+}
+
+///
+/// Gradient flow progress loader.
+///
+/// @param {Length} $width [240px] - Bar width.
+/// @param {Length} $height [8px] - Bar height.
+/// @param {Color} $bg-color [rgba(255,255,255,0.15)] - Background color.
+/// @param {Color} $start-color [#FF3D00] - Gradient start.
+/// @param {Color} $end-color [#FFF] - Gradient end.
+/// @param {Time} $duration [1.5s] - Animation duration.
+///
+@mixin loader_progress_gradient(
+    $width: 240px,
+    $height: 8px,
+    $bg-color: rgba(255, 255, 255, 0.15),
+    $start-color: $loader-accent,
+    $end-color: $loader-color,
+    $duration: 1.5s
+) {
+    width: $width;
+    height: $height;
+    border-radius: calc($height / 2);
+    background:
+        linear-gradient(90deg, var(--loader-start, $start-color) 50%, var(--loader-end, $end-color) 0) calc(100% - var(--_p, 0%)) / 200%,
+        linear-gradient(var(--loader-bg, $bg-color) 0 0) 0% / var(--_p, 0%);
+    background-repeat: no-repeat;
+    animation: progress-flow $duration linear infinite;
+}
+
+///
+/// Dotted progress loader.
+///
+/// @param {Length} $width [240px] - Container width.
+/// @param {Length} $height [16px] - Dot size.
+/// @param {Color} $bg-color [rgba(255,255,255,0.3)] - Dot inactive color.
+/// @param {Color} $active-color [#FFF] - Dot active color.
+/// @param {Time} $duration [1s] - Animation duration.
+///
+@mixin loader_progress_dots(
+    $width: 240px,
+    $height: 16px,
+    $bg-color: rgba(255, 255, 255, 0.3),
+    $active-color: $loader-color,
+    $duration: $loader-speed
+) {
+    width: $width;
+    height: $height;
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    span {
+        width: $height;
+        height: $height;
+        border-radius: 50%;
+        background: var(--loader-inactive, $bg-color);
+        animation: dot-active $duration ease-in-out infinite;
+
+        @for $i from 1 through 10 {
+            &:nth-child(#{$i}) {
+                animation-delay: calc(($i - 1) * 0.1s);
+            }
+        }
+    }
+}
+
+///
+/// Segmented progress loader.
+///
+/// @param {Length} $width [200px] - Bar width.
+/// @param {Length} $height [20px] - Bar height.
+/// @param {Number} $segments [5] - Number of segments.
+/// @param {Color} $bg-color [rgba(255,255,255,0.15)] - Inactive color.
+/// @param {Color} $active-color [#FFF] - Active color.
+/// @param {Time} $duration [2s] - Animation duration.
+///
+@mixin loader_progress_segments(
+    $width: 200px,
+    $height: 20px,
+    $segments: 5,
+    $bg-color: rgba(255, 255, 255, 0.15),
+    $active-color: $loader-color,
+    $duration: 2s
+) {
+    width: $width;
+    height: $height;
+    display: flex;
+    gap: 4px;
+
+    span {
+        flex: 1;
+        height: 100%;
+        background: var(--loader-inactive, $bg-color);
+        border-radius: 2px;
+        animation: segment-fill $duration ease infinite;
+
+        @for $i from 1 through $segments {
+            &:nth-child(#{$i}) {
+                animation-delay: calc(($i - 1) * ($duration / $segments));
+            }
+        }
+    }
+}
+
+///
+/// Circular progress indicator.
+///
+/// @param {Length} $size [60px] - Circle size.
+/// @param {Length} $stroke [4px] - Stroke width.
+/// @param {Color} $bg-color [rgba(255,255,255,0.15)] - Track color.
+/// @param {Color} $fill-color [#FFF] - Progress color.
+/// @param {Time} $duration [1.5s] - Animation duration.
+///
+@mixin loader_progress_circle(
+    $size: 60px,
+    $stroke: 4px,
+    $bg-color: rgba(255, 255, 255, 0.15),
+    $fill-color: $loader-color,
+    $duration: 1.5s
+) {
+    width: $size;
+    height: $size;
+    border-radius: 50%;
+    border: $stroke solid var(--loader-bg, $bg-color);
+    position: relative;
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: calc(-1 * $stroke);
+        left: calc(-1 * $stroke);
+        width: $size;
+        height: $size;
+        border-radius: 50%;
+        border: $stroke solid transparent;
+        border-top-color: var(--loader-color, $fill-color);
+        animation: circle-progress $duration ease-in-out infinite;
+    }
+}