CoderFunda
  • Home
  • About us
    • Contact Us
    • Disclaimer
    • Privacy Policy
    • About us
  • Home
  • Php
  • HTML
  • CSS
  • JavaScript
    • JavaScript
    • Jquery
    • JqueryUI
    • Stock
  • SQL
  • Vue.Js
  • Python
  • Wordpress
  • C++
    • C++
    • C
  • Laravel
    • Laravel
      • Overview
      • Namespaces
      • Middleware
      • Routing
      • Configuration
      • Application Structure
      • Installation
    • Overview
  • DBMS
    • DBMS
      • PL/SQL
      • SQLite
      • MongoDB
      • Cassandra
      • MySQL
      • Oracle
      • CouchDB
      • Neo4j
      • DB2
      • Quiz
    • Overview
  • Entertainment
    • TV Series Update
    • Movie Review
    • Movie Review
  • More
    • Vue. Js
    • Php Question
    • Php Interview Question
    • Laravel Interview Question
    • SQL Interview Question
    • IAS Interview Question
    • PCS Interview Question
    • Technology
    • Other

01 March, 2024

I want to show a video or Lottie animation for my React Weather App

 Programing Coderfunda     March 01, 2024     No comments   

I am a beginner who is learning react.js and i have made Weather app through React JS Tutorial – Build a Weather App With Cities Autocomplete and now i want to add my lottie animation to appear when a user visits and after the lotties animation goes after 4 seconds then the content of the appilcation appears. Please help me achieve this.


Thank you


I tried to create another component VideoPlayer.jsx and then put the lottie on it and then add variable and used useEffect:
const VideoPlayer = ({ onVideoEnd }) => {
const [videoLoaded, setVideoLoaded] = useState(false);

useEffect(() => {
const handleVideoLoad = () => {
setVideoLoaded(true);
};

const handleVideoEnded = () => {
if (onVideoEnd) {
onVideoEnd();
}
};

const videoElement = document.getElementById('myVideo');
videoElement.addEventListener('loadeddata', handleVideoLoad);
videoElement.addEventListener('ended', handleVideoEnded);

return () => {
videoElement.removeEventListener('loadeddata', handleVideoLoad);
videoElement.removeEventListener('ended', handleVideoEnded);
};
}, [onVideoEnd]);



give it absolute position and z-index of 1000.


In the return i added
{!videoLoaded &&

Loading video...}
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Email ThisBlogThis!Share to XShare to Facebook

Related Posts:

  • Laravel 9 Dynamic Form Validation in VueJs with PHP Today market, vue js become more well known. so today I need to impart to you how to add dynamic information structure approval utilizing php la… Read More
  • Vue JS Scroll to component in div utilizing vue-scrollto In these days, vue.js turns out to be more well known step by step. so today I need to impart to you look to a particular reference id or compon… Read More
  • Laravel Dynamic Dependent Dropdown using VueJS and PHPBy and large, Unique Ward Select Box is utilized for auto-populate a dropdown list on Dependant information. At the point when you select one drop-dow… Read More
  • Laravel 9 and Vue JS CRUD with Pagination begning to scratch In Todays, Most well known JS Structure are Precise JS and Vue JS. Rakish JS and Vue JS are an exceptionally easy to understand JS Structure and… Read More
  • Laravel 9 Dynamic Ajax Autocomplete using Vue.js Today, we will learn ajax live hunt and autocomplete involving vue js parts in laravel 5.6 application. here we will make straightforward and pl… Read More
Newer Post Older Post Home

0 comments:

Post a Comment

Thanks

Meta

Popular Posts

  • Write API Integrations in Laravel and PHP Projects with Saloon
    Write API Integrations in Laravel and PHP Projects with Saloon Saloon  is a Laravel/PHP package that allows you to write your API integratio...
  • Credit card validation in laravel
      Validation rules for credit card using laravel-validation-rules/credit-card package in laravel Install package laravel-validation-rules/cr...
  • iOS 17 Force Screen Rotation not working on iPAD only
    I have followed all the links on Google and StackOverFlow, unfortunately, I could not find any reliable solution Specifically for iPad devic...
  • C++ in Hindi Introduction
    C ++ का परिचय C ++ एक ऑब्जेक्ट ओरिएंटेड प्रोग्रामिंग लैंग्वेज है। C ++ को Bjarne Stroustrup द्वारा विकसित किया गया था। C ++ में आने से पह...
  • Python AttributeError: 'str' has no attribute glob
    I am trying to look for a folder in a directory but I am getting the error.AttributeError: 'str' has no attribute glob Here's ...

Categories

  • Ajax (26)
  • Bootstrap (30)
  • DBMS (42)
  • HTML (12)
  • HTML5 (45)
  • JavaScript (10)
  • Jquery (34)
  • Jquery UI (2)
  • JqueryUI (32)
  • Laravel (1017)
  • Laravel Tutorials (23)
  • Laravel-Question (6)
  • Magento (9)
  • Magento 2 (95)
  • MariaDB (1)
  • MySql Tutorial (2)
  • PHP-Interview-Questions (3)
  • Php Question (13)
  • Python (36)
  • RDBMS (13)
  • SQL Tutorial (79)
  • Vue.js Tutorial (68)
  • Wordpress (150)
  • Wordpress Theme (3)
  • codeigniter (108)
  • oops (4)
  • php (853)

Social Media Links

  • Follow on Twitter
  • Like on Facebook
  • Subscribe on Youtube
  • Follow on Instagram

Pages

  • Home
  • Contact Us
  • Privacy Policy
  • About us

Blog Archive

  • July (2)
  • September (100)
  • August (50)
  • July (56)
  • June (46)
  • May (59)
  • April (50)
  • March (60)
  • February (42)
  • January (53)
  • December (58)
  • November (61)
  • October (39)
  • September (36)
  • August (36)
  • July (34)
  • June (34)
  • May (36)
  • April (29)
  • March (82)
  • February (1)
  • January (8)
  • December (14)
  • November (41)
  • October (13)
  • September (5)
  • August (48)
  • July (9)
  • June (6)
  • May (119)
  • April (259)
  • March (122)
  • February (368)
  • January (33)
  • October (2)
  • July (11)
  • June (29)
  • May (25)
  • April (168)
  • March (93)
  • February (60)
  • January (28)
  • December (195)
  • November (24)
  • October (40)
  • September (55)
  • August (6)
  • July (48)
  • May (2)
  • January (2)
  • July (6)
  • June (6)
  • February (17)
  • January (69)
  • December (122)
  • November (56)
  • October (92)
  • September (76)
  • August (6)

  • Tailwindcss best practices for responsive design - 7/1/2025
  • Tailwind CSS Tutorial (Beginner to Master) - 7/1/2025
  • Failed to install 'cordova-plugin-firebase': CordovaError: Uh oh - 9/21/2024
  • pyspark XPath Query Returns Lists Omitting Missing Values Instead of Including None - 9/20/2024
  • SQL REPL from within Python/Sqlalchemy/Psychopg2 - 9/20/2024

Laravel News

  • Native array_first() and array_last() Functions in PHP 8.5 - 7/2/2025
  • Dependency Injection in Laravel Closure Commands - 6/30/2025
  • Laravel Performance Testing With Volt-Test PHP - 7/1/2025
  • Laravel's in_array_keys Rule: Validating Partial Array Keys - 6/30/2025
  • Top 6 MySQL Database Management Struggles for Laravel Developers (And Smart Fixes) - 6/30/2025

Copyright © 2025 CoderFunda | Powered by Blogger
Design by Coderfunda | Blogger Theme by Coderfunda | Distributed By Coderfunda