BootStrap

<!DOCTYPR html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BootStrap</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <link rel="stylesheet" href="style.css"> <style> .container{ border: 5px solid #000; margin-bottom:3px; } </style> </head> <body> <div class="container"> <h2 class="py-3 text-center">Bootstrap Spinners Classes</h2> <div class="row py-5"> <div class="col"> <div class="spinner-border text-primary m-5 float-right"> <span class="sr-only">Loading..</span> </div> </div> </div> <div class="row py-5"> <div class="col"> <div class="spinner-border text-primary"> <span class="sr-only">Loading..</span> </div> <div class="spinner-border text-success"></div> <div class="spinner-border spinner-border-sm text-danger"></div> <div class="spinner-border text-info" style="width:80px;height: 80px;"></div> </div> </div> <div class="row py-5"> <div class="col"> <div class="spinner-grow text-primary"></div> <div class="spinner-grow text-success"></div> <div class="spinner-grow spinner-grow-sm text-danger"></div> </div> </div> <div class="row py-5"> <div class="col"> <button class="btn btn-primary" disabled> <span class="spinner-border spinner-border-sm"></span> Loading... </button> <button class="btn btn-primary" disabled> <span class="spinner-border spinner-border-sm"></span> </button> </div> </div> </div> </body> </html>