--- title: "How to create a loader using CSS?" description: "@keyframe is the CSS property to use to animate the object on the HTML page. Creating a loader using CSS keyframe property is pretty interesting." author: "Ashutosh Patel" published: 2024-06-07 updated: 2024-06-07 canonical: https://www.mindstick.com/blog/304327/how-to-create-a-loader-using-css category: "css-css3" tags: ["css-css3", "css", "css styling", "css loader"] reading_time: 2 minutes --- # How to create a loader using CSS? ### CSS Loader You can create a [loader](https://www.mindstick.com/forum/156609/create-loader-with-bootstrap) using CSS by taking advantage of keyframe animations. ## Example- Here is a basic example to demonstrate the loader using CSS, ```html CSS Loader Example

Here are creating a loader using CSS

``` ## In the above example - We create a `
` element with a class called "**loader**" to represent the loader. - We use **CSS** to style the loader, set its **boundaries**, **border-radius**, **width** and **height** to create a circle. - To further [rotate](https://answers.mindstick.com/qa/34548/what-is-rotate-indefinitely) the loader, we use the "spin" keyframe [animation](https://www.mindstick.com/articles/13040/seven-helpful-tips-to-start-and-grow-an-animation-video-company). The animation rotates the loader endlessly from 0 degrees to 360 degrees for 1 second. - The `margin: auto;` The [property](https://www.mindstick.com/blog/205/property-notification-in-c-sharp) centers the loader directly in its container. **[Output](https://www.mindstick.com/forum/161319/how-does-the-print-function-handle-output-in-python)-** ![How to create a loader using CSS?](https://www.mindstick.com/blogs/be0e55c6-4067-48a8-9682-e11ce1327a58/images/2ad725c3-0d5d-4d0d-8920-edcdf25bad99.jpg) You can further customize the loader by customizing CSS preferences such as size, color, animation [duration](https://answers.mindstick.com/qa/45301/what-is-a-short-duration-discussion), and [facilitation](https://answers.mindstick.com/qa/62229/who-inaugurated-the-indian-airforce-facilitation-cum-publicity-pavilion-in-new-delhi) [functions](https://www.mindstick.com/forum/160140/explain-the-role-of-functions-as-a-service-faas-in-serverless-computing) to suit your [design](https://www.mindstick.com/articles/12279/interior-design-and-furniture-store-wordpress-theme) needs. Additionally, you can add different shapes or animation effects to create different style loaders. **Also, Read:** [How to implement the List group using CSS3 and HTML?](https://www.mindstick.com/blog/304325/how-to-implement-the-list-group-using-css3-and-html) --- Original Source: https://www.mindstick.com/blog/304327/how-to-create-a-loader-using-css Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.