Bar loader with minimal HTML
How do I make an bar loader with minimal html?
Based on the awesome loaders at: http://tobiasahlin.com/spinkit/. What is a bar loader with minimal html? How do you make a bar loader with minimal html? This script and codes were developed by Kristen Zirkler on 16 October 2022, Sunday.
Bar loader with minimal HTML - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bar loader with minimal HTML</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="loading"><span></span><em>loading</em></div>
</body>
</html>
Bar loader with minimal HTML - Script Codes CSS Codes
body { background: #8C5B7B;
}
.loading { margin: auto; width: 112px; height: 100px; text-align: center; position: absolute; top: 0; bottom: 0; right: 0; left: 0;
}
.loading em { color: #DDE0CF; font-family: arial; font-style: normal; text-transform: uppercase; font-size: .8em; opacity: .7; text-align: center; display: block;
}
.loading > div, .loading:before, .loading:after, .loading span, .loading span:before, .loading span:after { background-color: #DDE0CF; height: 100px; width: 20px; display: block; position: absolute; bottom: 0; -webkit-animation: stretchdelay 2.2s infinite ease-in-out; animation: stretchdelay 2.2s infinite ease-in-out;
}
.loading:before, .loading:after, .loading span:before, .loading span:after { display: block; content: '';
}
.loading:after { -webkit-animation-delay: -2.0s; animation-delay: -2.0s; left: 23px;
}
.loading span { -webkit-animation-delay: -1.8s; animation-delay: -1.8s; left: 46px;
}
.loading span:before { -webkit-animation-delay: -1.6s; animation-delay: -1.6s; left: 23px;
}
.loading span:after { -webkit-animation-delay: -1.4s; animation-delay: -1.4s; left: 46px;
}
@-webkit-keyframes stretchdelay { 0%, 40%, 100% { height: 33.33333px; } 20% { height: 100px; }
}
@keyframes stretchdelay { 0%, 40%, 100% { height: 33.33333px; } 20% { height: 100px; }
}
Developer | Kristen Zirkler |
Username | kristenzirkler |
Uploaded | October 16, 2022 |
Rating | 3 |
Size | 2,486 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 |
Tablet Navigation - Jobing.com | 6,043 Kb |
Jobing Header - Clean | 5,120 Kb |
CSS Loader | 3,006 Kb |
Blog Concept - Large photos | 6,948 Kb |
Transparent CSS Device Windows - Browser, Tablet, Mobile | 2,783 Kb |
CSS Loader SVG Animate Path - Jobing.com | 3,692 Kb |
Simple - Blurred BG | 2,417 Kb |
Sortable List with MixItUp | 6,834 Kb |
Responsive Grid List | 5,056 Kb |
Animated Photo | 2,349 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 |
Sticky div | Kaslab | 2,225 Kb |
Getting Started | Viblast | 1,500 Kb |
Save for later... | Victorfreire | 1,359 Kb |
A Pen by tugce | Ecgutcnkr | 4,197 Kb |
Feedback Page | TessDiNapoli | 2,836 Kb |
A Pen by Kenny Mark | Kennymark | 5,574 Kb |
Fixed Scrolling Nav Bar | Philsinatra | 0 Kb |
Review test | Otro_user_gil | 4,054 Kb |
Glitchy Text Effect | Kescoe | 2,208 Kb |
Shopping List | Markmurray | 6,015 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!