試圖添加只有HTML/CSS的預加載器

Question

現在，我非常謙虛。我試圖將這個主題添加到Skype styled preloader中，但我不知道如何調用該函數。我覺得它需要Javascript，但它不在網站上。請&謝謝未來的參考

<!-- HTML FILES --> 
    <div class="table"> 
     <div class="table--cell"> 
     <div class="loader"> 
      <span class="loader--ball loader--ball__first"></span> 
      <span class="loader--ball"></span> 
      <span class="loader--ball"></span> 
      <span class="loader--ball"></span> 
     </div> 
     </div> 
    </div> 

<!-- CSS FILE --> 
    html body{ 
     background-color:#2980b9; 
     width:100%; 
     height:100vh; 
    } 
    .table{ 
     width:100%; 
     height:100%; 
     display:table; 
     .table--cell{ 
     display:table-cell; 
     vertical-align:middle; 
     text-align:center; 
     } 
    } 
    .loader{ 
     display:inline-block; 
     width:120px; 
     height:120px; 
     .loader--ball{ 
     position:absolute; 
     left:0; 
     right:0; 
     margin:0 auto; 
     width:10px; 
     height:10px; 
     border-radius:50%; 
     background:#ecf0f1; 
     transform-origin:0 60px; 
     display:block; 
     animation: 2s rotate cubic-bezier(0.775, 0.030, 0.350, 1.000) infinite; 
      @for $i from 1 through 4 { 
      &:nth-child(#{$i}) { 
      animation-delay:(0.1s * $i); 
      } 
     } 
     } 
    } 

    @keyframes rotate { 
     0% { transform: rotate(0deg); } 
     100% { transform: rotate(360deg); } 
    } 

    .loader--ball:first-child{ 
     background:none; 
    } 
    .loader--ball__first:before{ 
    content:''; 
    width:10px; 
    height:10px; 
     position:absolute; 
     z-index:10; 
     top:0; 
     bottom:0; 
     background:#ecf0f1; 
     display:block; 
     border-radius:50%; 
    animation:2s grow cubic-bezier(0.775, 0.035, 0.310, 1.000) infinite; 
    } 

    @keyframes grow { 
     0%, 
     10% { 
      width:20px; 
      height:20px; 
      top:-2px; 
      left:-5px; 
      } 

     50% { 
     width:10px; 
     height:10px; 
     left:-5px; 
     } 
     85%, 100% { 
     width:20px; 
     height:20px; 
     top:-2px; 
     left:-5px; 
     } 
    } 

Answer 1

該示例是使用SASS（scss）。如果你沒有使用Sass，你需要編譯的CSS。 Example with compiled CSS

編譯CSS：

html body { 
    background-color: #2980b9; 
    width: 100%; 
    height: 100vh; 
} 

.table { 
    width: 100%; 
    height: 100%; 
    display: table; 
} 
.table .table--cell { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 

.loader { 
    display: inline-block; 
    width: 120px; 
    height: 120px; 
} 
.loader .loader--ball { 
    position: absolute; 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
    width: 10px; 
    height: 10px; 
    border-radius: 50%; 
    background: #ecf0f1; 
    -webkit-transform-origin: 0 60px; 
     -ms-transform-origin: 0 60px; 
      transform-origin: 0 60px; 
    display: block; 
    -webkit-animation: 2s rotate cubic-bezier(0.775, 0.03, 0.35, 1) infinite; 
      animation: 2s rotate cubic-bezier(0.775, 0.03, 0.35, 1) infinite; 
} 
.loader .loader--ball:nth-child(1) { 
    -webkit-animation-delay: 0.1s; 
      animation-delay: 0.1s; 
} 
.loader .loader--ball:nth-child(2) { 
    -webkit-animation-delay: 0.2s; 
      animation-delay: 0.2s; 
} 
.loader .loader--ball:nth-child(3) { 
    -webkit-animation-delay: 0.3s; 
      animation-delay: 0.3s; 
} 
.loader .loader--ball:nth-child(4) { 
    -webkit-animation-delay: 0.4s; 
      animation-delay: 0.4s; 
} 

@-webkit-keyframes rotate { 
    0% { 
    -webkit-transform: rotate(0deg); 
      transform: rotate(0deg); 
    } 
    100% { 
    -webkit-transform: rotate(360deg); 
      transform: rotate(360deg); 
    } 
} 

@keyframes rotate { 
    0% { 
    -webkit-transform: rotate(0deg); 
      transform: rotate(0deg); 
    } 
    100% { 
    -webkit-transform: rotate(360deg); 
      transform: rotate(360deg); 
    } 
} 
.loader--ball:first-child { 
    background: none; 
} 

.loader--ball__first:before { 
    content: ''; 
    width: 10px; 
    height: 10px; 
    position: absolute; 
    z-index: 10; 
    top: 0; 
    bottom: 0; 
    background: #ecf0f1; 
    display: block; 
    border-radius: 50%; 
    -webkit-animation: 2s grow cubic-bezier(0.775, 0.035, 0.31, 1) infinite; 
      animation: 2s grow cubic-bezier(0.775, 0.035, 0.31, 1) infinite; 
} 

@-webkit-keyframes grow { 
    0%, 
    10% { 
    width: 20px; 
    height: 20px; 
    top: -2px; 
    left: -5px; 
    } 
    50% { 
    width: 10px; 
    height: 10px; 
    left: -5px; 
    } 
    85%, 100% { 
    width: 20px; 
    height: 20px; 
    top: -2px; 
    left: -5px; 
    } 
} 

@keyframes grow { 
    0%, 
    10% { 
    width: 20px; 
    height: 20px; 
    top: -2px; 
    left: -5px; 
    } 
    50% { 
    width: 10px; 
    height: 10px; 
    left: -5px; 
    } 
    85%, 100% { 
    width: 20px; 
    height: 20px; 
    top: -2px; 
    left: -5px; 
    } 
}