React Native Orb Loader – Glow UI Animation | FuzzuTech

 Demo :


Click Video 👇👇👇













🌟 Featured :

  • 🔁 Looping Orb Spin Animation

  • 💡 Typewriter-style text

  • 🌈 Gradient overlays with glow effects

  • 📱 Ideal for splash screens

  • 🔧 Tools Used: React Native, Animated API, Easing, JS, CSS-like styles


Code :


OrbLoader.js


import React, { useRef, useEffect, useState } from 'react'; import { View, StyleSheet, Animated, Easing, Dimensions, Text, } from 'react-native'; const { width } = Dimensions.get('window'); const SIZE = 250; const RADIUS = SIZE / 2; const OrbLoader = () => { const rotateAnim = useRef(new Animated.Value(0)).current; const pulseAnim = useRef(new Animated.Value(1)).current; const [displayText, setDisplayText] = useState('Loading...'); const fullText = 'Loading...'; useEffect(() => { // Rotation animation Animated.loop( Animated.timing(rotateAnim, { toValue: 1, duration: 4000, easing: Easing.linear, useNativeDriver: true, }) ).start(); // Pulse animation Animated.loop( Animated.sequence([ Animated.timing(pulseAnim, { toValue: 1.08, duration: 1000, easing: Easing.inOut(Easing.ease), useNativeDriver: true, }), Animated.timing(pulseAnim, { toValue: 1, duration: 1000, easing: Easing.inOut(Easing.ease), useNativeDriver: true, }), ]) ).start(); // Typewriter loop let index = fullText.length; let removing = true; const interval = setInterval(() => { if (removing) { if (index > 0) { setDisplayText(fullText.substring(0, index - 1)); index--; } else { removing = false; } } else { if (index < fullText.length) { setDisplayText(fullText.substring(0, index + 1)); index++; } else { removing = true; } } }, 150); return () => clearInterval(interval); }, []); const spin = rotateAnim.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'], }); const totalDots = 40; const dots = []; for (let i = 0; i < totalDots; i++) { const angle = (i / totalDots) * 2 * Math.PI; const x = RADIUS + RADIUS * Math.cos(angle) - 3; const y = RADIUS + RADIUS * Math.sin(angle) - 3; dots.push( <View key={i} style={[ styles.dot, { left: x, top: y, opacity: i % 2 === 0 ? 0.8 : 0.4, }, ]} /> ); } return ( <View style={styles.container}> <Animated.View style={[styles.glow, { transform: [{ scale: pulseAnim }] }]} /> <Animated.View style={[styles.loader, { transform: [{ scale: pulseAnim }] }]}> <Animated.View style={styles.innerOrb}> <View style={styles.gradientLayer1} /> <View style={styles.gradientLayer2} /> <Text style={styles.loadingTextInside}>{displayText}</Text> </Animated.View> <Animated.View style={[styles.orbit, { transform: [{ rotate: spin }] }]}> {dots} </Animated.View> </Animated.View> </View> ); }; export default OrbLoader; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#000000', justifyContent: 'center', alignItems: 'center', }, loader: { width: SIZE, height: SIZE, borderRadius: RADIUS, justifyContent: 'center', alignItems: 'center', }, innerOrb: { width: SIZE, height: SIZE, borderRadius: RADIUS, backgroundColor: '#d63384', overflow: 'hidden', justifyContent: 'center', alignItems: 'center', position: 'relative', }, glow: { position: 'absolute', width: SIZE + 100, height: SIZE + 100, borderRadius: (SIZE + 100) / 2, backgroundColor: '#e83e8c', opacity: 0.1, shadowColor: '#ff66cc', shadowOffset: { width: 0, height: 0 }, shadowOpacity: 1, shadowRadius: 60, elevation: 25, }, gradientLayer1: { position: 'absolute', width: '140%', height: '140%', backgroundColor: 'rgba(255,255,255,0.15)', borderRadius: RADIUS, transform: [{ rotate: '45deg' }], top: '-20%', left: '-20%', }, gradientLayer2: { position: 'absolute', width: '160%', height: '100%', backgroundColor: 'rgba(0,0,255,0.1)', borderRadius: RADIUS, transform: [{ rotate: '-25deg' }], top: '10%', left: '-30%', }, orbit: { position: 'absolute', width: SIZE, height: SIZE, }, dot: { position: 'absolute', width: 6, height: 6, borderRadius: 3, backgroundColor: '#fff', }, loadingTextInside: { color: '#fff', fontSize: 18, fontWeight: '600', textAlign: 'center', letterSpacing: 1, }, });


App.js


import OrbLoader from './orbLoader';

export default function App() {

    return <OrbLoader />;

}



Comments

Post a Comment

Popular posts from this blog

Is This News Real or Fake? 🤖 AI Exposes the Truth | FuzzuTech Python App Demo

Image
  Demo : Click Video 👇👇👇 Code : import tkinter as tk from tkinter import messagebox, ttk import joblib import os from sklearn.feature_extraction.text import TfidfVectorizer from sklearn.linear_model import PassiveAggressiveClassifier import pandas as pd from sklearn.model_selection import train_test_split # Check if model exists, else train it MODEL_PATH = "fake_news_model.pkl" def train_and_save_model():     # For demo purpose, we'll create a small dummy dataset inline     data = {         'text': [             'The economy is doing well and jobs are increasing',             'Aliens have landed on Earth and taken over the government',             'New vaccine proves to be 99% effective',             'Scientists found cure for cancer last year',             'Politician involved in scanda...
Read more

🚨 Python Intrusion Detection System (IDS) – Real-Time ML + Tkinter GUI Project | FuzzuTech

Image
  Demo : Click Video 👇👇👇 Features: ✔ SEO keywords included (IDS, ML, Tkinter, Python GUI) ✔ Embedded YouTube Short ✔ Full code snippet (main.py) ✔ Download links (GitHub/GDrive optional) ✔ Call-to-action: Subscribe + Follow socials Code : """ main.py Single-file IDS demo: - Generates synthetic network-like dataset (if missing) - Trains IsolationForest model and saves model_iforest.pkl - Runs a modern-looking Tkinter GUI to simulate live packets,   score them with the model and highlight anomalies. Usage: 1) Create and activate a venv (recommended) 2) pip install -r requirements.txt 3) python main.py """ import os import threading import time import random import sys import queue from pathlib import Path import tkinter as tk from tkinter import ttk, messagebox # --- third-party libs --- try:     import numpy as np     import pandas as pd     from sklearn.ensemble import IsolationForest     import joblib except Exception as e:...
Read more

🚀 Simple Login & Registration System in Python Tkinter 📱

Image
   Demo : Click Video 👇👇👇 ✅ Features: ✔️ Simple Login UI 🖥️ ✔️ Secure User Authentication 🔒 ✔️ SQLite Database Integration 📂 ✔️ User Registration Form ✍️ Code : import tkinter as tk from tkinter import messagebox from tkinter import ttk import sqlite3 # Global variables root = tk.Tk() root.withdraw()  # Hide main root window login_window = None home_window = None settings_window = None planner_window = None # Database setup def create_db():     conn = sqlite3.connect('user_data.db')     c = conn.cursor()     c.execute('''CREATE TABLE IF NOT EXISTS users (username TEXT, password TEXT)''')     conn.commit()     conn.close() # User registration def register_user():     username = reg_username_entry.get()     password = reg_password_entry.get()     if username and password:         conn = sqlite3.connect('user_data.db')         c = conn.cursor...
Read more