Loading State 2

Developer
Albert Miller
Size
2,827 Kb
Views
24,288
  1. Loading State 2 Previews
  2. Loading State 2 HTML Codes
  3. Loading State 2 CSS Codes

How do I make an loading state 2?

I made a loading state for a project internally.. What is a loading state 2? How do you make a loading state 2? This script and codes were developed by Albert Miller on 14 October 2022, Friday.

Loading State 2 Previews
IQ Test

Loading State 2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Loading State 2</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">	<section class="cover">	<h3 class="cover__text">Loading</h3>	<div class="cover__icons">	<i class="material-icons order">assignment</i>	<i class="material-icons comm">question_answer</i>	<i class="material-icons exception">report_problem</i>	<i class="material-icons bill">receipt</i>	</div>	<div class="cover__tips">Tip: Clicking on an event will allow you to see more detail</div>	</section>
</div>
</body>
</html>

Loading State 2 - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i);
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
.cover { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #fff; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.26); margin: 25px; padding: 25px;
}
.cover__text { position: absolute; left: 0; right: 0; text-align: center; top: 20px; font-family: 'Roboto'; font-weight: 300; font-size: 70px; animation: loading-fade 2s ease-in-out infinite;
}
@keyframes loading-fade { 0% { opacity: 1; } 50% { opacity: .25; } 100% { opacity: 1; }
}
.cover__icons { position: absolute; left: 0; right: 0; text-align: center; top: 200px; font-size: 24px; opacity: .6;
}
.cover__tips { left: 0; right: 0; bottom: 200px; text-align: center; position: absolute; font-family: 'Roboto';
}
.order { color: #e53935; position: relative; font-size: 36px; top: 20px; animation: order-shake 1s ease-in-out infinite;
}
@keyframes order-shake { 0% { top: 20px; } 50% { top: 0; } 100% { top: 20px; }
}
.comm { color: #1e88e5; position: relative; font-size: 36px; top: 20px; animation: comm-shake 1s ease-in-out infinite; animation-delay: .25s;
}
@keyframes comm-shake { 0% { top: 20px; } 50% { top: 0; } 100% { top: 20px; }
}
.exception { color: #ffb300; position: relative; font-size: 36px; top: 20px; animation: exception-shake 1s ease-in-out infinite; animation-delay: .5s;
}
@keyframes exception-shake { 0% { top: 20px; } 50% { top: 0; } 100% { top: 20px; }
}
.bill { color: #43a047; position: relative; font-size: 36px; top: 20px; animation: bill-shake 1s ease-in-out infinite; animation-delay: .75s;
}
@keyframes bill-shake { 0% { top: 20px; } 50% { top: 0; } 100% { top: 20px; }
}
body { background-color: #f9f9f9;
}
Loading State 2 - Script Codes
Loading State 2 - Script Codes
Home Page Home
Developer Albert Miller
Username SinceSidSlid
Uploaded October 14, 2022
Rating 3
Size 2,827 Kb
Views 24,288
Do you need developer help for Loading State 2?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Albert Miller (SinceSidSlid) Script Codes
Name
Material Toggle Box Thing
Material Tabs
Customer Select
Hierarchy
Chart Loading Animation
Work Day Clock
Material Calendar
Material Week Calendar
Alternative Material Tabs
Loading State
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!