move.gl 0.0.1 → 0.0.2

package/dist/scss/classes/_loaders.scss

@@ -0,0 +1,779 @@
+// ============================================================================
+// move.gl | Loader Classes
+// ============================================================================
+// Copyright 2025 Scape Agency BV
+// Licensed under MIT License
+// ============================================================================
+
+////
+/// Loader Classes
+/// ===========================================================================
+///
+/// This module provides ready-to-use CSS classes for loading animations.
+/// Each class uses the corresponding loader mixin from the mixins/loaders module.
+///
+/// @group Classes
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../mixins/loaders" as *;
+
+
+// ============================================================================
+// Keyframes
+// ============================================================================
+// These keyframes must be included at the root level to be available globally
+
+// Spinner keyframes
+@include keyframes_spinner_border;
+@include keyframes_spinner_grow;
+
+// Circle keyframes
+@include keyframes_circle_rotation;
+@include keyframes_circle_clip;
+@include keyframes_circle_rotation_back;
+@include keyframes_circle_pulse;
+@include keyframes_circle_ripple;
+
+// Progress keyframes
+@include keyframes_progress_fill;
+@include keyframes_progress_indeterminate;
+@include keyframes_progress_stripe;
+@include keyframes_progress_pulse;
+@include keyframes_progress_split;
+@include keyframes_progress_flow;
+@include keyframes_circle_progress;
+@include keyframes_dot_active;
+@include keyframes_segment_fill;
+
+// Bubble keyframes
+@include keyframes_bubble_scale;
+@include keyframes_bubble_fade;
+@include keyframes_bubble_flash;
+@include keyframes_bubble_pulse;
+@include keyframes_bubble_expand;
+@include keyframes_bubble_collision;
+@include keyframes_rotation;
+@include keyframes_flip;
+
+// Rectangle keyframes
+@include keyframes_rect_flip_x;
+@include keyframes_rect_scale_out;
+@include keyframes_rect_scale_fade;
+@include keyframes_rect_fill;
+@include keyframes_rect_diamond_fill;
+@include keyframes_rect_rotate_shrink;
+@include keyframes_rect_morph;
+@include keyframes_rect_walk;
+@include keyframes_rect_rotation_break;
+
+// Line/Bar keyframes
+@include keyframes_bar_height;
+@include keyframes_bar_bounce;
+@include keyframes_bar_scale_y;
+@include keyframes_bar_flash;
+@include keyframes_bar_wave;
+@include keyframes_bar_expand;
+@include keyframes_bar_reveal;
+@include keyframes_bar_spike;
+@include keyframes_bar_ht;
+@include keyframes_matrix;
+
+// Text keyframes
+@include keyframes_text_fill;
+@include keyframes_text_bounce;
+@include keyframes_text_dots;
+@include keyframes_text_letter_fade;
+@include keyframes_text_pulse;
+@include keyframes_text_spotlight;
+@include keyframes_text_cursor;
+@include keyframes_text_wave;
+@include keyframes_text_shake;
+
+// Object keyframes
+@include keyframes_paddles;
+@include keyframes_ball_bounce;
+@include keyframes_heartbeat;
+@include keyframes_star_twinkle;
+@include keyframes_bracket_swing;
+@include keyframes_rolling_rock;
+@include keyframes_pendulum;
+@include keyframes_coin_flip;
+@include keyframes_bounce_up;
+@include keyframes_bounce_shadow;
+@include keyframes_dna_rotate;
+@include keyframes_infinity_rotate;
+
+// Graph keyframes
+@include keyframes_write_down;
+@include keyframes_page_turn;
+@include keyframes_pencil_write;
+@include keyframes_checkmark;
+@include keyframes_hourglass_flip;
+@include keyframes_sand_fall;
+@include keyframes_clock_rotate;
+@include keyframes_envelope_open;
+@include keyframes_search_wobble;
+@include keyframes_gear_rotate;
+
+
+// ============================================================================
+// Base Loader Container
+// ============================================================================
+
+/// Base loader class
+.loader {
+    @include loader_base;
+}
+
+
+// ============================================================================
+// Spinner Loaders
+// ============================================================================
+
+/// Basic spinner loader
+.loader--spinner {
+    @include loader_spinner();
+}
+
+/// Dotted spinner loader
+.loader--spinner-dots {
+    @include loader_spinner_dots();
+}
+
+/// Dual ring spinner
+.loader--dual-ring {
+    @include loader_dual_ring();
+}
+
+/// Hourglass spinner
+.loader--hourglass {
+    @include loader_hourglass();
+}
+
+/// Circle notch spinner
+.loader--circle-notch {
+    @include loader_circle_notch();
+}
+
+/// Ring loader
+.loader--ring {
+    @include loader_ring();
+}
+
+/// Gradient spinner
+.loader--gradient {
+    @include loader_gradient();
+}
+
+
+// ============================================================================
+// Dot Loaders
+// ============================================================================
+
+/// Pulse dots loader
+.loader--dots {
+    @include loader_dots_pulse();
+}
+
+/// Bounce dots loader
+.loader--dots-bounce {
+    @include loader_dots_bounce();
+}
+
+/// Wave dots loader
+.loader--dots-wave {
+    @include loader_dots_wave();
+}
+
+/// Fade dots loader
+.loader--dots-fade {
+    @include loader_dots_fade();
+}
+
+/// Grow dots loader
+.loader--dots-grow {
+    @include loader_dots_grow();
+}
+
+/// Typing indicator loader
+.loader--typing {
+    @include loader_typing();
+}
+
+/// Ellipsis loader
+.loader--ellipsis {
+    @include loader_ellipsis();
+}
+
+
+// ============================================================================
+// Bar Loaders
+// ============================================================================
+
+/// Wave bars loader
+.loader--bars {
+    @include loader_bars();
+}
+
+/// Wave bar loader
+.loader--wave-bar {
+    @include loader_wave_bar();
+}
+
+/// Progress bar loader
+.loader--progress {
+    @include loader_progress();
+}
+
+
+// ============================================================================
+// Circle & Ring Loaders
+// ============================================================================
+
+/// Pulse loader
+.loader--pulse {
+    @include loader_pulse();
+}
+
+/// Ripple loader
+.loader--ripple {
+    @include loader_ripple();
+}
+
+/// Orbit loader
+.loader--orbit {
+    @include loader_orbit();
+}
+
+/// Chase loader
+.loader--chase {
+    @include loader_chase();
+}
+
+/// Atom loader
+.loader--atom {
+    @include loader_atom();
+}
+
+
+// ============================================================================
+// Special Loaders
+// ============================================================================
+
+/// Heartbeat loader
+.loader--heartbeat {
+    @include loader_heartbeat();
+}
+
+/// Morph loader
+.loader--morph {
+    @include loader_morph();
+}
+
+/// Flip card loader
+.loader--flip-card {
+    @include loader_flip_card();
+}
+
+/// Square rotate loader
+.loader--square {
+    @include loader_square();
+}
+
+/// Cube flip loader
+.loader--cube {
+    @include loader_cube();
+}
+
+/// Folding squares loader
+.loader--folding {
+    @include loader_folding();
+}
+
+/// Clock loader
+.loader--clock {
+    @include loader_clock();
+}
+
+/// Bounce loader
+.loader--bounce {
+    @include loader_bounce();
+}
+
+/// Windmill loader
+.loader--windmill {
+    @include loader_windmill();
+}
+
+/// Gear loader
+.loader--gear {
+    @include loader_gear();
+}
+
+/// Battery loader
+.loader--battery {
+    @include loader_battery();
+}
+
+/// Wifi loader
+.loader--wifi {
+    @include loader_wifi();
+}
+
+/// DNA helix loader
+.loader--dna {
+    @include loader_dna();
+}
+
+/// Infinity loader
+.loader--infinity {
+    @include loader_infinity();
+}
+
+/// Pendulum loader
+.loader--pendulum {
+    @include loader_pendulum();
+}
+
+/// Seesaw loader
+.loader--seesaw {
+    @include loader_seesaw();
+}
+
+// ============================================================================
+// Progress Loaders
+// ============================================================================
+
+/// Progress fill loader
+.loader--progress-fill {
+    @include loader_progress_fill();
+}
+
+/// Progress indeterminate loader
+.loader--progress-indeterminate {
+    @include loader_progress_indeterminate();
+}
+
+/// Progress stripe loader
+.loader--progress-stripe {
+    @include loader_progress_stripe();
+}
+
+/// Progress stripe fill loader
+.loader--progress-stripe-fill {
+    @include loader_progress_stripe_fill();
+}
+
+/// Progress pulse loader
+.loader--progress-pulse {
+    @include loader_progress_pulse();
+}
+
+/// Progress split loader
+.loader--progress-split {
+    @include loader_progress_split();
+}
+
+/// Progress gradient loader
+.loader--progress-gradient {
+    @include loader_progress_gradient();
+}
+
+/// Progress dots loader
+.loader--progress-dots {
+    @include loader_progress_dots();
+}
+
+/// Progress segments loader
+.loader--progress-segments {
+    @include loader_progress_segments();
+}
+
+/// Progress circle loader
+.loader--progress-circle {
+    @include loader_progress_circle();
+}
+
+
+// ============================================================================
+// Circle Loaders
+// ============================================================================
+
+/// Circle spinner loader
+.loader--circle-spinner {
+    @include loader_circle_spinner();
+}
+
+/// Circle dual loader
+.loader--circle-dual {
+    @include loader_circle_dual();
+}
+
+/// Circle clip loader
+.loader--circle-clip {
+    @include loader_circle_clip();
+}
+
+/// Circle clip dual loader
+.loader--circle-clip-dual {
+    @include loader_circle_clip_dual();
+}
+
+/// Circle nested loader
+.loader--circle-nested {
+    @include loader_circle_nested();
+}
+
+/// Circle triple loader
+.loader--circle-triple {
+    @include loader_circle_triple();
+}
+
+/// Circle dot loader
+.loader--circle-dot {
+    @include loader_circle_dot();
+}
+
+/// Circle pulse loader
+.loader--circle-pulse {
+    @include loader_circle_pulse();
+}
+
+/// Circle ripple loader
+.loader--circle-ripple {
+    @include loader_circle_ripple();
+}
+
+/// Circle orbit loader
+.loader--circle-orbit {
+    @include loader_circle_orbit();
+}
+
+
+// ============================================================================
+// Bubble Loaders
+// ============================================================================
+
+/// Bubble rotate loader
+.loader--bubble-rotate {
+    @include loader_bubble_rotate();
+}
+
+/// Bubble dots bounce loader
+.loader--bubble-dots-bounce {
+    @include loader_bubble_dots_bounce();
+}
+
+/// Bubble dots flash loader
+.loader--bubble-dots-flash {
+    @include loader_bubble_dots_flash();
+}
+
+/// Bubble dots pulse loader
+.loader--bubble-dots-pulse {
+    @include loader_bubble_dots_pulse();
+}
+
+/// Bubble dots rotate loader
+.loader--bubble-dots-rotate {
+    @include loader_bubble_dots_rotate();
+}
+
+/// Bubble expand loader
+.loader--bubble-expand {
+    @include loader_bubble_expand();
+}
+
+/// Bubble collision loader
+.loader--bubble-collision {
+    @include loader_bubble_collision();
+}
+
+/// Bubble flip loader
+.loader--bubble-flip {
+    @include loader_bubble_flip();
+}
+
+
+// ============================================================================
+// Rectangle Loaders
+// ============================================================================
+
+/// Rectangle flip loader
+.loader--rect-flip {
+    @include loader_rect_flip();
+}
+
+/// Rectangle dual loader
+.loader--rect-dual {
+    @include loader_rect_dual();
+}
+
+/// Rectangle expand loader
+.loader--rect-expand {
+    @include loader_rect_expand();
+}
+
+/// Rectangle alternate loader
+.loader--rect-alternate {
+    @include loader_rect_alternate();
+}
+
+/// Rectangle fill loader
+.loader--rect-fill {
+    @include loader_rect_fill();
+}
+
+/// Rectangle shrink loader
+.loader--rect-shrink {
+    @include loader_rect_shrink();
+}
+
+/// Rectangle morph loader
+.loader--rect-morph {
+    @include loader_rect_morph();
+}
+
+/// Rectangle diamond loader
+.loader--rect-diamond {
+    @include loader_rect_diamond();
+}
+
+/// Rectangle walk loader
+.loader--rect-walk {
+    @include loader_rect_walk();
+}
+
+/// Rectangle nested loader
+.loader--rect-nested {
+    @include loader_rect_nested();
+}
+
+/// Rectangle stepped loader
+.loader--rect-stepped {
+    @include loader_rect_stepped();
+}
+
+
+// ============================================================================
+// Bar/Line Loaders
+// ============================================================================
+
+/// Bar bounce loader
+.loader--bar-bounce {
+    @include loader_bar_bounce();
+}
+
+/// Bar pulse loader
+.loader--bar-pulse {
+    @include loader_bar_pulse();
+}
+
+/// Bar flash loader
+.loader--bar-flash {
+    @include loader_bar_flash();
+}
+
+/// Bar wave loader
+.loader--bar-wave {
+    @include loader_bar_wave();
+}
+
+/// Bar equalizer loader
+.loader--bar-equalizer {
+    @include loader_bar_equalizer();
+}
+
+/// Bar expand horizontal loader
+.loader--bar-expand {
+    @include loader_bar_expand_horizontal();
+}
+
+/// Bar reveal loader
+.loader--bar-reveal {
+    @include loader_bar_reveal();
+}
+
+/// Bar sound wave loader
+.loader--bar-sound-wave {
+    @include loader_bar_sound_wave();
+}
+
+/// Bar shrink loader
+.loader--bar-shrink {
+    @include loader_bar_shrink();
+}
+
+/// Bar matrix loader
+.loader--bar-matrix {
+    @include loader_bar_matrix();
+}
+
+
+// ============================================================================
+// Text Loaders
+// ============================================================================
+
+/// Text fill loader
+.loader--text-fill {
+    @include loader_text_fill();
+}
+
+/// Text dots loader
+.loader--text-dots {
+    @include loader_text_dots();
+}
+
+/// Text bounce loader
+.loader--text-bounce {
+    @include loader_text_bounce();
+}
+
+/// Text fade loader
+.loader--text-fade {
+    @include loader_text_fade();
+}
+
+/// Text pulse loader
+.loader--text-pulse {
+    @include loader_text_pulse();
+}
+
+/// Text spotlight loader
+.loader--text-spotlight {
+    @include loader_text_spotlight();
+}
+
+/// Text typing loader
+.loader--text-typing {
+    @include loader_text_typing();
+}
+
+/// Text wave loader
+.loader--text-wave {
+    @include loader_text_wave();
+}
+
+/// Text shake loader
+.loader--text-shake {
+    @include loader_text_shake();
+}
+
+/// Text gradient loader
+.loader--text-gradient {
+    @include loader_text_gradient();
+}
+
+/// Text spinner loader
+.loader--text-spinner {
+    @include loader_text_spinner();
+}
+
+/// Text percentage loader
+.loader--text-percentage {
+    @include loader_text_percentage();
+}
+
+
+// ============================================================================
+// Skeleton Loaders
+// ============================================================================
+
+/// Skeleton shimmer loader
+.loader--skeleton-shimmer {
+    @include loader_skeleton_shimmer();
+}
+
+/// Skeleton pulse loader
+.loader--skeleton-pulse {
+    @include loader_skeleton_pulse();
+}
+
+/// Skeleton wave loader
+.loader--skeleton-wave {
+    @include loader_skeleton_wave();
+}
+
+/// Skeleton fade loader
+.loader--skeleton-fade {
+    @include loader_skeleton_fade();
+}
+
+
+// ============================================================================
+// Graphic Loaders
+// ============================================================================
+
+/// Clipboard loader
+.loader--clipboard {
+    @include loader_clipboard();
+}
+
+/// Book loader
+.loader--book {
+    @include loader_book();
+}
+
+/// Document loader
+.loader--document {
+    @include loader_document();
+}
+
+/// Envelope loader
+.loader--envelope {
+    @include loader_envelope();
+}
+
+/// Search loader
+.loader--search {
+    @include loader_search();
+}
+
+
+// ============================================================================
+// Object Loaders
+// ============================================================================
+
+/// Ping pong loader
+.loader--ping-pong {
+    @include loader_ping_pong();
+}
+
+/// Heart loader
+.loader--heart {
+    @include loader_heart();
+}
+
+/// Star loader
+.loader--star {
+    @include loader_star();
+}
+
+/// Brackets loader
+.loader--brackets {
+    @include loader_brackets();
+}
+
+/// Rolling rock loader
+.loader--rolling-rock {
+    @include loader_rolling_rock();
+}
+
+/// Coin loader
+.loader--coin {
+    @include loader_coin();
+}
+
+/// Bouncing ball loader
+.loader--bouncing-ball {
+    @include loader_bouncing_ball();
+}