move.gl 0.0.1 → 0.0.2

package/dist/scss/mixins/loaders/_special.scss

@@ -0,0 +1,611 @@
+////
+///
+/// Special Loader Mixins
+/// ===========================================================================
+///
+/// This module provides special/unique loading animation mixins including
+/// morphing shapes, flip cards, folding squares, heartbeat, and more.
+///
+/// @group Loaders
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+///
+////
+
+
+@use "sass:color";
+
+// ============================================================================
+// Keyframes
+// ============================================================================
+
+/// Heartbeat animation keyframes
+@keyframes loader-heartbeat {
+    0%, 100% { transform: scale(1); }
+    14% { transform: scale(1.3); }
+    28% { transform: scale(1); }
+    42% { transform: scale(1.3); }
+    70% { transform: scale(1); }
+}
+
+/// Morph animation keyframes
+@keyframes loader-morph {
+    0%, 100% { border-radius: 0; transform: rotate(0deg); }
+    25% { border-radius: 50% 0 50% 0; transform: rotate(90deg); }
+    50% { border-radius: 50%; transform: rotate(180deg); }
+    75% { border-radius: 0 50% 0 50%; transform: rotate(270deg); }
+}
+
+/// Flip card animation keyframes
+@keyframes loader-flip-card {
+    0% { transform: rotateX(0) rotateY(0); }
+    25% { transform: rotateX(180deg) rotateY(0); }
+    50% { transform: rotateX(180deg) rotateY(180deg); }
+    75% { transform: rotateX(0) rotateY(180deg); }
+    100% { transform: rotateX(0) rotateY(360deg); }
+}
+
+/// Square rotate animation keyframes
+@keyframes loader-square-rotate {
+    0% { transform: rotate(0deg); }
+    25% { transform: rotate(90deg); }
+    50% { transform: rotate(180deg); }
+    75% { transform: rotate(270deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/// Cube flip animation keyframes
+@keyframes loader-cube-flip {
+    0% { transform: perspective(100px) rotateX(0) rotateY(0); }
+    50% { transform: perspective(100px) rotateX(180deg) rotateY(0); }
+    100% { transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
+}
+
+/// Folding animation keyframes
+@keyframes loader-folding {
+    0%, 10% { transform: scale(1); opacity: 1; }
+    20%, 100% { transform: scale(0); opacity: 0; }
+}
+
+/// Clock minute hand animation
+@keyframes loader-clock-minute {
+    0% { transform: translate(-50%, -100%) rotate(0deg); }
+    100% { transform: translate(-50%, -100%) rotate(360deg); }
+}
+
+/// Clock hour hand animation
+@keyframes loader-clock-hour {
+    0% { transform: translate(-50%, -100%) rotate(0deg); }
+    100% { transform: translate(-50%, -100%) rotate(360deg); }
+}
+
+/// Bounce loader animation
+@keyframes loader-bounce {
+    0% { transform: translateY(0); }
+    100% { transform: translateY(-20px); }
+}
+
+/// Windmill rotation (uses spin from rings)
+@keyframes loader-spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+/// Battery charge animation
+@keyframes loader-battery-charge {
+    0% { width: 0%; }
+    50% { width: calc(100% - 6px); }
+    100% { width: 0%; }
+}
+
+/// Pendulum left animation
+@keyframes loader-pendulum-left {
+    0% { transform: translateX(-15px) translateY(-10px); }
+    100% { transform: translateX(0) translateY(0); }
+}
+
+/// Pendulum right animation
+@keyframes loader-pendulum-right {
+    0% { transform: translateX(0) translateY(0); }
+    100% { transform: translateX(15px) translateY(-10px); }
+}
+
+/// Seesaw animation
+@keyframes loader-seesaw {
+    0%, 100% { transform: rotate(-15deg); }
+    50% { transform: rotate(15deg); }
+}
+
+/// Wifi pulse animation
+@keyframes loader-wifi-pulse {
+    0% { opacity: 0; }
+    30% { opacity: 1; }
+    60%, 100% { opacity: 0; }
+}
+
+/// DNA animation (top)
+@keyframes loader-dna-top {
+    0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
+    50% { transform: translateX(-50%) scale(0.5); opacity: 0.5; }
+}
+
+/// DNA animation (bottom)
+@keyframes loader-dna-bottom {
+    0%, 100% { transform: translateX(-50%) scale(0.5); opacity: 0.5; }
+    50% { transform: translateX(-50%) scale(1); opacity: 1; }
+}
+
+/// Infinity left animation
+@keyframes loader-infinity-left {
+    0%, 100% { transform: translateY(-50%) translateX(0); }
+    50% { transform: translateY(-50%) translateX(20px); }
+}
+
+/// Infinity right animation
+@keyframes loader-infinity-right {
+    0%, 100% { transform: translateY(-50%) translateX(0); }
+    50% { transform: translateY(-50%) translateX(-20px); }
+}
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+///
+/// Heartbeat loader mixin.
+/// Creates a pulsing heartbeat animation.
+///
+/// @param {Length} $size [40px] - Element size.
+/// @param {Color} $color [currentColor] - Color.
+/// @param {Time} $duration [1.2s] - Animation duration.
+///
+@mixin loader_heartbeat($size: 40px, $color: currentColor, $duration: 1.2s) {
+    width: $size;
+    height: $size;
+    background: $color;
+    border-radius: 50%;
+    animation: loader-heartbeat $duration ease-in-out infinite;
+}
+
+///
+/// Morph loader mixin.
+/// Creates a shape that morphs between square and circle.
+///
+/// @param {Length} $size [40px] - Element size.
+/// @param {Color} $color [currentColor] - Color.
+/// @param {Time} $duration [2s] - Animation duration.
+///
+@mixin loader_morph($size: 40px, $color: currentColor, $duration: 2s) {
+    width: $size;
+    height: $size;
+    background: $color;
+    animation: loader-morph $duration ease-in-out infinite;
+}
+
+///
+/// Flip card loader mixin.
+/// Creates a flipping card animation.
+///
+/// @param {Length} $size [40px] - Card size.
+/// @param {Color} $color [currentColor] - Card color.
+/// @param {Time} $duration [1.2s] - Animation duration.
+///
+@mixin loader_flip_card($size: 40px, $color: currentColor, $duration: 1.2s) {
+    width: $size;
+    height: $size;
+    perspective: 100px;
+
+    > * {
+        width: 100%;
+        height: 100%;
+        display: block;
+        background: $color;
+        animation: loader-flip-card $duration ease-in-out infinite;
+    }
+}
+
+///
+/// Square rotate loader mixin.
+/// Creates a rotating square animation.
+///
+/// @param {Length} $size [30px] - Square size.
+/// @param {Color} $color [currentColor] - Square color.
+/// @param {Time} $duration [1.2s] - Animation duration.
+///
+@mixin loader_square($size: 30px, $color: currentColor, $duration: 1.2s) {
+    width: $size;
+    height: $size;
+    background: $color;
+    animation: loader-square-rotate $duration ease-in-out infinite;
+}
+
+///
+/// Cube flip loader mixin.
+/// Creates a 3D cube flipping animation.
+///
+/// @param {Length} $size [30px] - Cube size.
+/// @param {Color} $color [currentColor] - Cube color.
+/// @param {Time} $duration [1.2s] - Animation duration.
+///
+@mixin loader_cube($size: 30px, $color: currentColor, $duration: 1.2s) {
+    width: $size;
+    height: $size;
+    background: $color;
+    animation: loader-cube-flip $duration ease-in-out infinite;
+    perspective: 100px;
+}
+
+///
+/// Folding squares loader mixin.
+/// Creates folding/collapsing squares animation.
+///
+/// @param {Length} $size [40px] - Container size.
+/// @param {Color} $color [currentColor] - Square color.
+/// @param {Time} $duration [2s] - Animation duration.
+///
+@mixin loader_folding($size: 40px, $color: currentColor, $duration: 2s) {
+    width: $size;
+    height: $size;
+    position: relative;
+
+    > * {
+        position: absolute;
+        width: ($size - 4px) * 0.5;
+        height: ($size - 4px) * 0.5;
+        background: $color;
+        animation: loader-folding $duration ease infinite;
+
+        &:nth-child(1) { top: 0; left: 0; animation-delay: 0s; }
+        &:nth-child(2) { top: 0; right: 0; animation-delay: 0.5s; }
+        &:nth-child(3) { bottom: 0; right: 0; animation-delay: 1s; }
+        &:nth-child(4) { bottom: 0; left: 0; animation-delay: 1.5s; }
+    }
+}
+
+///
+/// Clock loader mixin.
+/// Creates a clock with animated hands.
+///
+/// @param {Length} $size [40px] - Clock size.
+/// @param {Length} $border-width [3px] - Border width.
+/// @param {Color} $color [#333] - Hands color. Note: Cannot use currentColor as darken() requires a real color.
+/// @param {Color} $bg [rgba(0,0,0,0.1)] - Clock face background.
+///
+@mixin loader_clock($size: 40px, $border-width: 3px, $color: #333, $bg: rgba(0, 0, 0, 0.1)) {
+    width: $size;
+    height: $size;
+    border: $border-width solid $bg;
+    border-radius: 50%;
+    position: relative;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 2px;
+        height: 14px;
+        background: $color;
+        transform-origin: center bottom;
+        transform: translate(-50%, -100%) rotate(0deg);
+        animation: loader-clock-minute 2s linear infinite;
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 2px;
+        height: 10px;
+        background: color.adjust($color, $lightness: -20%);
+        transform-origin: center bottom;
+        transform: translate(-50%, -100%) rotate(0deg);
+        animation: loader-clock-hour 24s linear infinite;
+    }
+}
+
+///
+/// Bounce loader mixin.
+/// Creates bouncing dots animation.
+///
+/// @param {Length} $dot-size [12px] - Dot size.
+/// @param {Color} $color [currentColor] - Dot color.
+/// @param {Time} $duration [0.6s] - Animation duration.
+///
+@mixin loader_bounce($dot-size: 12px, $color: currentColor, $duration: 0.6s) {
+    display: flex;
+    gap: 8px;
+    align-items: flex-end;
+    height: 40px;
+
+    > * {
+        width: $dot-size;
+        height: $dot-size;
+        background: $color;
+        border-radius: 50%;
+        animation: loader-bounce $duration ease-in-out infinite alternate;
+
+        &:nth-child(2) { animation-delay: 0.2s; }
+        &:nth-child(3) { animation-delay: 0.4s; }
+    }
+}
+
+///
+/// Windmill loader mixin.
+/// Creates rotating windmill blades.
+///
+/// @param {Length} $size [40px] - Container size.
+/// @param {Length} $blade-width [4px] - Blade width.
+/// @param {Length} $blade-height [16px] - Blade height.
+/// @param {Color} $color [currentColor] - Blade color.
+/// @param {Time} $duration [1.5s] - Animation duration.
+///
+@mixin loader_windmill($size: 40px, $blade-width: 4px, $blade-height: 16px, $color: currentColor, $duration: 1.5s) {
+    width: $size;
+    height: $size;
+    position: relative;
+    animation: loader-spin $duration linear infinite;
+
+    > * {
+        position: absolute;
+        width: $blade-width;
+        height: $blade-height;
+        background: $color;
+        left: 50%;
+        top: 50%;
+        transform-origin: center bottom;
+
+        &:nth-child(1) { transform: translate(-50%, -100%) rotate(0deg); }
+        &:nth-child(2) { transform: translate(-50%, -100%) rotate(90deg); }
+        &:nth-child(3) { transform: translate(-50%, -100%) rotate(180deg); }
+        &:nth-child(4) { transform: translate(-50%, -100%) rotate(270deg); }
+    }
+}
+
+///
+/// Gear loader mixin.
+/// Creates a rotating gear animation.
+///
+/// @param {Length} $size [40px] - Gear size.
+/// @param {Length} $border-width [4px] - Border width.
+/// @param {Color} $color [currentColor] - Gear color.
+/// @param {Time} $duration [2s] - Animation duration.
+///
+@mixin loader_gear($size: 40px, $border-width: 4px, $color: currentColor, $duration: 2s) {
+    width: $size;
+    height: $size;
+    border: $border-width solid $color;
+    border-radius: 50%;
+    position: relative;
+    animation: loader-spin $duration linear infinite;
+
+    &::before {
+        content: '';
+        position: absolute;
+        background: $color;
+        width: 6px;
+        height: 12px;
+        top: -8px;
+        left: 50%;
+        transform: translateX(-50%);
+        box-shadow:
+            0 48px 0 $color,
+            -17px -9px 0 $color,
+            17px -9px 0 $color,
+            -17px 41px 0 $color,
+            17px 41px 0 $color;
+    }
+}
+
+///
+/// Battery loader mixin.
+/// Creates a charging battery animation.
+///
+/// @param {Length} $width [50px] - Battery width.
+/// @param {Length} $height [24px] - Battery height.
+/// @param {Color} $color [currentColor] - Fill color.
+/// @param {Color} $bg [rgba(0,0,0,0.1)] - Border color.
+/// @param {Time} $duration [2s] - Animation duration.
+///
+@mixin loader_battery($width: 50px, $height: 24px, $color: currentColor, $bg: rgba(0, 0, 0, 0.1), $duration: 2s) {
+    width: $width;
+    height: $height;
+    border: 3px solid $bg;
+    border-radius: 4px;
+    position: relative;
+
+    &::before {
+        content: '';
+        position: absolute;
+        right: -6px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 4px;
+        height: 10px;
+        background: $bg;
+        border-radius: 0 2px 2px 0;
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        left: 3px;
+        top: 3px;
+        bottom: 3px;
+        width: 0%;
+        background: $color;
+        border-radius: 2px;
+        animation: loader-battery-charge $duration ease-in-out infinite;
+    }
+}
+
+///
+/// Wifi loader mixin.
+/// Creates wifi signal animation.
+///
+/// @param {Length} $width [40px] - Container width.
+/// @param {Length} $height [30px] - Container height.
+/// @param {Color} $color [currentColor] - Signal color.
+/// @param {Time} $duration [1.5s] - Animation duration.
+///
+@mixin loader_wifi($width: 40px, $height: 30px, $color: currentColor, $duration: 1.5s) {
+    width: $width;
+    height: $height;
+    position: relative;
+
+    > * {
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        border: 3px solid transparent;
+        border-top-color: $color;
+        border-radius: 50%;
+        transform: translateX(-50%);
+        opacity: 0;
+        animation: loader-wifi-pulse $duration ease-out infinite;
+
+        &:nth-child(1) { width: 10px; height: 10px; animation-delay: 0s; }
+        &:nth-child(2) { width: 22px; height: 22px; animation-delay: 0.3s; }
+        &:nth-child(3) { width: 34px; height: 34px; animation-delay: 0.6s; }
+    }
+}
+
+///
+/// DNA helix loader mixin.
+/// Creates a DNA helix animation.
+///
+/// @param {Length} $size [40px] - Container size.
+/// @param {Length} $dot-size [8px] - Dot size.
+/// @param {Color} $color [currentColor] - Dot color.
+/// @param {Time} $duration [1s] - Animation duration.
+///
+@mixin loader_dna($size: 40px, $dot-size: 8px, $color: currentColor, $duration: 1s) {
+    width: $size;
+    height: $size;
+    position: relative;
+
+    > * {
+        position: absolute;
+        width: $dot-size;
+        height: $dot-size;
+        background: $color;
+        border-radius: 50%;
+        left: 50%;
+        transform: translateX(-50%);
+
+        &:nth-child(1) { top: 0; animation: loader-dna-top $duration ease-in-out infinite; }
+        &:nth-child(2) { bottom: 0; animation: loader-dna-bottom $duration ease-in-out infinite; }
+    }
+}
+
+///
+/// Infinity loader mixin.
+/// Creates an infinity symbol animation.
+///
+/// @param {Length} $width [60px] - Container width.
+/// @param {Length} $height [30px] - Container height.
+/// @param {Length} $circle-size [20px] - Circle size.
+/// @param {Color} $color [currentColor] - Circle color.
+/// @param {Time} $duration [1.5s] - Animation duration.
+///
+@mixin loader_infinity($width: 60px, $height: 30px, $circle-size: 20px, $color: currentColor, $duration: 1.5s) {
+    width: $width;
+    height: $height;
+    position: relative;
+
+    &::before,
+    &::after {
+        content: '';
+        position: absolute;
+        width: $circle-size;
+        height: $circle-size;
+        border: 3px solid $color;
+        border-radius: 50%;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+
+    &::before {
+        left: 0;
+        animation: loader-infinity-left $duration ease-in-out infinite;
+    }
+
+    &::after {
+        right: 0;
+        animation: loader-infinity-right $duration ease-in-out infinite;
+    }
+}
+
+///
+/// Pendulum loader mixin.
+/// Creates a Newton's cradle pendulum animation.
+///
+/// @param {Length} $width [50px] - Container width.
+/// @param {Length} $height [40px] - Container height.
+/// @param {Length} $ball-size [10px] - Ball size.
+/// @param {Color} $color [currentColor] - Ball color.
+/// @param {Time} $duration [0.6s] - Animation duration.
+///
+@mixin loader_pendulum($width: 50px, $height: 40px, $ball-size: 10px, $color: currentColor, $duration: 0.6s) {
+    width: $width;
+    height: $height;
+    position: relative;
+
+    > * {
+        position: absolute;
+        bottom: 0;
+        width: $ball-size;
+        height: $ball-size;
+        background: $color;
+        border-radius: 50%;
+
+        &:nth-child(1) { left: 0; animation: loader-pendulum-left $duration ease-in-out infinite alternate; }
+        &:nth-child(2) { left: 13px; }
+        &:nth-child(3) { left: 26px; }
+        &:nth-child(4) { right: 0; animation: loader-pendulum-right $duration ease-in-out infinite alternate; }
+    }
+}
+
+///
+/// Seesaw loader mixin.
+/// Creates a seesaw/balance animation.
+///
+/// @param {Length} $width [50px] - Container width.
+/// @param {Length} $height [20px] - Container height.
+/// @param {Color} $color [currentColor] - Bar color.
+/// @param {Color} $pivot-color [rgba(0,0,0,0.1)] - Pivot color.
+/// @param {Time} $duration [1s] - Animation duration.
+///
+@mixin loader_seesaw($width: 50px, $height: 20px, $color: currentColor, $pivot-color: rgba(0, 0, 0, 0.1), $duration: 1s) {
+    width: $width;
+    height: $height;
+    position: relative;
+
+    &::before {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        border-left: 8px solid transparent;
+        border-right: 8px solid transparent;
+        border-bottom: 10px solid $pivot-color;
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: 5px;
+        left: 0;
+        right: 0;
+        height: 4px;
+        background: $color;
+        border-radius: 2px;
+        transform-origin: center center;
+        animation: loader-seesaw $duration ease-in-out infinite;
+    }
+}