Ex No: 2 BOOTSTRAP SPINNER
Aim: To create a Unit Conversion page that uses bootstrap spinner.
Procedure
Step1: Create a folder “Ex2” to place the HTML files.
Step2: Create HTML file “index.html”.
Step3: Add Bootstap resource files (CSS, JS) and add necessary additional resource files in correct folders.
Step4: Use Bootstrap grid system classes "container", "row", "col", "form-group", "form-control", "spinner-border" to create the Unit Conversion page.
Source Code

index.html


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Spinner</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <style>
  #header{
    text-align:center;
    height: 100px;
    background-color: tan;
    padding: 10px; 
    border-radius: 10px 10px 0px 0px;
  }
  
  .container{
    background-color: #f8f9fa;
  }
  
  #spinner {
    display: none;
  }
  </style>
</head>
<body>
  <div class="row m-2">
    <div id="header" class="col-md-12">
      <h1>Unit Converter</h1>
    </div>
  </div>
  
  <div class="container mt-2">
    <div class="row justify-content-center">
    
      <div class="col-md-6">
        <div class="form-group">
          <label for="inputValue">Value</label>
          <input type="number" class="form-control" id="inputValue" required>
        </div>
        <div class="form-group">
          <label for="inputUnit">From</label>
          <select class="form-control" id="inputUnit">
            <option value="meters">Meters</option>
            <option value="kilometers">Kilometers</option>
            <option value="feet">Feet</option>
            <option value="miles">Miles</option>
          </select>
        </div>
		
        <div class="form-group">
          <label for="outputUnit">To</label>
          <select class="form-control" id="outputUnit">
            <option value="meters">Meters</option>
            <option value="kilometers">Kilometers</option>
            <option value="feet">Feet</option>
            <option value="miles">Miles</option>
          </select>
        </div>
        
        <button id="convert" class="btn btn-primary">Convert</button>
        <div class="text-center mt-3">
          <div class="spinner-border" id="spinner" role="status">
            <span class="sr-only">Loading...</span>
          </div>
        </div>
        <div id="result" class="text-center mt-3"></div>
      </div>
    </div>
  </div>
  
  <script src="js/jquery-3.5.0.min.js"></script>
  <script src="js/popper.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script>
  $(document).ready(function(){
    
	$("#convert").click(function(e){
      var value = parseFloat($("#inputValue").val());
      var inpUnit = $("#inputUnit").val();
      var outUnit = $("#outputUnit").val();
      var resultDiv = document.getElementById('result');
      
      $("#spinner").css("display", "inline-block");
      
      setTimeout(function() {
        var conversionRates = {meters: {meters: 1,kilometers: 0.001,feet: 3.28084,miles: 0.000621371},
                               kilometers: {meters: 1000,kilometers: 1,feet: 3280.84,miles: 0.621371},
                               feet: {meters: 0.3048,kilometers: 0.0003048,feet: 1,miles: 0.000189394},
                               miles: {meters: 1609.34,kilometers: 1.60934,feet: 5280,miles: 1} };
        var convertedValue = value * conversionRates[inpUnit][outUnit];
        $("#spinner").css("display", "none");
        $("#result").html(`<h3>${value} ${inpUnit} is equal to ${convertedValue.toFixed(2)} ${outUnit}</h3>`);
      }, 1000);
    });//End of Click Event    
  });//End of Document Ready function
  </script>
</body>
</html>
Result: Thus a Unit Conversion page that uses bootstrap spinner.