forum

home / developersection / forums / create loader with bootstrap

Ask Question

Create Loader with Bootstrap

Ethan Karla 209 28-Jul-2021

How to create a loader with Bootstrap? And how to create loader buttons with the help of bootstrap classes.

bootstrap

Updated on 28-Jul-2021

Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

Can you answer this question?

Answer

1 Answers

Anonymous User

03-Aug-2021

Bootstrap 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!

forum

Create Loader with Bootstrap

Ethan Karla

Can you answer this question?

1 Answers

Liked By