Loading State
How do I make an loading state?
What is a loading state? How do you make a loading state? This script and codes were developed by Albert Miller on 15 December 2022, Thursday.
Loading State - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Loading State</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="loading"> <section class="skeleton-row"> <div class="loading__name skeleton-piece"></div><!-- --><div class="loading__address skeleton-piece"></div><!-- --><div class="loading__focus skeleton-piece"></div><!-- --><div class="loading__active-patient skeleton-piece"></div><!-- --><div class="loading__last-order skeleton-piece"></div><!-- --><div class="loading__orders-expiring skeleton-piece"></div> </section> <section class="skeleton-row"> <div class="loading__name skeleton-piece"></div><!-- --><div class="loading__address skeleton-piece"></div><!-- --><div class="loading__focus skeleton-piece"></div><!-- --><div class="loading__active-patient skeleton-piece"></div><!-- --><div class="loading__last-order skeleton-piece"></div><!-- --><div class="loading__orders-expiring skeleton-piece"></div> </section> <section class="skeleton-row"> <div class="loading__name skeleton-piece"></div><!-- --><div class="loading__address skeleton-piece"></div><!-- --><div class="loading__focus skeleton-piece"></div><!-- --><div class="loading__active-patient skeleton-piece"></div><!-- --><div class="loading__last-order skeleton-piece"></div><!-- --><div class="loading__orders-expiring skeleton-piece"></div> <div class="loading__indicator"></div> </section> </section>
</div>
</body>
</html>
Loading State - Script Codes CSS Codes
.loading { background-color: #fff; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.26); margin-bottom: 20px; padding: 10px 25px; position: relative;
}
.loading__name { width: 24%; margin: 0 1% 0 0;
}
.loading__address { width: 28%; margin: 0 1% 0 0;
}
.loading__focus { width: 25%; margin: 0 1% 0 0;
}
.loading__active-patient { width: 4%; margin: 0 1% 0 0;
}
.loading__last-order { width: 10%; margin: 0 1% 0 0;
}
.loading__orders-expiring { width: 4%;
}
.loading__indicator { position: absolute; width: 50px; top: 20px; background-image: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 100%); height: 106px; left: 50px; animation-duration: 1s; animation-name: indicator; animation-iteration-count: infinite; animation-timing-function: ease-in-out;
}
@keyframes indicator { 0% { left: -45px; } 100% { left: calc(100% - 45px); }
}
.skeleton-row { margin: 10px 0;
}
.skeleton-piece { display: inline-block; height: 26px; background-color: rgba(0, 0, 0, 0.13);
}
.container { padding: 10px 20px;
}
body { background-color: #f9f9f9;
}
![Loading State - Script Codes](http://shots.codepen.io/SinceSidSlid/pen/JWabgd-512.jpg)
Developer | Albert Miller |
Username | SinceSidSlid |
Uploaded | December 15, 2022 |
Rating | 3 |
Size | 2,600 Kb |
Views | 20,240 |
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!
Name | Size |
Scroll Lock | 2,497 Kb |
Work Day Clock | 4,102 Kb |
Material Toggle Switch | 2,427 Kb |
Material Calendar | 2,818 Kb |
Loading State 2 | 2,827 Kb |
A Pen by Albert Miller | 1,382 Kb |
Customer Select | 3,178 Kb |
Responsive Tables | 4,066 Kb |
Material Toggle Box Thing | 2,637 Kb |
Payment Progress | 4,498 Kb |
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!
Name | Username | Size |
Pruebas de d3.js | Juanmanuelcarnerero | 2,485 Kb |
Confirm Close Of Foundation Reveal Modal | Winghouchan | 1,818 Kb |
Bootstrap 4 Gridsystem Demo | Rivella50 | 1,535 Kb |
Twitch.tv API | Ryzokuken | 2,618 Kb |
Super Discount | Orrinward | 3,225 Kb |
A Pen by Huan Nghiem | Nightshade | 10,646 Kb |
Border-radius animation | Yukulele | 2,480 Kb |
ECharts Version 3.0 - Bar Marker Chart | WebCodePro | 2,726 Kb |
Opening Reveal Modal On Document Ready | Winghouchan | 1,787 Kb |
Minimal Material Design Form Input | Koenigsegg1 | 3,076 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!