---
title: "Create Loader with Bootstrap"  
description: "Create Loader with Bootstrap"  
author: "Ethan Karla"  
published: 2021-07-28  
updated: 2021-07-28  
canonical: https://www.mindstick.com/forum/156609/create-loader-with-bootstrap  
category: "bootstrap"  
tags: ["bootstrap"]  
reading_time: 1 minute  

---

# Create Loader with Bootstrap

How to create a [loader](https://www.mindstick.com/forum/156549/css-loader) with Bootstrap? And how to create loader buttons with the help of [bootstrap classes](https://www.mindstick.com/forum/156617/collapsible-navbar-with-logo-with-the-help-of-bootstrap-classes).

## Replies

### Reply by Anonymous User

[Bootstrap](https://www.mindstick.com/articles/1555/image-viewer-using-bootstrap-carousel) loader are used to show the spinner while the content of the page hasn't successfully loaded.

Let's have an example to demonstrate how to use progress-animated bar in Bootstrap :

```
<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js'></script>
</head>
<body>
<div class='container'>
  <h2>Colored Spinners</h2>
  <p>Use any <strong>text color utilites</strong> to add a color to the spinner:</p>
  <div class='spinner-border text-muted'></div>
  <div class='spinner-border text-success'></div>
  <div class='spinner-border text-primary'></div>
  <div class='spinner-border text-danger'></div>
  <div class='spinner-border text-info'></div>
  <div class='spinner-border text-warning'></div>
  <div class='spinner-border text-light'></div>
  <div class='spinner-border text-secondary'></div>
  <div class='spinner-border text-dark'></div>
</div>
</body>
</html>
```

Hope this will help you.

Happy Coding!


---

Original Source: https://www.mindstick.com/forum/156609/create-loader-with-bootstrap

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
