CSS3 Loader & Spinners - rasgane

Ini Cuma Material yang sering saya pakai.

• Results
• Code

<div class="BoxLoadingKu">
  <span class="LoadingKu"></span>
</div>

.BoxLoadingKu{width: 100%;height:100px;padding:10px;position:relative;display:flex;align-items:center;justify-content:center;color:#ccc;transition:0.3s linear}
span.LoadingKu{width:48px;height:48px;border-radius:50%;display:inline-block;border-top:3px solid #f23434;border-right:3px solid transparent;-webkit-animation:rotation 1s linear infinite;animation:rotation 1s linear infinite}
@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

Referensi : https://cssloaders.github.io/

• Results
• Code

<div class="BoxLoadingKu">
      <span class="LoadingKu_V2"></span>
    </div>

.BoxLoadingKu{width: 100%;height:100px;padding:10px;position:relative;display:flex;align-items:center;justify-content:center;color:#ccc;transition:0.3s linear}
span.LoadingKu_V2 {width:48px;height:48px;border:5px solid #FFF;border-bottom-color: #FF3D00;border-radius:50%;display:inline-block;box-sizing:border-box;animation:LoadingKu_V2 1s linear infinite}
@keyframes LoadingKu_V2{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

Referensi : https://cssloaders.github.io/

• Results
• Code

<div class="BoxLoadingKu">
  <span class="LoadingKu_V3"></span>
</div>

.BoxLoadingKu{width: 100%;height:100px;padding:10px;position:relative;display:flex;align-items:center;justify-content:center;color:#ccc;transition:0.3s linear}
span.LoadingKu_V3 {width:48px;height:48px;border:5px solid #FF3D00;border-bottom-color:transparent;border-radius:50%;display:inline-block;box-sizing:border-box;animation:LoadingKu_V3 1s linear infinite}
@keyframes LoadingKu_V3{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

Referensi : https://cssloaders.github.io/

• Results
• Code

<div class="BoxLoadingKu">
  <span class="LoadingKu_V4"></span>
</div>

.BoxLoadingKu{width: 100%;height:100px;padding:10px;position:relative;display:flex;align-items:center;justify-content:center;color:#ccc;transition:0.3s linear}
span.LoadingKu_V4 {color:#FF3D00;font-size:10px;width:1em;height:1em;border-radius:50%;position:relative;text-indent:-9999em;animation:mulShdSpin 1.3s infinite linear;transform:translateZ(0)}
@keyframes mulShdSpin{0%,100%{box-shadow:0 -3em 0 0.2em,2em -2em 0 0,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 0}12.5%{box-shadow:0 -3em 0 0,2em -2em 0 0.2em,3em 0 0 0,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}25%{box-shadow:0 -3em 0 -0.5em,2em -2em 0 0,3em 0 0 0.2em,2em 2em 0 0,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}37.5%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 0,2em 2em 0 0.2em,0 3em 0 0,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}50%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 0,0 3em 0 0.2em,-2em 2em 0 0,-3em 0 0 -1em,-2em -2em 0 -1em}62.5%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 0,-2em 2em 0 0.2em,-3em 0 0 0,-2em -2em 0 -1em}75%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 0,-3em 0 0 0.2em,-2em -2em 0 0}87.5%{box-shadow:0 -3em 0 0,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 0,-3em 0 0 0,-2em -2em 0 0.2em}}

Referensi : https://cssloaders.github.io/

• Results
• Code

<div class="BoxLoadingKu">
  <span class="LoadingKu_V5"></span>
</div>

.BoxLoadingKu{width: 100%;height:100px;padding:10px;position:relative;display:flex;align-items:center;justify-content:center;color:#ccc;transition:0.3s linear}
span.LoadingKu_V5{width:48px;height:48px;border-radius:50%;display:inline-block;border-top:4px solid #FFF;border-right:4px solid transparent;box-sizing:border-box;animation:LoadingKu_V5 1s linear infinite}
span.LoadingKu_V5::after{content:'';box-sizing:border-box;position:absolute;left:0;top:0;width:48px;height:48px;border-radius:50%;border-bottom:4px solid #FF3D00;border-left:4px solid transparent}
@keyframes LoadingKu_V5{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

Referensi : https://cssloaders.github.io/

• Results
• Code

<div class="BoxLoadingKu">
  <span class="LoadingKu_V6"></span>
</div>

.BoxLoadingKu{width: 100%;height:100px;padding:10px;position:relative;display:flex;align-items:center;justify-content:center;color:#ccc;transition:0.3s linear}
span.LoadingKu_V6 {width:48px;height:48px;border:5px solid;border-color:#FF3D00 transparent;border-radius:50%;display:inline-block;box-sizing:border-box;animation:LoadingKu_V6 1s linear infinite}
@keyframes LoadingKu_V6{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

Referensi : https://cssloaders.github.io/

Untuk desain lainya bisa langsung https://cssloaders.github.io