Bootstrap Snippet loading circle using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="circle">
  <div class="loader">
    <div class="loader">
        <div class="loader">
           <div class="loader">
           </div>
        </div>
    </div>
  </div>
</div> 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
html,body{
       width: 100%;
       height: 100%;
}
 body {
     background: #0d161f;
}
#circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 150px;
    height: 150px;  
}
.loader {
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    border: 8px solid #162534;
    border-top: 8px solid #09f;
    border-radius: 50%;
    animation: rotate 5s linear infinite;
}
@keyframes rotate {
100% {transform: rotate(360deg);}
} 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"loading circle"
Bootstrap 4.1.1 Snippet by akshaymodh

Related: See More

Questions / Comments:

"loading circle" Bootstrap 4.1.1 Snippet by akshaymodh

Related: See More

Questions / Comments:

"loading circle"
Bootstrap 4.1.1 Snippet by akshaymodh