Showing the loading process is one of the best techniques to make your visitor stay on your website and wait for the process to be finished. Animated loading animation on a webpage specifies that the process is being executed and that makes the user don't go back from your website.
In this article, you will find 100+ CSS animated loaders that can help you to make your website look fantastic and you can use these CSS animated loaders on your website to attract your visitors and get their attention.
These CSS animated loaders are in different styles so that you can choose anyone and add it to your website. So below is the list of CSS animated loaders with their preview on top of them.
HTML and CSS code for loader can only be used to create loader but if you want to align it on your web page in this centre then you have to learn about flex boxes and how to centre any element with or without flexbox.
As always I first think about you that's why I have a quick example for you that can lead you to centre an element on a web page and in this example I have used one of the loaders to align it is in the centre of the web page.
The highlighted HTML and CSS code is for loader which you can replace with your own loader code.
In this article, you will find 100+ CSS animated loaders that can help you to make your website look fantastic and you can use these CSS animated loaders on your website to attract your visitors and get their attention.
These CSS animated loaders are in different styles so that you can choose anyone and add it to your website. So below is the list of CSS animated loaders with their preview on top of them.
HTML and CSS code for loader can only be used to create loader but if you want to align it on your web page in this centre then you have to learn about flex boxes and how to centre any element with or without flexbox.
As always I first think about you that's why I have a quick example for you that can lead you to centre an element on a web page and in this example I have used one of the loaders to align it is in the centre of the web page.
The highlighted HTML and CSS code is for loader which you can replace with your own loader code.
Quick Example To Center Loader Vertically & Horizontally:
<div class="center">
<span class="loader"></span>
</div>
<style>
html,
body {
height: 100%;
}
body {
margin: 0;
background: rgba(0, 0, 0, 0.8);
}
.center {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.loader {
width: 48px;
height: 48px;
border: 5px solid #fff;
border-bottom-color: #ff3d00;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
You can replace marked code with the code of your loader that you can copy from the examples below. CSS Animated Loaders:
These are the CSS animated loaders.Example 1:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
border: 5px solid #FFF;
border-bottom-color: #FF3D00;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
Example 2:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
border: 3px solid #FFF;
border-radius: 50%;
display: inline-block;
position: relative;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
.loader::after {
content: '';
box-sizing: border-box;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
border-radius: 50%;
border: 3px solid transparent;
border-bottom-color: #FF3D00;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
Example 3:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
border: 3px solid #FFF;
border-radius: 50%;
display: inline-block;
position: relative;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
.loader::after {
content: '';
box-sizing: border-box;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 56px;
height: 56px;
border-radius: 50%;
border: 3px solid transparent;
border-bottom-color: #FF3D00;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<style>
Example 4:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
border: 3px solid #FFF;
border-radius: 50%;
display: inline-block;
position: relative;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
.loader::after {
content: '';
box-sizing: border-box;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
border-radius: 50%;
border: 3px solid;
border-color: #FF3D00 transparent;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
Example 5:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
border: 3px solid #FFF;
border-radius: 50%;
display: inline-block;
position: relative;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
.loader::after {
content: '';
box-sizing: border-box;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 56px;
height: 56px;
border-radius: 50%;
border: 3px solid;
border-color: #FF3D00 transparent;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
Example 6:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
border: 2px solid #FFF;
border-radius: 50%;
display: inline-block;
position: relative;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
.loader::after,
.loader::before {
content: '';
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
background: #FF3D00;
width: 6px;
height: 6px;
transform: translate(150%, 150%);
border-radius: 50%;
}
.loader::before {
left: auto;
top: auto;
right: 0;
bottom: 0;
transform: translate(-150%, -150%);
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
Example 7:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
border: 2px solid #FFF;
border-radius: 50%;
display: inline-block;
position: relative;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
.loader::after,
.loader::before {
content: '';
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
background: #FF3D00;
width: 6px;
height: 6px;
border-radius: 50%;
}
.loader::before {
left: auto;
top: auto;
right: 0;
bottom: 0;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
Example 8:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
border: 3px solid #FFF;
border-radius: 50%;
display: inline-block;
position: relative;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
.loader::after {
content: '';
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
background: #FF3D00;
width: 16px;
height: 16px;
transform: translate(-50%, 50%);
border-radius: 50%;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
Example 9:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
border-radius: 50%;
display: inline-block;
position: relative;
border: 2px solid #FF3D00;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
.loader::after {
content: '';
box-sizing: border-box;
position: absolute;
left: 4px;
top: 4px;
border: 2px solid #FFF;
width: 12px;
height: 12px;
border-radius: 50%;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
Example 10:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
border-radius: 50%;
display: inline-block;
position: relative;
border: 3px solid;
border-color: #FFF #FFF transparent;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
.loader::after {
content: '';
box-sizing: border-box;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
border: 3px solid;
border-color: transparent #FF3D00 #FF3D00;
width: 24px;
height: 24px;
border-radius: 50%;
animation: rotationBack 0.5s linear infinite;
transform-origin: center center;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotationBack {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
</style>
Example 11:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
border-radius: 50%;
display: inline-block;
position: relative;
border: 3px solid;
border-color: #FFF #FFF transparent transparent;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
.loader::after,
.loader::before {
content: '';
box-sizing: border-box;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
border: 3px solid;
border-color: transparent transparent #FF3D00 #FF3D00;
width: 40px;
height: 40px;
border-radius: 50%;
box-sizing: border-box;
animation: rotationBack 0.5s linear infinite;
transform-origin: center center;
}
.loader::before {
width: 32px;
height: 32px;
border-color: #FFF #FFF transparent transparent;
animation: rotation 1.5s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotationBack {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
</style>
Example 12:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
border: 3px dotted #FFF;
border-style: solid solid dotted dotted;
border-radius: 50%;
display: inline-block;
position: relative;
box-sizing: border-box;
animation: rotation 2s linear infinite;
}
.loader::after {
content: '';
box-sizing: border-box;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
border: 3px dotted #FF3D00;
border-style: solid solid dotted;
width: 24px;
height: 24px;
border-radius: 50%;
animation: rotationBack 1s linear infinite;
transform-origin: center center;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotationBack {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
</style>
Example 13:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
border: 2px solid #FFF;
border-radius: 50%;
display: inline-block;
position: relative;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
.loader::after {
content: '';
box-sizing: border-box;
position: absolute;
left: 50%;
top: 0;
background: #FF3D00;
width: 3px;
height: 24px;
transform: translateX(-50%);
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
Example 14:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
display: inline-block;
position: relative;
}
.loader::after,
.loader::before {
content: '';
box-sizing: border-box;
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid #FFF;
position: absolute;
left: 0;
top: 0;
animation: animloader 2s linear infinite;
}
.loader::after {
animation-delay: 1s;
}
@keyframes animloader {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}
</style>
Example 15:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
border: 5px dotted #FFF;
border-radius: 50%;
display: inline-block;
position: relative;
box-sizing: border-box;
animation: rotation 2s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
Example 16:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
border-radius: 50%;
display: inline-block;
position: relative;
background: linear-gradient(0deg, rgba(255, 61, 0, 0.2) 33%, #ff3d00 100%);
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
.loader::after {
content: '';
box-sizing: border-box;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: #263238;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
Example 17:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
border-radius: 50%;
display: inline-block;
border-top: 3px solid #FFF;
border-right: 3px solid transparent;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
Example 18:
<span class="loader"></span>
<style>
.loader {
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: rotation 1s linear infinite;
}
.loader::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 rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
Example 19:
<span class="loader"></span>
<style>
.loader {
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: rotation 1s linear infinite;
}
.loader::after {
content: '';
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
width: 48px;
height: 48px;
border-radius: 50%;
border-left: 4px solid #FF3D00;
border-bottom: 4px solid transparent;
animation: rotation 0.5s linear infinite reverse;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
Example 20:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
border: 5px solid;
border-color: #FF3D00 transparent;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
Example 21:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
border-radius: 50%;
display: inline-block;
position: relative;
border: 10px solid;
border-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.5);
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
Example 22:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
border-radius: 50%;
display: inline-block;
position: relative;
border: 10px solid;
box-sizing: border-box;
animation: animloader 1s linear infinite alternate;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes animloader {
0% {
border-color: white rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
}
33% {
border-color: white white rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
}
66% {
border-color: white white white rgba(255, 255, 255, 0);
}
100% {
border-color: white white white white;
}
}
</style>
Example 23:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
border: 3px solid #FFF;
border-bottom-color: transparent;
border-radius: 50%;
display: inline-block;
position: relative;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
.loader::after {
content: '';
position: absolute;
box-sizing: border-box;
left: 20px;
top: 31px;
border: 10px solid transparent;
border-right-color: #FFF;
transform: rotate(-40deg);
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
Example 24:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
border-width: 3px;
border-style: dashed solid solid dotted;
border-color: #FF3D00 #FF3D00 transparent #FF3D00;
border-radius: 50%;
display: inline-block;
position: relative;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
.loader::after {
content: '';
box-sizing: border-box;
position: absolute;
left: 20px;
top: 31px;
border: 10px solid transparent;
border-right-color: #FF3D00;
transform: rotate(-40deg);
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
Example 25:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
background: #FFF;
display: inline-block;
border-radius: 50%;
box-sizing: border-box;
animation: animloader 1s ease-in infinite;
}
@keyframes animloader {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}
</style>
Example 26:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
display: inline-block;
position: relative;
}
.loader::after,
.loader::before {
content: '';
box-sizing: border-box;
width: 48px;
height: 48px;
border-radius: 50%;
background: #FFF;
position: absolute;
left: 0;
top: 0;
animation: animloader 2s linear infinite;
}
.loader::after {
animation-delay: 1s;
}
@keyframes animloader {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}
</style>
Example 27:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
display: inline-block;
position: relative;
}
.loader::after,
.loader::before {
content: '';
width: 48px;
height: 48px;
border-radius: 50%;
background: #FFF;
position: absolute;
left: 0;
top: 0;
box-sizing: border-box;
animation: animloader 2s ease-in-out infinite;
}
.loader::after {
animation-delay: 1s;
}
@keyframes animloader {
0%, 100% {
transform: scale(0);
opacity: 1;
}
50% {
transform: scale(1);
opacity: 0;
}
}
</style>
Example 28:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: animloader 1s linear infinite;
}
@keyframes animloader {
0% {
box-shadow: -72px 0 #FFF inset;
}
100% {
box-shadow: 48px 0 #FFF inset;
}
}
</style>
Example 29:
<span class="loader"></span>
<style>
.loader {
border: 24px solid #FFF;
border-bottom-color: #FF3D00;
border-radius: 50%;
display: inline-block;
position: relative;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
Example 30:
<span class="loader"></span>
<style>
.loader {
border: 2px solid #FFF;
width: 48px;
height: 48px;
background: #FF3D00;
border-radius: 50%;
display: inline-block;
position: relative;
box-sizing: border-box;
animation: rotation 2s linear infinite;
}
.loader::after {
content: '';
box-sizing: border-box;
position: absolute;
left: 50%;
top: 50%;
border: 24px solid;
border-color: transparent #FFF;
border-radius: 50%;
transform: translate(-50%, -50%);
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
Example 31:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
background: #FFF;
border-radius: 50%;
display: inline-block;
position: relative;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
.loader::after {
content: '';
box-sizing: border-box;
position: absolute;
left: 6px;
top: 10px;
width: 12px;
height: 12px;
color: #FF3D00;
background: currentColor;
border-radius: 50%;
box-shadow: 25px 2px, 10px 22px;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
Example 32:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
border: 4px solid;
background: rgba(255, 255, 255, 0.2);
border-color: transparent #FFF #FFF transparent;
border-radius: 50%;
display: inline-block;
position: relative;
box-sizing: border-box;
animation: rotation 1s ease-in-out infinite;
}
.loader::after {
content: '';
box-sizing: border-box;
position: absolute;
left: 50%;
top: 50%;
border: 12px solid;
border-color: transparent #FF3D00 #FF3D00 transparent;
transform: translate(-50%, -50%);
border-radius: 50%;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
Example 33:
<span class="loader"></span>
<style>
.loader {
border: 2px solid;
border-color: transparent #FFF;
width: 48px;
height: 48px;
border-radius: 50%;
display: inline-block;
position: relative;
box-sizing: border-box;
animation: rotation 2s linear infinite;
}
.loader::after {
content: '';
box-sizing: border-box;
position: absolute;
left: 50%;
top: 50%;
border: 24px solid;
border-color: transparent rgba(255, 255, 255, 0.15);
border-radius: 50%;
transform: translate(-50%, -50%);
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
Example 34:
<span class="loader"></span>
<style>
.loader {
border: 24px solid;
border-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.5);
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: animloader 1s linear infinite;
}
@keyframes animloader {
0% {
border-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.75);
}
33% {
border-color: rgba(255, 255, 255, 0.75) rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35);
}
66% {
border-color: rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.75) rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25);
}
100% {
border-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.75) rgba(255, 255, 255, 0.15);
}
}
</style>
Example 35:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
border-radius: 50%;
display: block;
margin:15px auto;
position: relative;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
.loader::after,
.loader::before {
content: '';
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
background: #FF3D00;
width: 16px;
height: 16px;
transform: translate(-50%, 50%);
border-radius: 50%;
}
.loader::before {
left: auto;
right: 0;
background: #FFF;
transform: translate(50%, 100%);
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
Example 36:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
border-radius: 50%;
display: block;
margin:15px auto;
position: relative;
box-sizing: border-box;
animation: zeroRotation 1s linear infinite alternate;
}
.loader::after,
.loader::before {
content: '';
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
background: #FF3D00;
width: 16px;
height: 16px;
transform: translate(-50%, 50%);
border-radius: 50%;
}
.loader::before {
left: auto;
right: 0;
transform: translate(50%, 100%);
}
@keyframes zeroRotation {
0% {
transform: scale(1) rotate(0deg);
}
100% {
transform: scale(0) rotate(360deg);
}
}
</style>
Example 37:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
display: block;
margin:15px auto;
position: relative;
color: #FFF;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
.loader::after,
.loader::before {
content: '';
box-sizing: border-box;
position: absolute;
width: 24px;
height: 24px;
top: 0;
background-color: #FFF;
border-radius: 50%;
animation: scale50 1s infinite ease-in-out;
}
.loader::before {
top: auto;
bottom: 0;
background-color: #FF3D00;
animation-delay: 0.5s;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes scale50 {
0%, 100% {
transform: scale(0);
}
50% {
transform: scale(1);
}
}
</style>
Example 38:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
display: block;
margin:15px auto;
position: relative;
color: #FFF;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
.loader::after,
.loader::before {
content: '';
box-sizing: border-box;
position: absolute;
width: 24px;
height: 24px;
top: 50%;
left: 50%;
transform: scale(0.5) translate(0, 0);
background-color: #FFF;
border-radius: 50%;
animation: animloader 1s infinite ease-in-out;
}
.loader::before {
background-color: #FF3D00;
transform: scale(0.5) translate(-48px, -48px);
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes animloader {
50% {
transform: scale(1) translate(-50%, -50%);
}
}
</style>
Example 39:
<span class="loader"></span>
<style>
.loader {
width: 16px;
height: 16px;
border-radius: 50%;
display: block;
margin:15px auto;
position: relative;
background: #FFF;
box-sizing: border-box;
animation: shadowExpandX 2s linear infinite alternate;
}
@keyframes shadowExpandX {
0% {
box-shadow: 0 0, 0 0;
color: rgba(255, 255, 255, 0.2);
}
100% {
box-shadow: -24px 0, 24px 0;
color: rgba(255, 255, 255, 0.8);
}
}
</style>
Example 40:
<span class="loader"></span>
<style>
.loader {
width: 16px;
height: 16px;
border-radius: 50%;
display: block;
margin:15px auto;
position: relative;
background: #FFF;
box-shadow: -24px 0 #FFF, 24px 0 #FFF;
box-sizing: border-box;
animation: shadowPulse 2s linear infinite;
}
@keyframes shadowPulse {
33% {
background: #FFF;
box-shadow: -24px 0 #FF3D00, 24px 0 #FFF;
}
66% {
background: #FF3D00;
box-shadow: -24px 0 #FFF, 24px 0 #FFF;
}
100% {
background: #FFF;
box-shadow: -24px 0 #FFF, 24px 0 #FF3D00;
}
}
</style>
Example 41:
<span class="loader"></span>
<style>
.loader {
width: 16px;
height: 16px;
border-radius: 50%;
display: block;
margin:15px auto;
position: relative;
background: #FF3D00;
color: #FFF;
box-shadow: -24px 0, 24px 0;
box-sizing: border-box;
animation: rotation 2s ease-in-out infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
Example 42:
<span class="loader"></span>
<style>
.loader {
width: 12px;
height: 12px;
border-radius: 50%;
display: block;
margin:15px auto;
position: relative;
color: #FFF;
box-sizing: border-box;
animation: animloader 1s linear infinite alternate;
}
@keyframes animloader {
0% {
box-shadow: -38px -6px, -14px 6px, 14px -6px;
}
33% {
box-shadow: -38px 6px, -14px -6px, 14px 6px;
}
66% {
box-shadow: -38px -6px, -14px 6px, 14px -6px;
}
100% {
box-shadow: -38px 6px, -14px -6px, 14px 6px;
}
}
</style>
Example 43:
<span class="loader"></span>
<style>
.loader {
width: 10px;
height: 10px;
border-radius: 50%;
display: block;
margin:15px auto;
position: relative;
color: #FFF;
left: -100px;
box-sizing: border-box;
animation: shadowRolling 2s linear infinite;
}
@keyframes shadowRolling {
0% {
box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
}
12% {
box-shadow: 100px 0 white, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
}
25% {
box-shadow: 110px 0 white, 100px 0 white, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
}
36% {
box-shadow: 120px 0 white, 110px 0 white, 100px 0 white, 0px 0 rgba(255, 255, 255, 0);
}
50% {
box-shadow: 130px 0 white, 120px 0 white, 110px 0 white, 100px 0 white;
}
62% {
box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 white, 120px 0 white, 110px 0 white;
}
75% {
box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 white, 120px 0 white;
}
87% {
box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 white;
}
100% {
box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
}
}
</style>
Example 44:
<span class="loader"></span>
<style>
.loader {
width: 12px;
height: 12px;
border-radius: 50%;
display: block;
margin:15px auto;
position: relative;
color: #FFF;
box-sizing: border-box;
animation: animloader 2s linear infinite;
}
@keyframes animloader {
0% {
box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px;
}
25% {
box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 2px;
}
50% {
box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 2px, -38px 0 0 -2px;
}
75% {
box-shadow: 14px 0 0 2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px;
}
100% {
box-shadow: 14px 0 0 -2px, 38px 0 0 2px, -14px 0 0 -2px, -38px 0 0 -2px;
}
}
</style>
Example 45:
<span class="loader"></span>
<style>
.loader {
width: 12px;
height: 12px;
border-radius: 50%;
display: block;
margin:15px auto;
position: relative;
color: #FFF;
box-sizing: border-box;
animation: animloader 1s linear infinite alternate;
}
@keyframes animloader {
0% {
box-shadow: -38px -12px , -14px 0, 14px 0, 38px 0;
}
33% {
box-shadow: -38px 0px, -14px -12px, 14px 0, 38px 0;
}
66% {
box-shadow: -38px 0px , -14px 0, 14px -12px, 38px 0;
}
100% {
box-shadow: -38px 0 , -14px 0, 14px 0 , 38px -12px;
}
}
</style>
Example 46:
<span class="loader"></span>
<style>
.loader {
width: 40px;
height: 40px;
border-radius: 50%;
display: inline-block;
position: relative;
}
.loader::after {
content: '';
width: 16px;
height: 16px;
border-radius: 50%;
position: absolute;
left: 0;
transform: translate(-50%, 100%);
box-sizing: border-box;
animation: animloader 1s linear infinite;
top: 0;
}
@keyframes animloader {
0% {
background: white;
box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
}
14% {
background: rgba(255, 255, 255, 0);
box-shadow: 9px -19px 0 -1px white, 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
}
28% {
background: rgba(255, 255, 255, 0);
box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px white, 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
}
42% {
background: rgba(255, 255, 255, 0);
box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px white, 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
}
57% {
background: rgba(255, 255, 255, 0);
box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px white, 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
}
71% {
background: rgba(255, 255, 255, 0);
box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px white, 9px 16px 0 -6px rgba(255, 255, 255, 0);
}
85% {
background: rgba(255, 255, 255, 0);
box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px white;
}
100% {
background: rgba(255, 255, 255, 0.5);
box-shadow: 9px -19px 0 -1px rgba(255, 255, 255, 0), 28px -19px 0 -2px rgba(255, 255, 255, 0), 39px -5px 0 -3px rgba(255, 255, 255, 0), 34px 10px 0 -4px rgba(255, 255, 255, 0), 22px 17px 0 -5px rgba(255, 255, 255, 0), 9px 16px 0 -6px rgba(255, 255, 255, 0);
}
}
</style>
Example 47:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
display: inline-block;
position: relative;
}
.loader::after,
.loader::before {
content: '';
width: 48px;
height: 48px;
border: 2px solid #FFF;
position: absolute;
left: 0;
top: 0;
box-sizing: border-box;
animation: rotation 2s ease-in-out infinite;
}
.loader::after {
border-color: #FF3D00;
animation-delay: 1s;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
Example 48:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
display: inline-block;
position: relative;
}
.loader::after,
.loader::before {
content: '';
box-sizing: border-box;
width: 48px;
height: 48px;
border: 4px solid #FFF;
position: absolute;
left: 0;
top: 0;
animation: animloader 2s ease-in-out infinite;
}
.loader::after {
border-color: #FF3D00;
animation-delay: 1s;
}
@keyframes animloader {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}
</style>
Example 49:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
display: inline-block;
position: relative;
}
.loader::after,
.loader::before {
content: '';
box-sizing: border-box;
width: 48px;
height: 48px;
border: 2px solid #FFF;
position: absolute;
left: 0;
top: 0;
animation: rotation 2s ease-in-out infinite alternate;
}
.loader::after {
border-color: #FF3D00;
animation-direction: alternate-reverse;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
Example 50:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
display: inline-block;
position: relative;
}
.loader::after,
.loader::before {
content: '';
box-sizing: border-box;
width: 48px;
height: 48px;
border: 2px solid #FFF;
position: absolute;
left: 0;
top: 0;
animation: scaleOut 2s ease-in-out infinite;
}
.loader::after {
border-color: #FF3D00;
animation-delay: 1s;
}
@keyframes scaleOut {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
</style>
Example 51:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
display: inline-block;
position: relative;
}
.loader::after,
.loader::before {
content: '';
box-sizing: border-box;
width: 48px;
height: 48px;
border: 2px solid #FFF;
position: absolute;
left: 0;
top: 0;
animation: rotationBreak 3s ease-in-out infinite alternate;
}
.loader::after {
border-color: #FF3D00;
animation-direction: alternate-reverse;
}
@keyframes rotationBreak {
0% {
transform: rotate(0);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
Example 52:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
display: inline-block;
position: relative;
border: 2px solid #FFF;
box-sizing: border-box;
animation: rotation 2s linear infinite;
}
.loader::after,
.loader::before {
content: '';
box-sizing: border-box;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
border: 2px solid #FF3D00;
width: 38px;
height: 38px;
animation: rotationBack 1.5s linear infinite;
transform-origin: center center;
}
.loader::before {
width: 28px;
height: 28px;
border-color: #FFF;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotationBack {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
</style>
Example 53:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
display: inline-block;
position: relative;
background: #FFF;
box-sizing: border-box;
animation: flipX 1s linear infinite;
}
@keyframes flipX {
0% {
transform: perspective(200px) rotateX(0deg) rotateY(0deg);
}
50% {
transform: perspective(200px) rotateX(-180deg) rotateY(0deg);
}
100% {
transform: perspective(200px) rotateX(-180deg) rotateY(-180deg);
}
}
</style>
Example 54:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
display: inline-block;
position: relative;
color: #FFF;
border: 1px solid;
box-sizing: border-box;
animation: fill 2s linear infinite alternate;
}
@keyframes fill {
0% {
box-shadow: 0 0 inset;
}
100% {
box-shadow: 0 -48px inset;
}
}
</style>
Example 55:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
display: inline-block;
position: relative;
background: #FFF;
box-sizing: border-box;
animation: zeroRotation 1s ease infinite alternate-reverse;
}
@keyframes zeroRotation {
0% {
transform: scale(1) rotate(0deg);
}
100% {
transform: scale(0) rotate(360deg);
}
}
</style>
Example 56:
<span class="loader"></span>
<style>
.loader {
width: 24px;
height: 24px;
display: inline-block;
position: relative;
background: #FFF;
box-sizing: border-box;
animation: animloader 2s linear infinite;
}
@keyframes animloader {
0% {
transform: translate(0, 0) rotateX(0) rotateY(0);
}
25% {
transform: translate(100%, 0) rotateX(0) rotateY(180deg);
}
50% {
transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
}
75% {
transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
}
100% {
transform: translate(0, 0) rotateX(0) rotateY(360deg);
}
}
</style>
Example 57:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
display: inline-block;
position: relative;
}
.loader::after {
content: '';
box-sizing: border-box;
width: 24px;
height: 24px;
position: absolute;
left: 0;
top: 0;
background: #FFF;
color: #FFF;
animation: animloader 2s linear infinite alternate;
}
@keyframes animloader {
0% {
box-shadow: 0 0, 0 0, 0 0;
}
33% {
box-shadow: 24px 0px, 24px 0px, 24px 0px;
}
66% {
box-shadow: 24px 24px, 24px 24px, 24px 0px;
}
100% {
box-shadow: 0px 24px, 24px 24px, 24px 0px;
}
}
</style>
Example 58:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
display: inline-block;
position: relative;
}
.loader::before {
content: '';
box-sizing: border-box;
width: 24px;
height: 24px;
position: absolute;
left: 0;
top: -24px;
animation: animloader1 2s linear infinite alternate;
}
.loader::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 24px;
height: 24px;
background: rgba(255, 255, 255, 0.85);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
box-sizing: border-box;
animation: animloader2 2s linear infinite alternate;
}
@keyframes animloader1 {
0%, 32% {
box-shadow: 0 24px white, 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
}
33%, 65% {
box-shadow: 0 24px white, 24px 24px white, 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
}
66%, 99% {
box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px rgba(255, 255, 255, 0);
}
100% {
box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px white;
}
}
@keyframes animloader2 {
0% {
transform: translate(0, 0) rotateX(0) rotateY(0);
}
33% {
transform: translate(100%, 0) rotateX(0) rotateY(180deg);
}
66% {
transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
}
100% {
transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
}
}
</style>
Example 59:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
display: inline-block;
position: relative;
transform: rotate(45deg);
}
.loader::before {
content: '';
box-sizing: border-box;
width: 24px;
height: 24px;
position: absolute;
left: 0;
top: -24px;
animation: animloader 4s ease infinite;
}
.loader::after {
content: '';
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
width: 24px;
height: 24px;
background: rgba(255, 255, 255, 0.85);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
animation: animloader2 2s ease infinite;
}
@keyframes animloader {
0% {
box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
}
12% {
box-shadow: 0 24px white, 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
}
25% {
box-shadow: 0 24px white, 24px 24px white, 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
}
37% {
box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px rgba(255, 255, 255, 0);
}
50% {
box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px white;
}
62% {
box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px white, 24px 48px white, 0px 48px white;
}
75% {
box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px white, 0px 48px white;
}
87% {
box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px white;
}
100% {
box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);
}
}
@keyframes animloader2 {
0% {
transform: translate(0, 0) rotateX(0) rotateY(0);
}
25% {
transform: translate(100%, 0) rotateX(0) rotateY(180deg);
}
50% {
transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
}
75% {
transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
}
100% {
transform: translate(0, 0) rotateX(0) rotateY(360deg);
}
}
</style>
Example 60:
<span class="loader"></span>
<style>
.loader {
width: 16px;
height: 16px;
box-shadow: 0 30px, 0 -30px;
border-radius: 4px;
background: currentColor;
display: block;
margin:auto;
position: relative;
color: #FFF;
transform: translateY(30px);
box-sizing: border-box;
animation: animloader 2s ease infinite;
}
.loader::after,
.loader::before {
content: '';
box-sizing: border-box;
width: 16px;
height: 16px;
box-shadow: 0 30px, 0 -30px;
border-radius: 4px;
background: currentColor;
color: #FFF;
position: absolute;
left: 30px;
top: 0;
animation: animloader 2s 0.2s ease infinite;
}
.loader::before {
animation-delay: 0.4s;
left: 60px;
}
@keyframes animloader {
0% {
top: 0;
color: white;
}
50% {
top: 30px;
color: rgba(255, 255, 255, 0.2);
}
100% {
top: 0;
color: white;
}
}
</style>
Example 61:
<span class="loader"></span>
<style>
.loader {
width: 8px;
height: 40px;
border-radius: 4px;
display: inline-block;
margin-left: 20px;
margin-top: 10px;
position: relative;
background: currentColor;
color: #FFF;
box-sizing: border-box;
animation: animloader 0.3s 0.3s linear infinite alternate;
}
.loader::after,
.loader::before {
content: '';
box-sizing: border-box;
width: 8px;
height: 40px;
border-radius: 4px;
background: currentColor;
position: absolute;
bottom: 0;
left: 20px;
animation: animloader1 0.3s 0.45s linear infinite alternate;
}
.loader::before {
left: -20px;
animation-delay: 0s;
}
@keyframes animloader {
0% {
height: 40px;
transform: translateY(0);
}
100% {
height: 10px;
transform: translateY(30px);
}
}
@keyframes animloader1 {
0% {
height: 48px;
}
100% {
height: 4.8px;
}
}
</style>
Example 62:
<span class="loader"></span>
<style>
.loader {
width: 8px;
height: 40px;
border-radius: 4px;
display: block;
margin: 20px auto;
position: relative;
background: currentColor;
color: #FFF;
box-sizing: border-box;
animation: animloader 0.3s 0.3s linear infinite alternate;
}
.loader::after, .loader::before {
content: '';
width: 8px;
height: 40px;
border-radius: 4px;
background: currentColor;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 20px;
box-sizing: border-box;
animation: animloader 0.3s 0.45s linear infinite alternate;
}
.loader::before {
left: -20px;
animation-delay: 0s;
}
@keyframes animloader {
0% { height: 48px}
100% { height: 4px}
}
</style>
Example 63:
<span class="loader"></span>
<style>
.loader {
width: 8px;
height: 48px;
display: block;
margin: auto;
left: -20px;
position: relative;
border-radius: 4px;
box-sizing: border-box;
animation: animloader 1s linear infinite alternate;
}
@keyframes animloader {
0% {
box-shadow: 20px 0 rgba(255, 255, 255, 0.25), 40px 0 white, 60px 0 white;
}
50% {
box-shadow: 20px 0 white, 40px 0 rgba(255, 255, 255, 0.25), 60px 0 white;
}
100% {
box-shadow: 20px 0 white, 40px 0 white, 60px 0 rgba(255, 255, 255, 0.25);
}
}
</style>
Example 64:
<span class="loader"></span>
<style>
.loader {
width: 8px;
height: 48px;
display: inline-block;
position: relative;
border-radius: 4px;
color: #FFF;
box-sizing: border-box;
animation: animloader 0.6s linear infinite;
}
@keyframes animloader {
0% {
box-shadow: 20px -10px, 40px 10px, 60px 0px;
}
25% {
box-shadow: 20px 0px, 40px 0px, 60px 10px;
}
50% {
box-shadow: 20px 10px, 40px -10px, 60px 0px;
}
75% {
box-shadow: 20px 0px, 40px 0px, 60px -10px;
}
100% {
box-shadow: 20px -10px, 40px 10px, 60px 0px;
}
}
</style>
Example 65:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 6px;
display: block;
margin: auto;
position: relative;
border-radius: 4px;
color: #FFF;
box-sizing: border-box;
animation: animloader 0.6s linear infinite;
}
@keyframes animloader {
0% { box-shadow: -10px 20px, 10px 35px , 0px 50px }
25% { box-shadow: 0px 20px , 0px 35px, 10px 50px }
50% { box-shadow: 10px 20px, -10px 35px, 0px 50px }
75% { box-shadow: 0px 20px, 0px 35px, -10px 50px }
100% { box-shadow: -10px 20px, 10px 35px, 0px 50px}
}
</style>
Example 66:
<span class="loader"></span>
<style>
.loader {
width: 4.8px;
height: 4.8px;
display: inline-block;
margin-top: 20px;
position: relative;
border-radius: 4px;
color: #FFF;
background: currentColor;
box-sizing: border-box;
animation: animloader 0.3s 0.3s linear infinite alternate;
}
.loader::after,
.loader::before {
content: '';
box-sizing: border-box;
width: 4.8px;
height: 4.8px;
border-radius: 4px;
background: currentColor;
position: absolute;
left: 0;
top: 15px;
animation: animloader 0.3s 0.45s linear infinite alternate;
}
.loader::after {
top: -15px;
animation-delay: 0s;
}
@keyframes animloader {
0% {
width: 4.8px;
}
100% {
width: 48px;
}
}
</style>
Example 67:
<span class="loader"></span>
<style>
.loader {
width: 4.8px;
height: 4.8px;
display: block;
margin: 20px auto;
position: relative;
border-radius: 4px;
color: #FFF;
background: currentColor;
box-sizing: border-box;
animation: animloader 0.3s 0.3s linear infinite alternate;
}
.loader::after,
.loader::before {
content: '';
box-sizing: border-box;
width: 4.8px;
height: 4.8px;
border-radius: 4px;
background: currentColor;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 15px;
animation: animloader 0.3s 0.45s linear infinite alternate;
}
.loader::after {
top: -15px;
animation-delay: 0s;
}
@keyframes animloader {
0% { width: 4.8px }
100% { width: 48px}
}
</style>
Example 68:
<span class="loader"></span>
<style>
.loader {
width: 8px;
height: 48px;
display: inline-block;
position: relative;
border-radius: 4px;
box-sizing: border-box;
animation: animloader 1s linear infinite alternate;
}
@keyframes animloader {
0% {
box-shadow: 20px 0 rgba(255, 255, 255, 0), 40px 0 rgba(255, 255, 255, 0), 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0);
}
20% {
box-shadow: 20px 0 white, 40px 0 rgba(255, 255, 255, 0), 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0);
}
40% {
box-shadow: 20px 0 white, 40px 0 white, 60px 0 rgba(255, 255, 255, 0), 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0);
}
60% {
box-shadow: 20px 0 white, 40px 0 white, 60px 0 white, 80px 0 rgba(255, 255, 255, 0), 100px 0 rgba(255, 255, 255, 0);
}
80% {
box-shadow: 20px 0 white, 40px 0 white, 60px 0 white, 80px 0 white, 100px 0 rgba(255, 255, 255, 0);
}
100% {
box-shadow: 20px 0 white, 40px 0 white, 60px 0 white, 80px 0 white, 100px 0 white;
}
}
</style>
Example 69:
<span class="loader"></span>
<style>
.loader {
width: 20px;
height: 12px;
display: block;
margin: auto;
position: relative;
border-radius: 4px;
color: #FFF;
background: currentColor;
box-sizing: border-box;
animation: animloader 0.6s 0.3s ease infinite alternate;
}
.loader::after,
.loader::before {
content: '';
box-sizing: border-box;
width: 20px;
height: 12px;
background: currentColor;
position: absolute;
border-radius: 4px;
top: 0;
right: 110%;
animation: animloader 0.6s ease infinite alternate;
}
.loader::after {
left: 110%;
right: auto;
animation-delay: 0.6s;
}
@keyframes animloader {
0% {
width: 20px;
}
100% {
width: 48px;
}
}
</style>
Example 70:
<span class="loader"></span>
<style>
.loader {
width: 100%;
height: 4.8px;
display: inline-block;
position: relative;
background: rgba(255, 255, 255, 0.15);
overflow: hidden;
}
.loader::after {
content: '';
width: 96px;
height: 4.8px;
background: #FFF;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
animation: hitZak 1s linear infinite alternate;
}
@keyframes hitZak {
0% {
left: 0;
transform: translateX(-1%);
}
100% {
left: 100%;
transform: translateX(-99%);
}
}
</style>
Example 71:
<span class="loader"></span>
<style>
.loader {
width: 100%;
height: 4.8px;
display: inline-block;
position: relative;
background: rgba(255, 255, 255, 0.15);
overflow: hidden;
}
.loader::after {
content: '';
width: 192px;
height: 4.8px;
background: #FFF;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
animation: animloader 2s linear infinite;
}
@keyframes animloader {
0% {
left: 0;
transform: translateX(-100%);
}
100% {
left: 100%;
transform: translateX(0%);
}
}
</style>
Example 72:
<span class="loader"></span>
<style>
.loader {
width: 100%;
height: 4.8px;
display: inline-block;
position: relative;
background: rgba(255, 255, 255, 0.15);
overflow: hidden;
}
.loader::after {
content: '';
box-sizing: border-box;
width: 0;
height: 4.8px;
background: #FFF;
position: absolute;
top: 0;
left: 0;
animation: animFw 10s linear infinite;
}
@keyframes animFw {
0% {
width: 0;
}
100% {
width: 100%;
}
}
</style>
Example 73:
<span class="loader"></span>
<style>
.loader {
width: 0;
height: 4.8px;
display: inline-block;
position: relative;
background: #FFF;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
box-sizing: border-box;
animation: animFw 8s linear infinite;
}
.loader::after,
.loader::before {
content: '';
width: 10px;
height: 1px;
background: #FFF;
position: absolute;
top: 9px;
right: -2px;
opacity: 0;
transform: rotate(-45deg) translateX(0px);
box-sizing: border-box;
animation: coli1 0.3s linear infinite;
}
.loader::before {
top: -4px;
transform: rotate(45deg);
animation: coli2 0.3s linear infinite;
}
@keyframes animFw {
0% {
width: 0;
}
100% {
width: 100%;
}
}
@keyframes coli1 {
0% {
transform: rotate(-45deg) translateX(0px);
opacity: 0.7;
}
100% {
transform: rotate(-45deg) translateX(-45px);
opacity: 0;
}
}
@keyframes coli2 {
0% {
transform: rotate(45deg) translateX(0px);
opacity: 1;
}
100% {
transform: rotate(45deg) translateX(-45px);
opacity: 0.7;
}
}
</style>
Example 74:
<span class="loader"></span>
<style>
.loader {
width: 100%;
height: 4.8px;
display: inline-block;
position: relative;
overflow: hidden;
}
.loader::after {
content: '';
width: 96px;
height: 4.8px;
background: #FFF;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
animation: hitZak 0.6s ease-in-out infinite alternate;
}
@keyframes hitZak {
0% {
left: 0;
transform: translateX(-1%);
}
100% {
left: 100%;
transform: translateX(-99%);
}
}
</style>
Example 75:
<span class="loader"></span>
<style>
.loader {
width: 100%;
height: 4.8px;
display: inline-block;
background: rgba(255, 255, 255, 0.15);
position: relative;
overflow: hidden;
}
.loader::after {
content: '';
width: 0%;
height: 4.8px;
background-color: #FFF;
background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent);
background-size: 15px 15px;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
animation: animFw 6s ease-in infinite;
}
@keyframes animFw {
0% {
width: 0;
}
100% {
width: 100%;
}
}
</style>
Example 76:
<span class="loader"></span>
<style>
.loader {
width: 100%;
height: 8px;
display: inline-block;
position: relative;
overflow: hidden;
}
.loader::before {
content: '';
box-sizing: border-box;
top: 0;
left: 0;
height: 100%;
width: 100%;
position: absolute;
background-color: rgba(255, 255, 255, 0.15);
background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent);
background-size: 15px 15px;
z-index: 10;
}
.loader::after {
content: '';
box-sizing: border-box;
width: 0%;
height: 100%;
background-color: #FFF;
position: absolute;
border-radius: 0 4px 4px 0;
top: 0;
left: 0;
animation: animFw 10s ease-in infinite;
}
@keyframes animFw {
0% {
width: 0;
}
100% {
width: 100%;
}
}
</style>
Example 77:
<span class="loader"></span>
<style>
.loader {
width: 100%;
height: 12px;
display: inline-block;
background-color: #FFF;
background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent);
font-size: 30px;
background-size: 1em 1em;
box-sizing: border-box;
animation: barStripe 1s linear infinite;
}
@keyframes barStripe {
0% {
background-position: 1em 0;
}
100% {
background-position: 0 0;
}
}
</style>
Example 78:
<span class="loader"></span>
<style>
.loader {
width: 96px;
height: 16px;
display: inline-block;
background-color: #FFF;
border: 1px solid #FFF;
border-radius: 4px;
background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent);
font-size: 30px;
background-size: 1em 1em;
box-sizing: border-box;
animation: barStripe 1s linear infinite;
}
@keyframes barStripe {
0% {
background-position: 1em 0;
}
100% {
background-position: 0 0;
}
}
</style>
Example 79:
<span class="loader"></span>
<style>
.loader {
width: 96px;
height: 24px;
display: inline-block;
background-color: #FFF;
border: 1px solid #FFF;
border-radius: 4px;
background: linear-gradient(45deg, transparent 49%, #FFF 50%, #FFF 50%, transparent 51%, transparent), linear-gradient(-45deg, transparent 49%, #FFF 50%, #FFF 50%, transparent 51%, transparent);
font-size: 15px;
background-size: 1em 1em;
box-sizing: border-box;
animation: barStripe 0.6s linear infinite;
}
@keyframes barStripe {
0% {
background-position: 1em 0;
}
100% {
background-position: 0 0;
}
}
</style>
Example 80:
<span class="loader"></span>
<style>
.loader {
width: 130px;
height: 48px;
display: inline-block;
background: linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000 100%), linear-gradient(45deg, #000 25%, white 25%, white 75%, #000 75%, #000 100%);
font-size: 10px;
background-size: 32px 32px;
box-sizing: border-box;
animation: raceBoard 0.6s linear infinite;
background-position: 0 0, 16px 16px;
}
@keyframes raceBoard {
0% {
background-position: 0 0, 16px 16px;
}
100% {
background-position: 32px 0px, 48px 16px;
}
}
</style>
Example 81:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
display: inline-block;
position: relative;
background-color: #FFF;
background: radial-gradient(ellipse at center, #FF3D00 0%, #FF3D00 14%, #FFF 15%, #FFF 100%);
background-size: cover;
background-position: center;
border-radius: 50%;
}
.loader::after,
.loader::before {
content: '';
position: absolute;
height: 16px;
width: 4px;
background: #FF3D00;
top: 50%;
left: 50%;
transform: translateX(-50%) rotate(0deg);
transform-origin: 25% 0;
box-sizing: border-box;
animation: rotation 10s linear infinite;
}
.loader::before {
height: 22px;
width: 2px;
transform: translateX(-50%) rotate(0deg);
animation-duration: 1s;
}
@keyframes rotation {
0% { transform: rotate(0deg)}
100% { transform: rotate(360deg)}
}
</style>
Example 81:
<span class="loader"></span>
<style>
.loader {
width: 60px;
height: 40px;
position: relative;
display: inline-block;
--base-color: #263238; /*use your base color*/
}
.loader::before {
content: '';
left: 0;
top: 0;
position: absolute;
width: 36px;
height: 36px;
border-radius: 50%;
background-color: #FFF;
background-image: radial-gradient(circle 8px at 18px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 18px 0px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 0px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 36px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 18px 36px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 30px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 5px 30px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 5px 5px, var(--base-color) 100%, transparent 0);
background-repeat: no-repeat;
box-sizing: border-box;
animation: rotationBack 3s linear infinite;
}
.loader::after {
content: '';
left: 35px;
top: 15px;
position: absolute;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #FFF;
background-image: radial-gradient(circle 5px at 12px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 12px 0px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 0px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 24px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 12px 24px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 20px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 3px 20px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 3px 3px, var(--base-color) 100%, transparent 0);
background-repeat: no-repeat;
box-sizing: border-box;
animation: rotationBack 4s linear infinite reverse;
}
@keyframes rotationBack {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
</style>
Example 82:
<span class="loader"></span>
<style>
.loader {
width: 15px;
height: 20px;
margin-left: 15px;
background: #FFF;
display: inline-block;
position: relative;
box-sizing: border-box;
animation: bump 0.4s ease-in infinite alternate;
}
.loader::after {
content: '';
box-sizing: border-box;
left: 50%;
top: 100%;
transform: translate(-50%, 0);
position: absolute;
border: 15px solid transparent;
border-top-color: #FFF;
}
@keyframes bump {
0% {
transform: translate(-50%, 5px);
}
100% {
transform: translate(-50%, -5px);
}
}
</style>
Example 83:
<span class="loader"></span>
<style>
.loader {
width: 15px;
height: 20px;
background: #FFF;
margin-left: 15px;
margin-top: 15px;
display: inline-block;
position: relative;
box-sizing: border-box;
animation: bump 0.4s linear infinite alternate;
}
.loader::after {
content: '';
box-sizing: border-box;
left: 50%;
bottom: 100%;
transform: translate(-50%, 0);
position: absolute;
border: 15px solid transparent;
border-bottom-color: #FFF;
}
@keyframes bump {
0% {
transform: translate(-50%, 5px);
}
100% {
transform: translate(-50%, -5px);
}
}
</style>
Example 84:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 12px;
background: #FFF;
margin-top: 40px;
display: inline-block;
position: relative;
}
.loader::after {
content: '';
left: 50%;
bottom: 0;
transform: translate(-50%, 0);
position: absolute;
border: 15px solid transparent;
border-top-color: #FFF;
box-sizing: border-box;
animation: bump 0.4s ease-in-out infinite alternate;
}
.loader::before {
content: '';
left: 50%;
bottom: 25px;
transform: translate(-50%, 0);
position: absolute;
width: 15px;
height: 20px;
background: #FFF;
box-sizing: border-box;
animation: bump 0.4s ease-in-out infinite alternate;
}
@keyframes bump {
0% {
transform: translate(-50%, 5px);
}
100% {
transform: translate(-50%, -5px);
}
}
</style>
Example 85:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 12px;
margin-top: 40px;
background: #FFF;
display: inline-block;
position: relative;
}
.loader::after {
content: '';
left: 50%;
top: -47px;
transform: translate(-50%, 0);
position: absolute;
border: 15px solid transparent;
border-bottom-color: #FFF;
box-sizing: border-box;
animation: bump 0.4s ease-in-out infinite alternate;
}
.loader::before {
content: '';
left: 50%;
bottom: 15px;
transform: translate(-50%, 0);
position: absolute;
width: 15px;
height: 20px;
background: #FFF;
box-sizing: border-box;
animation: bump 0.4s ease-in-out infinite alternate;
}
@keyframes bump {
0% {
transform: translate(-50%, 5px);
}
100% {
transform: translate(-50%, -5px);
}
}
</style>
Example 86:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 24px;
display: inline-block;
position: relative;
color: #FFF;
border: 1px solid;
box-sizing: border-box;
animation: fillX 2s linear infinite;
}
.loader::after {
content: '';
box-sizing: border-box;
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
background: #FFF;
width: 5px;
height: 12px;
}
@keyframes fillX {
0% {
box-shadow: 0 0 inset;
}
100% {
box-shadow: 48px 0 inset;
}
}
</style>
Example 87:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 24px;
display: inline-block;
position: relative;
border: 1px solid #FFF;
}
.loader::after {
content: '';
box-sizing: border-box;
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
border: 1px solid #FFF;
width: 5px;
height: 12px;
}
.loader::before {
content: '';
position: absolute;
left: -8px;
top: 50%;
transform: translateY(-50%);
height: 80%;
width: 6px;
box-sizing: border-box;
animation: animloader 2s linear infinite;
}
@keyframes animloader {
0% {
box-shadow: 11px 0 rgba(255, 255, 255, 0), 22px 0 rgba(255, 255, 255, 0), 33px 0 rgba(255, 255, 255, 0), 44px 0 rgba(255, 255, 255, 0);
}
25% {
box-shadow: 11px 0 white, 22px 0 rgba(255, 255, 255, 0), 33px 0 rgba(255, 255, 255, 0), 44px 0 rgba(255, 255, 255, 0);
}
50% {
box-shadow: 11px 0 white, 22px 0 white, 33px 0 rgba(255, 255, 255, 0), 44px 0 rgba(255, 255, 255, 0);
}
75% {
box-shadow: 11px 0 white, 22px 0 white, 33px 0 white, 44px 0 rgba(255, 255, 255, 0);
}
100% {
box-shadow: 11px 0 white, 22px 0 white, 33px 0 white, 44px 0 white;
}
}
</style>
Example 88:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
display: inline-block;
position: relative;
border: 4px solid #FFF;
box-sizing: border-box;
animation: fill 2s linear infinite alternate;
color: rgba(255, 61, 0, 0.9);
border-radius: 0 0 4px 4px;
}
.loader::after {
content: '';
box-sizing: border-box;
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
border: 4px solid #FFF;
width: 20px;
height: 25px;
border-radius: 0 4px 4px 0;
}
@keyframes fill {
0% {
box-shadow: 0 0 inset;
}
100% {
box-shadow: 0 -48px inset;
}
}
</style>
Example 89:
<span class="loader"></span>
<style>
.loader {
width: 32px;
height: 72px;
display: inline-block;
left: 5px;
position: relative;
border: 2px solid #FFF;
box-sizing: border-box;
animation: animloader 2s linear infinite alternate;
color: #FF3D00;
border-radius: 0 0 4px 4px;
transform: perspective(140px) rotateX(-45deg);
}
@keyframes animloader {
0% {
box-shadow: 0 0 inset;
}
100% {
box-shadow: 0 -70px inset;
}
}
</style>
Example 90:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 40px;
margin-top: 30px;
display: inline-block;
position: relative;
background: #FFF;
border-radius: 15% 15% 35% 35%;
}
.loader::after {
content: '';
box-sizing: border-box;
position: absolute;
left: 45px;
top: 8px;
border: 4px solid #FFF;
width: 16px;
height: 20px;
border-radius: 0 4px 4px 0;
}
.loader::before {
content: '';
position: absolute;
width: 1px;
height: 10px;
color: #FFF;
top: -15px;
left: 11px;
box-sizing: border-box;
animation: animloader 1s ease infinite;
}
@keyframes animloader {
0% {
box-shadow: 2px 0px rgba(255, 255, 255, 0), 12px 0px rgba(255, 255, 255, 0.3), 20px 0px rgba(255, 255, 255, 0);
}
50% {
box-shadow: 2px -5px rgba(255, 255, 255, 0.5), 12px -3px rgba(255, 255, 255, 0.5), 20px -2px rgba(255, 255, 255, 0.6);
}
100% {
box-shadow: 2px -8px rgba(255, 255, 255, 0), 12px -5px rgba(255, 255, 255, 0), 20px -5px rgba(255, 255, 255, 0);
}
}
</style>
Example 91:
<span class="loader"></span>
<style>
.loader {
width: 96px;
height: 48px;
display: inline-block;
position: relative;
background: #FFF;
border-radius: 48px 48px 0 0;
box-sizing: border-box;
overflow: hidden;
}
.loader::after {
content: '';
box-sizing: border-box;
position: absolute;
width: 24px;
height: 12px;
border-radius: 24px 24px 0 0;
background: #FF3D00;
left: 50%;
transform: translateX(-50%);
bottom: 0;
}
.loader::before {
content: '';
position: absolute;
width: 4px;
height: 32px;
left: 0;
right: 0;
margin: auto;
bottom: 0;
background: #FF3D00;
transform-origin: 50% 100%;
box-sizing: border-box;
animation: animloader 2s linear infinite alternate;
}
@keyframes animloader {
0% {
transform: rotate(-70deg);
}
10% {
transform: rotate(-40deg);
}
20%, 45%, 35% {
transform: rotate(-10deg);
}
40%, 30% {
transform: rotate(-30deg);
}
50%, 60% {
transform: rotate(20deg);
}
55%, 65%, 75% {
transform: rotate(40deg);
}
70% {
transform: rotate(45deg);
}
85%, 90% {
transform: rotate(50deg);
}
95% {
transform: rotate(75deg);
}
100%, 93% {
transform: rotate(70deg);
}
}
</style>
Example 92:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
display: block;
margin: 20px auto;
position: relative;
border: 3px solid #FFF;
border-radius: 50%;
box-sizing: border-box;
animation: animloader 2s linear infinite;
}
.loader::after {
content: '';
box-sizing: border-box;
width: 6px;
height: 24px;
background: #FFF;
transform: rotate(-45deg);
position: absolute;
bottom: -20px;
left: 46px;
}
@keyframes animloader {
0% {
transform: translate(-10px, -10px);
}
25% {
transform: translate(-10px, 10px);
}
50% {
transform: translate(10px, 10px);
}
75% {
transform: translate(10px, -10px);
}
100% {
transform: translate(-10px, -10px);
}
}
</style>
Example 93:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
display: block;
margin: 20px auto;
box-sizing: border-box;
position: relative;
}
.loader::after {
content: '';
box-sizing: border-box;
width: 48px;
height: 48px;
left: 0;
bottom: 0;
position: absolute;
border-radius: 50% 50% 0;
border: 15px solid #FFF;
transform: rotate(45deg) translate(0, 0);
box-sizing: border-box;
animation: animMarker 0.4s ease-in-out infinite alternate;
}
.loader::before {
content: '';
box-sizing: border-box;
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 150%;
width: 24px;
height: 4px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.2);
animation: animShadow 0.4s ease-in-out infinite alternate;
}
@keyframes animMarker {
0% {
transform: rotate(45deg) translate(5px, 5px);
}
100% {
transform: rotate(45deg) translate(-5px, -5px);
}
}
@keyframes animShadow {
0% {
transform: scale(0.5);
}
100% {
transform: scale(1);
}
}
</style>
Example 94:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 48px;
background: #FF3D00;
display: block;
margin: 20px auto;
position: relative;
box-sizing: border-box;
animation: rotationBack 1s ease-in-out infinite reverse;
}
.loader::before {
content: '';
box-sizing: border-box;
left: 0;
top: 0;
transform: rotate(45deg);
position: absolute;
width: 48px;
height: 48px;
background: #FF3D00;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
.loader::after {
content: '';
box-sizing: border-box;
width: 32px;
height: 32px;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
background: #FFF;
transform: translate(-50%, -50%);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
@keyframes rotationBack {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
</style>
Example 95:
<span class="loader"></span>
<style>
.loader {
width: 60px;
height: 60px;
display: block;
margin: 20px auto;
position: relative;
background: radial-gradient(ellipse at center, #FFF 69%, rgba(0, 0, 0, 0) 70%), linear-gradient(to right, rgba(0, 0, 0, 0) 47%, #FFF 48%, #FFF 52%, rgba(0, 0, 0, 0) 53%);
background-size: 20px 20px , 20px auto;
background-repeat: repeat-x;
background-position: center bottom, center -5px;
box-sizing: border-box;
}
.loader::before,
.loader::after {
content: '';
box-sizing: border-box;
position: absolute;
left: -20px;
top: 0;
width: 20px;
height: 60px;
background: radial-gradient(ellipse at center, #FFF 69%, rgba(0, 0, 0, 0) 70%), linear-gradient(to right, rgba(0, 0, 0, 0) 47%, #FFF 48%, #FFF 52%, rgba(0, 0, 0, 0) 53%);
background-size: 20px 20px , 20px auto;
background-repeat: no-repeat;
background-position: center bottom, center -5px;
transform: rotate(0deg);
transform-origin: 50% 0%;
animation: animPend 1s linear infinite alternate;
}
.loader::after {
animation: animPend2 1s linear infinite alternate;
left: 100%;
}
@keyframes animPend {
0% {
transform: rotate(22deg);
}
50% {
transform: rotate(0deg);
}
}
@keyframes animPend2 {
0%, 55% {
transform: rotate(0deg);
}
100% {
transform: rotate(-22deg);
}
}
</style>
Example 96:
<span class="loader"></span>
<style>
.loader {
width: 24px;
height: 80px;
display: block;
margin: 35px auto 0;
border: 1px solid #FFF;
border-radius: 0 0 50px 50px;
position: relative;
box-shadow: 0px 0px #FF3D00 inset;
background-image: linear-gradient(#FF3D00 100px, transparent 0);
background-position: 0px 0px;
background-size: 22px 80px;
background-repeat: no-repeat;
box-sizing: border-box;
animation: animloader 6s linear infinite;
}
.loader::after {
content: '';
box-sizing: border-box;
top: -6px;
left: 50%;
transform: translateX(-50%);
position: absolute;
border: 1px solid #FFF;
border-radius: 50%;
width: 28px;
height: 6px;
}
.loader::before {
content: '';
box-sizing: border-box;
left: 0;
bottom: -4px;
border-radius: 50%;
position: absolute;
width: 6px;
height: 6px;
animation: animloader1 6s linear infinite;
}
@keyframes animloader {
0% {
background-position: 0px 80px;
}
100% {
background-position: 0px 0px;
}
}
@keyframes animloader1 {
0% {
box-shadow: 4px -10px rgba(255, 255, 255, 0), 6px 0px rgba(255, 255, 255, 0), 8px -15px rgba(255, 255, 255, 0), 12px 0px rgba(255, 255, 255, 0);
}
20% {
box-shadow: 4px -20px rgba(255, 255, 255, 0), 8px -10px rgba(255, 255, 255, 0), 10px -30px rgba(255, 255, 255, 0.5), 15px -5px rgba(255, 255, 255, 0);
}
40% {
box-shadow: 2px -40px rgba(255, 255, 255, 0.5), 8px -30px rgba(255, 255, 255, 0.4), 8px -60px rgba(255, 255, 255, 0.5), 12px -15px rgba(255, 255, 255, 0.5);
}
60% {
box-shadow: 4px -60px rgba(255, 255, 255, 0.5), 6px -50px rgba(255, 255, 255, 0.4), 10px -90px rgba(255, 255, 255, 0.5), 15px -25px rgba(255, 255, 255, 0.5);
}
80% {
box-shadow: 2px -80px rgba(255, 255, 255, 0.5), 4px -70px rgba(255, 255, 255, 0.4), 8px -120px rgba(255, 255, 255, 0), 12px -35px rgba(255, 255, 255, 0.5);
}
100% {
box-shadow: 4px -100px rgba(255, 255, 255, 0), 8px -90px rgba(255, 255, 255, 0), 10px -120px rgba(255, 255, 255, 0), 15px -45px rgba(255, 255, 255, 0);
}
}
</style>
Example 97:
<span class="loader"></span>
<style>
.loader {
width: 20px;
height: 20px;
display: block;
margin: 80px auto 20px;
border-radius: 50%;
background: #FF3D00;
border: 5px solid #FFF;
position: relative;
box-sizing: border-box;
}
.loader::before {
content: '';
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50%);
width: 8px;
height: 80px;
border: 2px solid #FFF;
border-bottom: none;
background: #FFF;
color: #FF3D00;
border-radius: 50px 50px 0 0;
box-shadow: 0px 0px inset;
box-sizing: border-box;
animation: animloader 6s linear infinite;
}
@keyframes animloader {
0% {
box-shadow: 0px 0px inset;
}
100% {
box-shadow: 0px -80px inset;
}
}
</style>
Example 98:
<span class="loader"></span>
<style>
.loader {
width: 180px;
height: 140px;
display: block;
margin: 0 auto 20px;
background-image: radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 50px at 50px 50px, #FFF 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 15px at 15px 15px, #FFF 100%, transparent 0), linear-gradient(#FFF 50px, transparent 0);
background-size: 50px 50px, 100px 75px, 50px 50px, 30px 32px, 136px 20px;
background-repeat: no-repeat;
background-position: 0px 30px, 30px 0px, 113px 29px, 147px 50px, 23px 60px;
position: relative;
box-sizing: border-box;
}
.loader::after {
content: '';
position: absolute;
left: 2px;
top: 65px;
width: 2px;
height: 6px;
color: #FFF;
box-sizing: border-box;
animation: animloader 0.6s linear infinite;
}
@keyframes animloader {
0% {
box-shadow: 25px 0 white, 50px 0 white, 75px 0 white, 100px 0 white, 125px 0 white, 150px 0 white, 25px 0 white, 50px 0 white, 75px 0 white, 100px 0 white, 125px 0 white, 150px 0 white;
}
50% {
box-shadow: 25px 20px white, 50px 60px rgba(255, 255, 255, 0), 75px 30px rgba(255, 255, 255, 0), 100px 70px rgba(255, 255, 255, 0), 125px 40px white, 150px 60px rgba(255, 255, 255, 0), 25px 20px white, 50px 30px white, 75px 10px white, 100px 30px white, 125px 30px rgba(255, 255, 255, 0), 150px 30px rgba(255, 255, 255, 0);
}
100% {
box-shadow: 25px 60px rgba(255, 255, 255, 0), 50px 60px rgba(255, 255, 255, 0), 75px 50px rgba(255, 255, 255, 0), 100px 70px rgba(255, 255, 255, 0), 125px 70px rgba(255, 255, 255, 0), 150px 60px rgba(255, 255, 255, 0), 25px 80px rgba(255, 255, 255, 0), 50px 80px rgba(255, 255, 255, 0), 75px 70px rgba(255, 255, 255, 0), 100px 60px rgba(255, 255, 255, 0), 125px 30px rgba(255, 255, 255, 0), 150px 30px rgba(255, 255, 255, 0);
}
}
</style>
Example 99:
<span class="loader"></span>
<style>
.loader {
width: 175px;
height: 80px;
display: block;
margin: auto;
background-image: radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 50px at 50px 50px, #FFF 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), linear-gradient(#FFF 50px, transparent 0);
background-size: 50px 50px, 100px 76px, 50px 50px, 120px 40px;
background-position: 0px 30px, 37px 0px, 122px 30px, 25px 40px;
background-repeat: no-repeat;
position: relative;
box-sizing: border-box;
}
.loader::after {
content: '';
left: 50%;
bottom: 0;
transform: translate(-50%, 0);
position: absolute;
border: 15px solid transparent;
border-top-color: #FF3D00;
box-sizing: border-box;
animation: fadePush 1s linear infinite;
}
.loader::before {
content: '';
left: 50%;
bottom: 30px;
transform: translate(-50%, 0);
position: absolute;
width: 15px;
height: 15px;
background: #FF3D00;
box-sizing: border-box;
animation: fadePush 1s linear infinite;
}
@keyframes fadePush {
0% {
transform: translate(-50%, -15px);
opacity: 0;
}
50% {
transform: translate(-50%, 0px);
opacity: 1;
}
100% {
transform: translate(-50%, 15px);
opacity: 0;
}
}
</style>
Example 100:
<span class="loader"></span>
<style>
.loader {
width: 175px;
height: 80px;
display: block;
margin: auto;
background-image: radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 50px at 50px 50px, #FFF 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), linear-gradient(#FFF 50px, transparent 0);
background-size: 50px 50px, 100px 76px, 50px 50px, 120px 40px;
background-position: 0px 30px, 37px 0px, 122px 30px, 25px 40px;
background-repeat: no-repeat;
position: relative;
box-sizing: border-box;
}
.loader::after {
content: '';
left: 50%;
bottom: 30px;
transform: translate(-50%, 0);
position: absolute;
border: 15px solid transparent;
border-bottom-color: #FF3D00;
box-sizing: border-box;
animation: fadePull 1s linear infinite;
}
.loader::before {
content: '';
left: 50%;
bottom: 15px;
transform: translate(-50%, 0);
position: absolute;
width: 15px;
height: 15px;
background: #FF3D00;
box-sizing: border-box;
animation: fadePull 1s linear infinite;
}
@keyframes fadePull {
0% {
transform: translate(-50%, 15px);
opacity: 0;
}
50% {
transform: translate(-50%, 0px);
opacity: 1;
}
100% {
transform: translate(-50%, -15px);
opacity: 0;
}
}
</style>
Example 101:
<span class="loader"></span>
<style>
.loader {
width: 175px;
height: 80px;
display: block;
margin: auto;
background-image: radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 50px at 50px 50px, #FFF 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), linear-gradient(#FFF 50px, transparent 0);
background-size: 50px 50px, 100px 76px, 50px 50px, 120px 40px;
background-position: 0px 30px, 37px 0px, 122px 30px, 25px 40px;
background-repeat: no-repeat;
position: relative;
box-sizing: border-box;
}
.loader::after {
content: '';
left: 0;
right: 0;
bottom: 20px;
position: absolute;
width: 36px;
height: 36px;
border-radius: 50%;
border: 5px solid transparent;
border-color: #FF3D00 transparent;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
Example 102:
<span class="loader"></span>
<style>
.loader {
width: 175px;
height: 80px;
display: block;
margin:auto;
background-image: radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 50px at 50px 50px, #FFF 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), linear-gradient(#FFF 50px, transparent 0);
background-size: 50px 50px, 100px 76px, 50px 50px, 120px 40px;
background-position: 0px 30px, 37px 0px, 122px 30px, 25px 40px;
background-repeat: no-repeat;
position: relative;
box-sizing: border-box;
}
.loader::before {
content: '';
left: 60px;
bottom: 18px;
position: absolute;
width: 36px;
height: 36px;
border-radius: 50%;
background-color: #FF3D00;
background-image: radial-gradient(circle 8px at 18px 18px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 18px 0px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 0px 18px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 36px 18px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 18px 36px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 30px 30px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 5px 30px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 5px 5px, #FFF 100%, transparent 0);
background-repeat: no-repeat;
box-sizing: border-box;
animation: rotationBack 3s linear infinite;
}
.loader::after {
content: '';
left: 94px;
bottom: 15px;
position: absolute;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #FF3D00;
background-image: radial-gradient(circle 5px at 12px 12px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 12px 0px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 0px 12px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 24px 12px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 12px 24px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 20px 20px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 3px 20px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 3px 3px, #FFF 100%, transparent 0);
background-repeat: no-repeat;
box-sizing: border-box;
animation: rotationBack 4s linear infinite reverse;
}
@keyframes rotationBack {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
</style>
Example 103:
<span class="loader"></span>
<style>
.loader {
width: 175px;
height: 80px;
display: block;
margin:auto;
background-image: linear-gradient(#263238 50px, transparent 0), radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 50px at 50px 50px, #FFF 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), linear-gradient(#FFF 50px, transparent 0);
background-size: 64px 6px, 50px 50px, 100px 76px, 50px 50px, 120px 40px;
background-position: 55px 60px, 0px 30px, 37px 0px, 122px 30px, 25px 40px;
background-repeat: no-repeat;
position: relative;
box-sizing: border-box;
}
.loader::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%) rotate(-180deg);
top: 62px;
height: 64px;
width: 60px;
background-color: #FFF;
background-image: linear-gradient(#DDD 20px, transparent 0), linear-gradient(#DDD 5px, transparent 0), linear-gradient(#DDD 10px, transparent 0), linear-gradient(#DDD 10px, transparent 0);
background-size: 50px 20px;
background-position: 5px 36px, 5px 25px, 5px 10px;
background-repeat: no-repeat;
border-radius: 2px 2px 4px 4px;
z-index: 10;
box-shadow: 0px -4px 7px rgba(0, 0, 0, 0.5);
box-sizing: border-box;
animation: animloader 4s linear infinite;
}
@keyframes animloader {
0% {
height: 64px;
}
90%, 100% {
height: 0px;
}
}
</style>
Example 104:
<span class="loader"></span>
<style>
.loader {
width: 32px;
height: 90px;
display: block;
margin: 20px auto;
position: relative;
border-radius: 50% 50% 0 0;
border-bottom: 10px solid #FF3D00;
background-color: #FFF;
background-image: radial-gradient(ellipse at center, #FFF 34%, #FF3D00 35%, #FF3D00 54%, #FFF 55%), linear-gradient(#FF3D00 10px, transparent 0);
background-size: 28px 28px;
background-position: center 20px , center 2px;
background-repeat: no-repeat;
box-sizing: border-box;
animation: animloaderBack 1s linear infinite alternate;
}
.loader::before {
content: '';
box-sizing: border-box;
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 64px;
height: 44px;
border-radius: 50%;
box-shadow: 0px 15px #FF3D00 inset;
top: 67px;
}
.loader::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 34px;
height: 34px;
top: 112%;
background: radial-gradient(ellipse at center, #ffdf00 8%, rgba(249, 62, 0, 0.6) 24%, rgba(0, 0, 0, 0) 100%);
border-radius: 50% 50% 0;
background-repeat: no-repeat;
background-position: -44px -44px;
background-size: 100px 100px;
box-shadow: 4px 4px 12px 0px rgba(255, 61, 0, 0.5);
box-sizing: border-box;
animation: animloader 1s linear infinite alternate;
}
@keyframes animloaderBack {
0%, 30%, 70% {
transform: translateY(0px);
}
20%, 40%, 100% {
transform: translateY(-5px);
}
}
@keyframes animloader {
0% {
box-shadow: 4px 4px 12px 2px rgba(255, 61, 0, 0.75);
width: 34px;
height: 34px;
background-position: -44px -44px;
background-size: 100px 100px;
}
100% {
box-shadow: 2px 2px 8px 0px rgba(255, 61, 0, 0.5);
width: 30px;
height: 28px;
background-position: -36px -36px;
background-size: 80px 80px;
}
}
</style>
Example 105:
<span class="loader"></span>
<style>
.loader {
width: 106px;
height: 56px;
display: block;
margin: 30px auto;
background-image: linear-gradient(#FFF 50px, transparent 0), linear-gradient(#FFF 50px, transparent 0), linear-gradient(#FFF 50px, transparent 0), linear-gradient(#FFF 50px, transparent 0), radial-gradient(circle 14px, #FFF 100%, transparent 0);
background-size: 48px 15px , 15px 35px, 15px 35px, 25px 15px, 28px 28px;
background-position: 25px 5px, 58px 20px, 25px 17px, 2px 37px, 76px 0px;
background-repeat: no-repeat;
position: relative;
transform: rotate(-45deg);
box-sizing: border-box;
}
.loader::after,
.loader::before {
content: '';
position: absolute;
width: 56px;
height: 56px;
border: 6px solid #FFF;
border-radius: 50%;
left: -45px;
top: -10px;
background-repeat: no-repeat;
background-image: linear-gradient(#FFF 64px, transparent 0), linear-gradient(#FFF 66px, transparent 0), radial-gradient(circle 4px, #FFF 100%, transparent 0);
background-size: 40px 1px , 1px 40px, 8px 8px;
background-position: center center;
box-sizing: border-box;
animation: rotation 0.3s linear infinite;
}
.loader::before {
left: 25px;
top: 60px;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
Example 106:
<span class="loader"></span>
<style>
.loader {
width: 48px;
height: 24px;
color: #FFF;
background: currentColor;
border-radius: 50% 50% 0 0;
position: relative;
display: block;
margin: 60px auto 0;
box-sizing: border-box;
animation: animloader 4s linear infinite;
}
.loader::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 28px;
height: 28px;
border-radius: 50%;
background: currentColor;
top: -34px;
box-sizing: border-box;
animation: animloader1 4s linear infinite;
}
@keyframes animloader {
0% {
box-shadow: 0 0 0 -2px , 0 0 0 -2px , 0 0 0 -5px , 0 0 0 -5px;
}
20% {
box-shadow: 40px -1px 0 -2px , 0 0 0 -2px , 40px -1px 0 -5px , 0 0 0 -5px;
}
40% {
box-shadow: 40px -1px 0 -2px , -40px -1px 0 -2px , 40px -1px 0 -5px ,-40px -1px 0 -5px;
}
60% {
box-shadow: 40px -1px 0 -2px , -40px -1px 0 -2px , 23px -29px 0 -5px ,-40px -1px 0 -5px;
}
80%, 95% {
box-shadow: 40px -1px 0 -2px , -40px -1px 0 -2px , 23px -29px 0 -5px , -23px -29px 0 -5px;
}
100% {
box-shadow: 40px -1px 0 -2px rgba(255, 255, 255, 0), -40px -1px 0 -2px rgba(255, 255, 255, 0), 23px -29px 0 -5px rgba(255, 255, 255, 0), -23px -29px 0 -5px rgba(255, 255, 255, 0);
}
}
@keyframes animloader1 {
0% {
box-shadow: 0 0 0 -2px , 0 0 0 -2px , 0 0 0 -5px , 0 0 0 -5px;
}
20% {
box-shadow: 40px 2px 0 -2px , 0 0 0 -2px , 40px 2px 0 -5px , 0 0 0 -5px;
}
40% {
box-shadow: 40px 2px 0 -2px , -40px 2px 0 -2px , 40px 2px 0 -5px , -40px 2px 0 -5px;
}
60% {
box-shadow: 40px 2px 0 -2px , -40px 2px 0 -2px , 23px -23px 0 -5px , -40px 2px 0 -5px;
}
80%, 95% {
box-shadow: 40px 2px 0 -2px , -40px 2px 0 -2px , 23px -23px 0 -5px , -23px -23px 0 -5px;
}
100% {
box-shadow: 40px 2px 0 -2px rgba(255, 255, 255, 0), -40px 2px 0 -2px rgba(255, 255, 255, 0), 23px -23px 0 -5px rgba(255, 255, 255, 0), -23px -23px 0 -5px rgba(255, 255, 255, 0);
}
}
</style>
Example 107:
Loading
<span class="loader">Loading</span>
<style>
.loader {
font-size: 48px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
display: inline-block;
color: #FF3D00;
letter-spacing: 2px;
position: relative;
box-sizing: border-box;
}
.loader::after {
content: 'Loading';
position: absolute;
left: 0;
top: 0;
color: #FFF;
width: 100%;
height: 100%;
overflow: hidden;
box-sizing: border-box;
animation: animloader 6s linear infinite;
}
@keyframes animloader {
0% {
height: 100%;
}
100% {
height: 0%;
}
}
</style>
Example 108:
Loading
<span class="loader">Loading</span>
<style>
.loader {
font-size: 48px;
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFF;
letter-spacing: 2px;
position: relative;
box-sizing: border-box;
}
.loader::after {
content: 'Loading';
position: absolute;
left: 0;
top: 0;
color: #263238;
text-shadow: 0 0 2px #FFF, 0 0 1px #FFF, 0 0 1px #FFF;
width: 100%;
height: 100%;
overflow: hidden;
box-sizing: border-box;
animation: animloader 6s linear infinite;
}
@keyframes animloader {
0% {
height: 100%;
}
100% {
height: 0%;
}
}
</style>
Example 109:
Loading
<span class="loader">Loading</span>
<style>
.loader {
font-size: 48px;
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #263238;
box-sizing: border-box;
text-shadow: 0 0 2px #FFF, 0 0 1px #FFF, 0 0 1px #FFF;
letter-spacing: 2px;
position: relative;
}
.loader::after {
content: 'Loading';
position: absolute;
left: 0;
top: 0;
color: #FFF;
width: 100%;
height: 100%;
overflow: hidden;
box-sizing: border-box;
animation: animloader 6s linear infinite;
}
@keyframes animloader {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
</style>
Example 110:
L ading
<span class="loader">L ading</span>
<style>
.loader {
display: inline-block;
font-size: 48px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFF;
position: relative;
}
.loader::before {
content: '';
position: absolute;
left: 34px;
bottom: 8px;
width: 30px;
height: 30px;
border-radius: 50%;
border: 5px solid #FFF;
border-bottom-color: #FF3D00;
box-sizing: border-box;
animation: rotation 0.6s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
Example 111:
Load ng
<span class="loader">Load ng</span>
<style>
.loader {
color: #FFF;
position: relative;
display: inline-block;
margin-top: 40px;
font-family: Arial, Helvetica, sans-serif;
font-size: 48px;
letter-spacing: 4px;
box-sizing: border-box;
}
.loader::before {
content: '';
position: absolute;
right: 70px;
bottom: 10px;
height: 28px;
width: 5.15px;
background: currentColor;
box-sizing: border-box;
animation: animloader1 1s linear infinite alternate;
}
.loader::after {
content: '';
width: 10px;
height: 10px;
position: absolute;
left: 125px;
top: 2px;
border-radius: 50%;
background: red;
box-sizing: border-box;
animation: animloader 1s linear infinite alternate;
}
@keyframes animloader {
0% {
transform: translate(0px, 0px) scaleX(1);
}
14% {
transform: translate(-12px, -16px) scaleX(1.05);
}
28% {
transform: translate(-27px, -28px) scaleX(1.07);
}
42% {
transform: translate(-46px, -35px) scaleX(1.1);
}
57% {
transform: translate(-70px, -37px) scaleX(1.1);
}
71% {
transform: translate(-94px, -32px) scaleX(1.07);
}
85% {
transform: translate(-111px, -22px) scaleX(1.05);
}
100% {
transform: translate(-125px, -9px) scaleX(1);
}
}
@keyframes animloader1 {
0% {
box-shadow: 0 -6px, -122.9px -8px;
}
25%, 75% {
box-shadow: 0 0px, -122.9px -8px;
}
100% {
box-shadow: 0 0px, -122.9px -16px;
}
}
</style>
Example 112:
Load ng
<span class="loader">Load ng</span>
<style>
.loader {
color: #FFF;
position: relative;
display: inline-block;
margin-top: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 48px;
letter-spacing: 4px;
box-sizing: border-box;
}
.loader::before {
content: '';
box-sizing: border-box;
position: absolute;
right: 70px;
bottom: 10px;
height: 24px;
width: 5.15px;
background: currentColor;
}
.loader::after {
content: '';
width: 8px;
height: 8px;
position: absolute;
left: 125px;
top: 2px;
border-radius: 50%;
background: red;
box-sizing: border-box;
animation: animloader 1s ease-in infinite;
}
@keyframes animloader {
0% {
transform: translateY(8px) scaleY(1) scaleX(1.25);
}
25%, 75% {
transform: translateY(-5px) scaleY(1.2) scaleX(1);
}
50% {
transform: translateY(-10px) scaleY(1) scaleX(1);
}
100% {
transform: translateY(8px) scaleY(0.8) scaleX(0.8);
}
}
</style>
Example 113:
Loading
<span class="loader">Loading</span>
<style>
.loader {
color: #FFF;
display: inline-block;
position: relative;
font-size: 48px;
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
.loader::after {
content: '';
width: 5px;
height: 5px;
background: currentColor;
position: absolute;
bottom: 10px;
right: -5px;
box-sizing: border-box;
animation: animloader 1s linear infinite;
}
@keyframes animloader {
0% {
box-shadow: 10px 0 rgba(255, 255, 255, 0), 20px 0 rgba(255, 255, 255, 0);
}
50% {
box-shadow: 10px 0 white, 20px 0 rgba(255, 255, 255, 0);
}
100% {
box-shadow: 10px 0 white, 20px 0 white;
}
}
</style>
Example 114:
Load ng
<span class="loader">Load ng</span>
<style>
.loader {
color: #FFF;
display: inline-block;
position: relative;
font-family: Arial, Helvetica, sans-serif;
font-size: 48px;
letter-spacing: 4px;
box-sizing: border-box;
}
.loader::before {
content: '';
position: absolute;
right: 70px;
bottom: 10px;
height: 24px;
width: 5px;
background: currentColor;
box-sizing: border-box;
}
.loader::after {
content: '';
width: 4px;
height: 4px;
background: currentColor;
position: absolute;
right: 70px;
top: 8px;
box-sizing: border-box;
animation: animloader 0.6s ease-out infinite alternate;
}
@keyframes animloader {
0% {
top: 8px;
transform: rotate(0deg) scale(1);
}
100% {
top: 0px;
transform: rotate(180deg) scale(1.5);
}
}
</style>
Example 115:
Load ng
<span class="loader">Load ng</span>
<style>
.loader {
color: #FFF;
display: inline-block;
position: relative;
font-family: Arial, Helvetica, sans-serif;
font-size: 48px;
letter-spacing: 4px;
box-sizing: border-box;
}
.loader::before {
content: '';
position: absolute;
right: 68px;
bottom: 10px;
height: 24px;
width: 7px;
outline: 1px solid #FFF;
color: #FF3D00;
box-sizing: border-box;
animation: animloader1 1s linear infinite alternate;
}
.loader::after {
content: '';
width: 4px;
height: 4px;
background: #FF3D00;
position: absolute;
right: 70px;
top: 8px;
box-sizing: border-box;
animation: animloader 1s ease-out infinite alternate;
}
@keyframes animloader {
0% {
top: 8px;
transform: rotate(0deg) scale(1);
}
100% {
top: 0px;
transform: rotate(180deg) scale(1.5);
}
}
@keyframes animloader1 {
0% {
box-shadow: 0 0 inset;
}
100% {
box-shadow: 0 -28px inset;
}
}
</style>
Example 116:
<span class="loader"></span>
<style>
.loader {
position: relative;
display: inline-block;
}
.loader::before {
content: 'Loading';
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 48px;
letter-spacing: 2px;
display: inline-block;
box-sizing: border-box;
animation: floating 1s ease-out infinite alternate;
}
.loader::after {
content: '';
width: 100%;
height: 10px;
background: rgba(0, 0, 0, 0.15);
position: absolute;
left: 0;
top: 100%;
filter: blur(4px);
border-radius: 50%;
box-sizing: border-box;
animation: animloader 1s ease-out infinite alternate;
}
@keyframes floating {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-25px);
}
}
@keyframes animloader {
0% {
transform: scale(0.8);
}
100% {
transform: scale(1.2);
}
}
</style>
Example 117:
Loading
<span class="loader">Loading</span>
<style>
.loader {
font-size: 48px;
display: inline-block;
letter-spacing: 2px;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
box-sizing: border-box;
animation: animloader 1s ease-in infinite alternate;
}
@keyframes animloader {
0% {
filter: blur(0px);
transform: skew(0deg);
}
100% {
filter: blur(3px);
transform: skew(-4deg);
}
}
</style>
Example 118:
Loading
<span class="loader">Loading</span>
<style>
.loader {
font-size: 48px;
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF3D00;
letter-spacing: 2px;
position: relative;
}
.loader::after {
content: 'Loading';
position: absolute;
left: 0;
top: 0;
color: #FFF;
width: 100%;
height: 100%;
overflow: hidden;
box-sizing: border-box;
animation: animloader 10s ease-in infinite;
}
@keyframes animloader {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
</style>
Example 119:
<span class="loader"></span>
<style>
.loader {
width: 100%;
height: 100px;
display: block;
background-image: linear-gradient(100deg, transparent, rgba(38, 50, 56, 0.5) 50%, transparent 80%), radial-gradient(circle 50px at 50px 50px, #FFF 99%, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0);
background-repeat: no-repeat;
background-size: 75px 100px, 100px 100px, 125px 20px, 260px 20px, 260px 20px;
background-position: -50% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
box-sizing: border-box;
animation: animloader 1s linear infinite;
}
@keyframes animloader {
0% {
background-position: 0% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
}
100% {
background-position: 100% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
}
}
</style>
Example 120:
<span class="loader"></span>
<style>
.loader {
width: 100%;
height: 100px;
display: block;
background-image: linear-gradient(100deg, transparent, rgba(38, 50, 56, 0.5) 50%, transparent 80%), linear-gradient(#FFF 100px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0);
background-repeat: no-repeat;
background-size: 75px 100px, 100px 100px, 125px 20px, 260px 20px, 260px 20px;
background-position: -50% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
box-sizing: border-box;
animation: animloader 1s linear infinite;
}
@keyframes animloader {
0% {
background-position: 0% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
}
100% {
background-position: 100% 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
}
}
</style>
Example 121:
<span class="loader"></span>
<style>
.loader {
width: 100%;
height: 100px;
display: block;
position: relative;
background-image: linear-gradient(100deg, transparent, rgba(38, 50, 56, 0.5) 50%, transparent 80%), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0);
background-repeat: no-repeat;
background-size: 75px 100px, 125px 20px, 260px 20px, 260px 20px;
background-position: 0% 0, 120px 0, 120px 40px, 120px 80px;
box-sizing: border-box;
animation: animloader 1s linear infinite;
}
.loader::after {
content: '';
box-sizing: border-box;
width: 100px;
height: 100px;
border-radius: 8px;
background: #FFF;
position: absolute;
top: 0;
left: 0;
}
@keyframes animloader {
0% {
background-position: 0% 0, 120px 0, 120px 40px, 120px 80px;
}
100% {
background-position: 100% 0, 120px 0, 120px 40px, 120px 80px;
}
}
</style>
Example 122:
<span class="loader"></span>
<style>
.loader {
width: 320px;
height: 150px;
margin: auto;
display: block;
position: relative;
background: #FFF;
box-sizing: border-box;
}
.loader::after {
content: '';
width: calc(100% - 30px);
height: calc(100% - 30px);
top: 15px;
left: 15px;
position: absolute;
background-image: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5) 50%, transparent 80%), linear-gradient(#DDD 56px, transparent 0), linear-gradient(#DDD 24px, transparent 0), linear-gradient(#DDD 18px, transparent 0), linear-gradient(#DDD 66px, transparent 0);
background-repeat: no-repeat;
background-size: 75px 130px, 55px 56px, 160px 30px, 260px 20px, 290px 56px;
background-position: 0% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
box-sizing: border-box;
animation: animloader 1s linear infinite;
}
@keyframes animloader {
0% {
background-position: 0% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
}
100% {
background-position: 150% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
}
}
</style>
Example 123:
<span class="loader"></span>
<style>
.loader {
width: 320px;
height: 150px;
display: block;
margin: auto;
position: relative;
background: #FFF;
box-sizing: border-box;
}
.loader::after {
content: '';
width: calc(100% - 30px);
height: calc(100% - 30px);
top: 15px;
left: 15px;
position: absolute;
background-image: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5) 50%, transparent 80%), radial-gradient(circle 28px at 28px 28px, #DDD 99%, transparent 0), linear-gradient(#DDD 24px, transparent 0), linear-gradient(#DDD 18px, transparent 0), linear-gradient(#DDD 66px, transparent 0);
background-repeat: no-repeat;
background-size: 75px 130px, 55px 56px, 160px 30px, 260px 20px, 290px 56px;
background-position: 0% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
box-sizing: border-box;
animation: animloader 1s linear infinite;
}
@keyframes animloader {
0% {
background-position: 0% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
}
100% {
background-position: 150% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
}
}
</style>
Example 125:
<span class="loader"></span>
<style>
.loader {
width: 164px;
height: 170px;
display: block;
margin: auto;
position: relative;
background: #FFF;
box-sizing: border-box;
}
.loader::after {
content: '';
width: calc(100% - 30px);
height: calc(100% - 30px);
top: 15px;
left: 15px;
position: absolute;
background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5) 50%, transparent 100%), linear-gradient(#DDD 74px, transparent 0), linear-gradient(#DDD 16px, transparent 0), linear-gradient(#DDD 24px, transparent 0);
background-repeat: no-repeat;
background-size: 50px 170px, 100% 74px, 100% 16px, 100% 32px;
background-position: 0 0, 0 0, 0px 85px, 0px 110px;
box-sizing: border-box;
animation: animloader 1s linear infinite;
}
@keyframes animloader {
0% {
background-position: 0 0, 0 0, 0px 85px, 0px 110px;
}
100% {
background-position: 150% 0, 0 0, 0px 85px, 0px 110px;
}
}
</style>