Simple Loading Bar
How do I make an simple loading bar?
Simple Loading bar movement test. Using Ul and LI tags for test.. What is a simple loading bar? How do you make a simple loading bar? This script and codes were developed by Saysora on 26 August 2022, Friday.
Simple Loading Bar - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Loading Bar</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="wrap"> <h1>Loading Bar Test</h1> <p id="below">Hover</p> <div id="frame"> <p id="load">Loading...</p> <ul> <li></li> </ul> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Simple Loading Bar - Script Codes CSS Codes
* { margin: 0; padding: 0;
}
body { font-family: "Helvetica"; font-size: .9em; background: #ecf0f1;
}
#wrap { width: 960px; max-width: 100%; margin: 10px auto;
}
#frame { background: #222222; color: #fff; position: relative;
}
#frame #load { color: #222; margin-top: 1.5px; width: 100%; position: absolute; z-index: 15; text-align: center;
}
#frame:hover ul li { margin-right: 0;
}
#frame ul { margin-top: 10px; padding: 2px; list-style: none; display: block; position: relative;
}
#frame ul li { display: block; background: #c0392b; height: 17px; margin-right: 100%; -webkit-transition: margin 3s;
}
#frame ul:after { display: block; content: " "; clear: both;
}
#below { width: 40px; padding-left: 2px; position: relative;
}
#below:after { position: absolute; left: 40%; content: " "; display: block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 7px solid #000;
}
Developer | Saysora |
Username | azureknight |
Uploaded | August 26, 2022 |
Rating | 3 |
Size | 2,513 Kb |
Views | 26,312 |
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 |
First Loading Animation | 2,886 Kb |
A Pen by Saysora | 2,253 Kb |
CSS Full Width Content Menu | 3,712 Kb |
Value vs Placeholder | 2,244 Kb |
Clean Card Layout | 3,654 Kb |
Flat Ui Rollover Buttons | 3,312 Kb |
CSS Tab Holder | 3,445 Kb |
Landscape Animation | 3,469 Kb |
Responsive Background | 2,168 Kb |
Life Mottos | 3,352 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 |
Toggle menu | Seyedi | 2,279 Kb |
Tooltip in table | Roine | 3,713 Kb |
Formations | Cantelope | 5,731 Kb |
Touch Carousel - last, no gaps. | Berkin | 4,332 Kb |
Drag in vanilla js using dotval math instead of translate | Paulq | 2,662 Kb |
Page Transitions in Backbone | Mikefowler | 3,691 Kb |
Pure CSS candle light animation by One element | Ksksoft | 2,193 Kb |
Navcube | Wbarlow | 4,775 Kb |
Responsive Advert | James_zedd | 2,354 Kb |
700 Synapses Per Second | Silentkrange | 2,138 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!