Created
October 16, 2019 07:10
-
-
Save iamsaksham/6208cdf3172a468e5626aa0c4c612868 to your computer and use it in GitHub Desktop.
Loading screen with animated facts after every 5sec interval
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { useState, useEffect } from 'react'; | |
| .loader-wrapper { | |
| text-align: center; | |
| font-family: 'Open Sans', sans-serif; | |
| } | |
| .loader-icon-wrapper { | |
| margin-top: 10vh; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .loader-header { | |
| margin-top: 5vh; | |
| font-size: 0.9rem; | |
| } | |
| .loader-bundle { | |
| position: relative; | |
| margin: 1vh 3vh 0vh; | |
| box-shadow: 0px 1px 4px #00000029; | |
| border-radius: 10px; | |
| } | |
| .animate-right { | |
| animation: animateRight 0.5s; | |
| } | |
| @keyframes animateRight { | |
| 0% { | |
| right: -300px; | |
| opacity: 0; | |
| } | |
| 100% { | |
| right: 0; | |
| opacity: 1; | |
| } | |
| } | |
| .loader-paper { | |
| margin-top: 0vh; | |
| padding: 0.5vh 0.5vh 2vh; | |
| } | |
| .loader-line { | |
| max-height: 11vh; | |
| padding: 3vh 0vh 1vh; | |
| margin: auto; | |
| } | |
| .loader-bot { | |
| max-height: 11vh; | |
| max-width: 35vh; | |
| padding: 3vh 0vh 1vh; | |
| margin: auto; | |
| } | |
| .loader-image { | |
| max-height: 7vh; | |
| padding: 3vh 0vh 1vh; | |
| margin: auto; | |
| /* margin-bottom: -9vh; */ | |
| } | |
| .loader-question { | |
| margin: 12vh 0vh 1vh; | |
| padding: 0.5vh; | |
| font-size: 1rem; | |
| color: #EA4C4C; | |
| } | |
| .loader-fact { | |
| font-size: 0.8rem; | |
| margin: 2vh; | |
| } | |
| const facts = [ | |
| { | |
| icon: 'https://roadzen-public.s3.ap-south-1.amazonaws.com/mobile_insurance/water-phone.png', | |
| text: '28 % of consumers will drop their phones into liquid and 8 percent spill onto their device.', | |
| }, | |
| { | |
| icon: 'https://roadzen-public.s3.ap-south-1.amazonaws.com/mobile_insurance/calender.png', | |
| text: 'The average time from purchase to breaking your phone is approximately 10 weeks.', | |
| }, | |
| { | |
| icon: 'https://roadzen-public.s3.ap-south-1.amazonaws.com/mobile_insurance/broken-screen.png', | |
| text: '45 percent of smartphone owners accidentally damage their phones.', | |
| }, | |
| { | |
| icon: 'https://roadzen-public.s3.ap-south-1.amazonaws.com/mobile_insurance/phone-fall.png', | |
| text: '38 percent of consumers drop their phone right out of their hand.', | |
| }, | |
| { | |
| icon: 'https://roadzen-public.s3.ap-south-1.amazonaws.com/mobile_insurance/broken-screen.png', | |
| text: '33% of smartphones get broken or lost.', | |
| }, | |
| { | |
| icon: 'https://roadzen-public.s3.ap-south-1.amazonaws.com/mobile_insurance/hand-phone.png', | |
| text: 'The average smartphone user checks their device 47 times a day / 17,155 a year.', | |
| }, | |
| ]; | |
| function App() { | |
| const [factNumber, setFactNumber] = useState(0); | |
| const [animationClass, setAnimationClass] = useState(''); | |
| useEffect(() => { | |
| const id = setInterval(() => { | |
| setFactNumber(factNumber+1 < facts.length ? factNumber+1 : 0); | |
| setAnimationClass(' animate-right'); | |
| }, 5000); | |
| return () => { | |
| clearInterval(id); | |
| }; | |
| }, [factNumber]); | |
| useEffect(() => { | |
| const id = setInterval(() => { | |
| setAnimationClass(''); | |
| }, 3000); | |
| return () => { | |
| clearInterval(id); | |
| }; | |
| }, [animationClass]); | |
| return ( | |
| <div className="loader-wrapper"> | |
| <div className="loader-icon-wrapper"> | |
| <img className="loader-bot" src="https://roadzen-public.s3.ap-south-1.amazonaws.com/mobile_insurance/load-bot.png" alt="loader-desc" /> | |
| <img className="loader-bot" src="https://roadzen-public.s3.ap-south-1.amazonaws.com/mobile_insurance/lines.png" alt="loader-desc" /> | |
| </div> | |
| <div className="loader-header"> | |
| Please wait while we process your video… | |
| </div> | |
| <div className="loader-question">DO YOU KNOW?</div> | |
| <div className={`loader-bundle${animationClass}`}> | |
| <img className="loader-image" src={facts[factNumber].icon} alt="loader-desc" /> | |
| <div className="loader-paper"> | |
| {/* <div className="loader-question">DO YOU KNOW?</div> */} | |
| <div className="loader-fact">{facts[factNumber].text}</div> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| export default App; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment