css loading

1.loader {
2  border: 16px solid #f3f3f3; /* Light grey */
3  border-top: 16px solid #3498db; /* Blue */
4  border-radius: 50%;
5  width: 120px;
6  height: 120px;
7  animation: spin 2s linear infinite;
8}
9
10@keyframes spin {
11  0% { transform: rotate(0deg); }
12  100% { transform: rotate(360deg); }
13}
14
15
16<div class="loader"></div>
17

1.Overlay {
2  position: fixed;
3  top: 0;
4  left: 0;
5  bottom: 0;
6  right: 0;
7  .LoadingContainer {
8    width: 100%;
9    height: 100%;
10    position: relative;
11    display: flex;
12    justify-content: center;
13    align-items: center;
14    .Spinner {
15      color: #007bff;
16    }
17  }
18}
19

1module.exports = {
2  module: {
3    rules: [
4      {
5        test: /\.css$/i,
6        use: ['to-string-loader', 'css-loader'],
7      },
8    ],
9  },
10};

1module.exports = {
2  module: {
3    rules: [
4      {
5        test: /\.css$/i,
6        use: [
7          'handlebars-loader', // handlebars loader expects raw resource string
8          'extract-loader',
9          'css-loader',
10        ],
11      },
12    ],
13  },
14};

1$(document).ready(function() {
2 
3    setTimeout(function(){
4        $('body').addClass('loaded');
5        $('h1').css('color','#222222');
6    }, 3000);
7 
8});
9