Bootstrap Tutorial - Mark large spinner icon








The following code shows how to mark large spinner icon.

Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
  href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<style type='text/css'>
section {<!--from w ww .  ja  va2 s  .  c  o m-->
  width: 200px;
  height: 200px;
  margin: 50px;
}

#overlay {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: rgba(255, 255, 255, 0.5);
}

#overlay i {
  position: absolute;
  top: 50%;
  left: 50%;
}

.spin-big {
  font-size: 50px;
  height: 50px;
  width: 50px;
  margin-top: -25px;
  margin-left: -25px;
}

.spin-normal {
  font-size: 35px;
  height: 35px;
  width: 35px;
  margin-top: -22.5px;
  margin-left: -22.5px;
}

.spin-small {
  font-size: 20px;
  height: 20px;
  width: 20px;
  margin-top: -10px;
  margin-left: -10px;
}
</style>
</head>
<body style='margin:30px'>
    <div id="overlay">
      <i class="fa fa-spinner fa-spin spin-big"></i>
    </div>
    Loading

</script>
</body>
</html>

Click to view the demo