Create an Account

It's free and you have access to premium codes!

Password must be a minimum length of 8, with at least one uppercase, one lowercase, one number, and one special character.

Login

Welcome back! Please login to your account.

Recover Account

Don't worry, we'll send you a message to help you to recover your acount.

Message Received!

We will get back to you as soon as possible.

Account Created!

Please check your email for instructions to activate your account.

All
Hello
Popular Sites
JavaScript Best Codes
Html Free Codes
Html5 Free Codes
Php Best Codes
Developer Codes
Free Frontend
Social Media
Twitter
Instagram
Support
Contact Us
About Html Best Codes
Not a member? Sign Up

Rotating Loading Rings

Written by @kerixa 24 May 2020

When you need that visitors wait, you should entertain them. One way is to build a beautiful loading effect. Here two rings are designed which contain a loading message and rotate as long as you want!

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Dosis:400,600&amp;display=swap'>
<style>
* {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  font-size: calc(16px + (24 - 16)*(100vw - 320px)/ (1280 - 320));
}

body, .preloader {
  display: flex;
}

body {
  background: #000;
  color: #3df1f1;
  font: 1em Dosis, sans-serif;
  height: 100vh;
  line-height: 1.5;
  perspective: 40em;
}

.preloader {
  animation: tiltSpin 8s linear infinite;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: auto;
  width: 17em;
  height: 17em;
}
.preloader, .preloader__ring {
  transform-style: preserve-3d;
}
.preloader__ring {
  animation-name: spin;
  animation-duration: 4s;
  animation-timing-function: inherit;
  animation-iteration-count: inherit;
  font-size: 2em;
  position: relative;
  height: 3rem;
  width: 1.5rem;
}
.preloader__ring:nth-child(even) {
  animation-direction: reverse;
}
.preloader__sector {
  font-weight: 600;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  text-transform: uppercase;
  transform: translateZ(7rem);
}
.preloader__sector, .preloader__sector:empty:before {
  display: inline-block;
  width: 100%;
  height: 100%;
}
.preloader__sector:empty:before {
  background: linear-gradient(transparent 45%, currentColor 45% 55%, transparent 55%);
  content: "";
}
.preloader__sector:nth-child(2) {
  transform: rotateY(12deg) translateZ(7rem);
}
.preloader__sector:nth-child(3) {
  transform: rotateY(24deg) translateZ(7rem);
}
.preloader__sector:nth-child(4) {
  transform: rotateY(36deg) translateZ(7rem);
}
.preloader__sector:nth-child(5) {
  transform: rotateY(48deg) translateZ(7rem);
}
.preloader__sector:nth-child(6) {
  transform: rotateY(60deg) translateZ(7rem);
}
.preloader__sector:nth-child(7) {
  transform: rotateY(72deg) translateZ(7rem);
}
.preloader__sector:nth-child(8) {
  transform: rotateY(84deg) translateZ(7rem);
}
.preloader__sector:nth-child(9) {
  transform: rotateY(96deg) translateZ(7rem);
}
.preloader__sector:nth-child(10) {
  transform: rotateY(108deg) translateZ(7rem);
}
.preloader__sector:nth-child(11) {
  transform: rotateY(120deg) translateZ(7rem);
}
.preloader__sector:nth-child(12) {
  transform: rotateY(132deg) translateZ(7rem);
}
.preloader__sector:nth-child(13) {
  transform: rotateY(144deg) translateZ(7rem);
}
.preloader__sector:nth-child(14) {
  transform: rotateY(156deg) translateZ(7rem);
}
.preloader__sector:nth-child(15) {
  transform: rotateY(168deg) translateZ(7rem);
}
.preloader__sector:nth-child(16) {
  transform: rotateY(180deg) translateZ(7rem);
}
.preloader__sector:nth-child(17) {
  transform: rotateY(192deg) translateZ(7rem);
}
.preloader__sector:nth-child(18) {
  transform: rotateY(204deg) translateZ(7rem);
}
.preloader__sector:nth-child(19) {
  transform: rotateY(216deg) translateZ(7rem);
}
.preloader__sector:nth-child(20) {
  transform: rotateY(228deg) translateZ(7rem);
}
.preloader__sector:nth-child(21) {
  transform: rotateY(240deg) translateZ(7rem);
}
.preloader__sector:nth-child(22) {
  transform: rotateY(252deg) translateZ(7rem);
}
.preloader__sector:nth-child(23) {
  transform: rotateY(264deg) translateZ(7rem);
}
.preloader__sector:nth-child(24) {
  transform: rotateY(276deg) translateZ(7rem);
}
.preloader__sector:nth-child(25) {
  transform: rotateY(288deg) translateZ(7rem);
}
.preloader__sector:nth-child(26) {
  transform: rotateY(300deg) translateZ(7rem);
}
.preloader__sector:nth-child(27) {
  transform: rotateY(312deg) translateZ(7rem);
}
.preloader__sector:nth-child(28) {
  transform: rotateY(324deg) translateZ(7rem);
}
.preloader__sector:nth-child(29) {
  transform: rotateY(336deg) translateZ(7rem);
}
.preloader__sector:nth-child(30) {
  transform: rotateY(348deg) translateZ(7rem);
}

/* Animations */
@keyframes tiltSpin {
  from {
    transform: rotateY(0) rotateX(30deg);
  }
  to {
    transform: rotateY(1turn) rotateX(30deg);
  }
}
@keyframes spin {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(1turn);
  }
}
</style>
<div class="preloader">
<div class="preloader__ring">
<div class="preloader__sector">L</div>
<div class="preloader__sector">o</div>
<div class="preloader__sector">a</div>
<div class="preloader__sector">d</div>
<div class="preloader__sector">i</div>
<div class="preloader__sector">n</div>
<div class="preloader__sector">g</div>
<div class="preloader__sector">.</div>
<div class="preloader__sector">.</div>
<div class="preloader__sector">.</div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
</div>
<div class="preloader__ring">
<div class="preloader__sector">L</div>
<div class="preloader__sector">o</div>
<div class="preloader__sector">a</div>
<div class="preloader__sector">d</div>
<div class="preloader__sector">i</div>
<div class="preloader__sector">n</div>
<div class="preloader__sector">g</div>
<div class="preloader__sector">.</div>
<div class="preloader__sector">.</div>
<div class="preloader__sector">.</div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
<div class="preloader__sector"></div>
</div>
</div><a target='_blank' href='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300
TRENDING POST
1
Neomorphism Button with Hover Effect
2
Vanishing Spinning Ball Loader
3
Yet Another Circle Spinning Loader
4
Oval Ticker Spinner Loader
5
Eclipse Spinner Loader
VISITORS
Online Users: 12
Recent Members: Muzamiru, TheDewalt, sahjahan, fk khan, Proper
advertisement 2