Skip to content

Searcharticlesvideosblogsforumsinterview questionsarticles

Tech
Articles
Blogs
News
Videos
Interviews
Forums
Books
Events
- Jobs
- Stories

Article
Blog
Video
Ebook
Interview Question

Loading

Upcoming Events

23 NOV
AI Agents Conference 2026 - 3rd Edition

Our Training Programs

AI & Machine Learning
Mastering Large Language Models
Mastering Prompt Engineering
Certified Vibe Coder
Github Copilot Training
Generative AI for Beginners
n8n Automation & AI Agents Training

About Us Contact Us Privacy Policy Terms Brand Guidelines Partners C# Tutorials Consultants Ideas Report A Bug FAQs Sitemap Stories CSharp TV DB Talks Web3 Universe Jumpstart Blockchain

©2026 C# Corner.

All contents are copyright of their authors.

How to create loader in html

Home
Forums
Web Development

How to create loader in html

Ar Vhin

Ar Vhin

8yAsked May 10, 2018, 4:11 AM845Web Development

How to create stylish loader using css, html

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sign in to answer this question

It is the same account you read, post and publish with — and you will come straight back to this page.

Sign in Create an account

Rajesh Gami8y ago
Accepted answer
refer this links

https://www.w3schools.com/howto/howto_css_loader.asp

https://loading.io/

For loading button:
https://www.w3schools.com/howto/howto_css_loading_buttons.asp
Vijayakumar Mani8y ago
Hi Use this following codes.. and get a simple loader

Html

Loading...

css
.loader,
.loader:after {
border-radius: 50%;
width: 10em;
height: 10em;
}
.loader {
margin: 60px auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(255, 255, 255, 0.2);
border-right: 1.1em solid rgba(255, 255, 255, 0.2);
border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
border-left: 1.1em solid #ffffff;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}