25 Creative CSS Loading Animations for Modern Web Design

Creative CSS Loading Animation

CSS loading animations are an essential part of modern web design, providing a visual cue that content is being loaded and enhancing the overall user experience. With CSS, creating these animations can be both simple and highly effective. In this blog post, we’ll explore 25 creative CSS loading animations that you can easily implement to make your website more engaging and user-friendly. Best of all, these CSS loading animations are compatible with all major browsers.

Why Use CSS Loading Animations?

Improved User Experience

CSS loading animations keep users engaged while waiting for content to load, reducing perceived wait times and preventing frustration.

Visual Appeal

Well-designed CSS loading animations can add a touch of professionalism and creativity to your website, making it stand out from the competition.

Accessibility

CSS loading animations are lightweight and can be designed to be accessible, ensuring that all users, including those using screen readers, have a smooth experience.

How to Implement CSS Loading Animations

Implementing CSS loading animations involves a few key steps:

HTML Structure: Define the HTML structure for your preloader.
CSS Styling: Use CSS to create the animation.

25 Creative CSS Loading Animations:

Creative CSS Loading Animation 1:

<style>
    .cr-preloader-wrapper {
        background: #ffffff;
    }
    .cr-preloader-wrapper .cr-preloader {
        background: #e4edff;
        padding: 20px;
        width: 250px;
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        position: relative;
    }
    /*======= 1. Loading Animation =======*/
    .cr-preloader-v1 .cr-preloader-item  {
        width: 52px;
        height: 52px;
        border: 10px #ff6122 double;
        border-left-style: solid;
        border-radius: 50%;
        box-sizing: border-box;
        animation: preloader-spin 0.75s infinite linear;
        -webkit-animation: preloader-spin 0.75s infinite linear; 
        -moz-animation: preloader-spin 0.75s infinite linear; 
        -o-animation: preloader-spin 0.75s infinite linear; 
        -ms-animation: preloader-spin 0.75s infinite linear; 
    }
    @keyframes preloader-spin {
        to { transform: rotate(360deg); }
    }

    @-webkit-keyframes preloader-spin {
        to { -webkit-transform: rotate(360deg); }
    }
</style>
<div class="cr-preloader-wrapper">
  <!--======= 1. Loading Animation =======-->
  <div class="cr-preloader cr-preloader-v1">
      <div class="cr-preloader-item"></div>
  </div>
</div>

Creative CSS Loading Animation 2:

<style>
    .cr-preloader-wrapper {
        background: #ffffff;
    }
    .cr-preloader-wrapper .cr-preloader {
        background: #e4edff;
        padding: 20px;
        width: 250px;
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        position: relative;
    }
    /*======= 2. Loading Animation =======*/
    .cr-preloader-v2 .cr-preloader-item {
        width: 20px;
        height: 20px;
        background-color: #ff6122;
        border-radius: 50%;
        box-sizing: border-box;
        animation: preloader2-pulse 1s infinite;
        -webkit-animation: preloader2-pulse 1s infinite;
        -moz-animation: preloader2-pulse 1s infinite; 
        -o-animation: preloader2-pulse 1s infinite; 
        -ms-animation: preloader2-pulse 1s infinite;
    }

    @keyframes preloader2-pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.5); }
    }

    @-webkit-keyframes preloader2-pulse {
        0%, 100% { -webkit-transform: scale(1); }
        50% { -webkit-transform: scale(1.5); }
    }
</style>

<div class="cr-preloader-wrapper">
    <!--======= 2. Loading Animation =======-->
    <div class="cr-preloader cr-preloader-v2">
        <div class="cr-preloader-item"></div>
    </div>
</div>

Creative CSS Loading Animation 3:

<style>
    .cr-preloader-wrapper {
        background: #ffffff;
    }
    .cr-preloader-wrapper .cr-preloader {
        background: #e4edff;
        padding: 20px;
        width: 250px;
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        position: relative;
    }
    /*======= 3. Loading Animation =======*/
    .cr-preloader-v3 .cr-preloader-item {
        display: flex;
        justify-content: space-between;
        width: 60px;
    }

    .cr-preloader-v3 .cr-preloader-item div {
        width: 15px;
        height: 15px;
        background-color: #ff6122;
        border-radius: 50%;
        box-sizing: border-box;
        animation: preloader3-bounce 0.6s infinite alternate;
        -webkit-animation: preloader3-bounce 0.6s infinite alternate; 
        -moz-animation: preloader3-bounce 0.6s infinite alternate; 
        -o-animation: preloader3-bounce 0.6s infinite alternate; 
        -ms-animation: preloader3-bounce 0.6s infinite alternate;
    }

    .cr-preloader-v3 .cr-preloader-item div:nth-child(2) {
        animation-delay: 0.2s;
        -webkit-animation-delay: 0.2s; 
        -moz-animation-delay: 0.2s; 
        -o-animation-delay: 0.2s; 
        -ms-animation-delay: 0.2s; 
    }

    .cr-preloader-v3 .cr-preloader-item div:nth-child(3) {
        animation-delay: 0.4s;
        -webkit-animation-delay: 0.4s; 
        -moz-animation-delay: 0.4s; 
        -o-animation-delay: 0.4s; 
        -ms-animation-delay: 0.4s; 
    }

    @keyframes preloader3-bounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-15px); }
    }

    @-webkit-keyframes preloader3-bounce {
        0%, 100% { -webkit-transform: translateY(0); }
        50% { -webkit-transform: translateY(-15px); }
    }
</style>

<div class="cr-preloader-wrapper">
  <!--======= 3. Loading Animation =======-->
  <div class="cr-preloader cr-preloader-v3">
    <div class="cr-preloader-item">
        <div></div>
        <div></div>
        <div></div>
    </div>
  </div>
</div>

Creative CSS Loading Animation 4:

<style>
    .cr-preloader-wrapper {
        background: #ffffff;
    }
    .cr-preloader-wrapper .cr-preloader {
        background: #e4edff;
        padding: 20px;
        width: 250px;
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        position: relative;
    }
    /*======= 4. Loading Animation =======*/
    .cr-preloader-v4 .cr-preloader-item {
        width: 90px;
        box-sizing: content-box;
        height: 42px;
        background: #ffffff;
        border-color: #ff6122;
        border-style: solid;
        border-width: 2px 2px 50px 2px;
        border-radius: 100%;
        position: relative;
        animation: preloader4 3s linear infinite;
        -webkit-animation: preloader4 3s linear infinite;
        -moz-animation: preloader4 3s linear infinite;
        -o-animation: preloader4 3s linear infinite;
        -ms-animation: preloader4 3s linear infinite;
    }
    .cr-preloader-v4 .cr-preloader-item:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        background: #ffffff;
        border: 15px solid #ff6122;
        border-radius: 100%;
        width: 15px;
        height: 15px;
        box-sizing: content-box;
    }
    .cr-preloader-v4 .cr-preloader-item:after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        background: #ff6122;
        border: 15px solid #ffffff;
        border-radius: 100%;
        width: 15px;
        height: 15px;
        box-sizing: content-box;
    }
    @keyframes preloader4 {
        100% { transform: rotate(360deg); }
    }
    @-webkit-keyframes preloader4 {
        100% { -webkit-transform: rotate(360deg); }
    }
    @-moz-keyframes preloader4 {
        100% { -moz-transform: rotate(360deg); }
    }
    @-o-keyframes preloader4 {
        100% { -o-transform: rotate(360deg); }
    }
    @-ms-keyframes preloader4 {
        100% { -ms-transform: rotate(360deg); }
    }
</style>

<div class="cr-preloader-wrapper">
    <!--======= 4. Loading Animation =======-->
    <div class="cr-preloader cr-preloader-v4">
        <div class="cr-preloader-item"></div>
    </div>
</div>

Loading Animation 5:

<style>
    .cr-preloader-wrapper {
        background: #ffffff;
    }
    .cr-preloader-wrapper .cr-preloader {
        background: #e4edff;
        padding: 20px;
        width: 250px;
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        position: relative;
    }
    /*======= 5. Loading Animation =======*/
    .cr-preloader-v5 .cr-preloader-item {
        display: inline-block;
        width: 50px;
        height: 80px;
        border-top: 5px solid #ffffff;
        border-bottom: 5px solid #ffffff;
        position: relative;
        background: linear-gradient(#ff6122 30px, transparent 0) no-repeat;
        background-size: 2px 40px;
        background-position: 50% 0px;
        animation: preloader5-spinx 5s linear infinite;
        -webkit-animation: preloader5-spinx 5s linear infinite;
        -moz-animation: preloader5-spinx 5s linear infinite;
        -o-animation: preloader5-spinx 5s linear infinite;
    }

    .cr-preloader-v5 .cr-preloader-item:before, 
    .cr-preloader-v5 .cr-preloader-item:after {
        content: "";
        width: 40px;
        left: 50%;
        height: 35px;
        position: absolute;
        top: 0;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        background: rgba(255, 255, 255, 0.4);
        border-radius: 0 0 20px 20px;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: 0 0px;
        animation: preloader5-lqt 5s linear infinite;
        -webkit-animation: preloader5-lqt 5s linear infinite;
        -moz-animation: preloader5-lqt 5s linear infinite;
        -o-animation: preloader5-lqt 5s linear infinite;
    }

    .cr-preloader-v5 .cr-preloader-item:after {
        top: auto;
        bottom: 0;
        border-radius: 20px 20px 0 0;
        animation: preloader5-lqb 5s linear infinite;
        -webkit-animation: preloader5-lqb 5s linear infinite;
        -moz-animation: preloader5-lqb 5s linear infinite;
        -o-animation: preloader5-lqb 5s linear infinite;
    }

    @keyframes preloader5-lqt {
        0%, 100% {
            background-image: linear-gradient(#ff6122 40px, transparent 0);
            background-position: 0% 0px;
        }
        50% {
            background-image: linear-gradient(#ff6122 40px, transparent 0);
            background-position: 0% 40px;
        }
        50.1% {
            background-image: linear-gradient(#ff6122 40px, transparent 0);
            background-position: 0% -40px;
        }
    }

    @-webkit-keyframes preloader5-lqt {
        0%, 100% {
            background-image: linear-gradient(#ff6122 40px, transparent 0);
            background-position: 0% 0px;
        }
        50% {
            background-image: linear-gradient(#ff6122 40px, transparent 0);
            background-position: 0% 40px;
        }
        50.1% {
            background-image: linear-gradient(#ff6122 40px, transparent 0);
            background-position: 0% -40px;
        }
    }

    @-moz-keyframes preloader5-lqt {
        0%, 100% {
            background-image: linear-gradient(#ff6122 40px, transparent 0);
            background-position: 0% 0px;
        }
        50% {
            background-image: linear-gradient(#ff6122 40px, transparent 0);
            background-position: 0% 40px;
        }
        50.1% {
            background-image: linear-gradient(#ff6122 40px, transparent 0);
            background-position: 0% -40px;
        }
    }

    @-o-keyframes preloader5-lqt {
        0%, 100% {
            background-image: linear-gradient(#ff6122 40px, transparent 0);
            background-position: 0% 0px;
        }
        50% {
            background-image: linear-gradient(#ff6122 40px, transparent 0);
            background-position: 0% 40px;
        }
        50.1% {
            background-image: linear-gradient(#ff6122 40px, transparent 0);
            background-position: 0% -40px;
        }
    }

    @keyframes preloader5-lqb {
        0% {
            background-image: linear-gradient(#ff6122 40px, transparent 0);
            background-position: 0 40px;
        }
        100% {
            background-image: linear-gradient(#ff6122 40px, transparent 0);
            background-position: 0 -40px;
        }
    }

    @-webkit-keyframes preloader5-lqb {
        0% {
            background-image: linear-gradient(#ff6122 40px, transparent 0);
            background-position: 0 40px;
        }
        100% {
            background-image: linear-gradient(#ff6122 40px, transparent 0);
            background-position: 0 -40px;
        }
    }

    @-moz-keyframes preloader5-lqb {
        0% {
            background-image: linear-gradient(#ff6122 40px, transparent 0);
            background-position: 0 40px;
        }
        100% {
            background-image: linear-gradient(#ff6122 40px, transparent 0);
            background-position: 0 -40px;
        }
    }

    @-o-keyframes preloader5-lqb {
        0% {
            background-image: linear-gradient(#ff6122 40px, transparent 0);
            background-position: 0 40px;
        }
        100% {
            background-image: linear-gradient(#ff6122 40px, transparent 0);
            background-position: 0 -40px;
        }
    }

    @keyframes preloader5-spinx {
        0%, 49% {
            transform: rotate(0deg);
            background-position: 50% 36px;
        }
        51%, 98% {
            transform: rotate(180deg);
            background-position: 50% 4px;
        }
        100% {
            transform: rotate(360deg);
            background-position: 50% 36px;
        }
    }

    @-webkit-keyframes preloader5-spinx {
        0%, 49% {
            -webkit-transform: rotate(0deg);
            background-position: 50% 36px;
        }
        51%, 98% {
            -webkit-transform: rotate(180deg);
            background-position: 50% 4px;
        }
        100% {
            -webkit-transform: rotate(360deg);
            background-position: 50% 36px;
        }
    }

    @-moz-keyframes preloader5-spinx {
        0%, 49% {
            -moz-transform: rotate(0deg);
            background-position: 50% 36px;
        }
        51%, 98% {
            -moz-transform: rotate(180deg);
            background-position: 50% 4px;
        }
        100% {
            -moz-transform: rotate(360deg);
            background-position: 50% 36px;
        }
    }

    @-o-keyframes preloader5-spinx {
        0%, 49% {
            -o-transform: rotate(0deg);
            background-position: 50% 36px;
        }
        51%, 98% {
            -o-transform: rotate(180deg);
            background-position: 50% 4px;
        }
        100% {
            -o-transform: rotate(360deg);
            background-position: 50% 36px;
        }
    }

</style>

<div class="cr-preloader-wrapper">
  <!--======= 5. Loading Animation =======-->
  <div class="cr-preloader cr-preloader-v5">
    <div class="cr-preloader-item"></div>
  </div>
</div>

Loading Animation 6:

<style>
    .cr-preloader-wrapper {
        background: #ffffff;
    }
    .cr-preloader-wrapper .cr-preloader {
        background: #e4edff;
        padding: 20px;
        width: 250px;
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        position: relative;
    }
    /*======= 6. Loading Animation =======*/
    .cr-preloader-v6 .cr-preloader-item {
        display: flex;
        justify-content: space-around;
        width: 80px;
    }

    .cr-preloader-v6 .cr-preloader-item div {
        width: 15px;
        height: 15px;
        background-color: #ff6122;
        border-radius: 50%;
        animation: preloader6-fade 1s infinite;
        -webkit-animation: preloader6-fade 1s infinite; 
        -moz-animation: preloader6-fade 1s infinite; 
        -o-animation: preloader6-fade 1s infinite; 
        -ms-animation: preloader6-fade 1s infinite; 
    }

    .cr-preloader-v6 .cr-preloader-item div:nth-child(2) {
        animation-delay: 0.2s;
        -webkit-animation-delay: 0.2s; 
        -moz-animation-delay: 0.2s; 
        -o-animation-delay: 0.2s; 
        -ms-animation-delay: 0.2s; 
    }

    .cr-preloader-v6 .cr-preloader-item div:nth-child(3) {
        animation-delay: 0.4s;
        -webkit-animation-delay: 0.4s; 
        -moz-animation-delay: 0.4s; 
        -o-animation-delay: 0.4s; 
        -ms-animation-delay: 0.4s; 
    }

    @keyframes preloader6-fade {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.3; }
    }

    @-webkit-keyframes preloader6-fade {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.3; }
    }

</style>

<div class="cr-preloader-wrapper">
  <!--======= 6. Loading Animation =======-->
  <div class="cr-preloader cr-preloader-v6">
    <div class="cr-preloader-item">
        <div></div>
        <div></div>
        <div></div>
    </div>
  </div>
</div>

CSS Loading Animation 7:

<style>
    .cr-preloader-wrapper {
        background: #ffffff;
    }
    .cr-preloader-wrapper .cr-preloader {
        background: #e4edff;
        padding: 20px;
        width: 250px;
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        position: relative;
    }
    /*======= 7. Loading Animation =======*/
    .cr-preloader-v7 .cr-preloader-item {
        width: 40px;
        height: 40px;
        background-color: #ff6122;
        animation: preloader7-zoom 1s infinite;
        -webkit-animation: preloader7-zoom 1s infinite; 
        -moz-animation: preloader7-zoom 1s infinite; 
        -o-animation: preloader7-zoom 1s infinite; 
        -ms-animation: preloader7-zoom 1s infinite; 
    }

    @keyframes preloader7-zoom {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.5); }
    }

    @-webkit-keyframes preloader7-zoom {
        0%, 100% { -webkit-transform: scale(1); }
        50% { -webkit-transform: scale(1.5); }
    }
</style>

<div class="cr-preloader-wrapper">
  <!--======= 7. Loading Animation =======-->
  <div class="cr-preloader cr-preloader-v7">
    <div class="cr-preloader-item"></div>
  </div>
</div>

CSS Loading Animation 8:

<style>
    .cr-preloader-wrapper {
        background: #ffffff;
    }
    .cr-preloader-wrapper .cr-preloader {
        background: #e4edff;
        padding: 20px;
        width: 250px;
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        position: relative;
    }
    /*======= 8. Loading Animation =======*/
    .cr-preloader-v8 .cr-preloader-item {
        width: 100px;
        height: 100px;
        background-color: #ff6122;
        border-radius: 50%;
        position: relative;
        box-shadow: 0 0 30px 4px rgba(0, 0, 0, 0.5) inset,
                    0 5px 12px rgba(0, 0, 0, 0.15);
        overflow: hidden;
    }

    .cr-preloader-v8 .cr-preloader-item:before,
    .cr-preloader-v8 .cr-preloader-item:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 45%;
        top: -40%;
        background-color: #ffffff;
        animation: preloader8-wave 5s linear infinite;
        -webkit-animation: preloader8-wave 5s linear infinite;
        -moz-animation: preloader8-wave 5s linear infinite;
        -o-animation: preloader8-wave 5s linear infinite;
    }

    .cr-preloader-v8 .cr-preloader-item:before {
        border-radius: 30%;
        background: rgba(255, 255, 255, 0.4);
        animation: preloader8-wave 5s linear infinite;
        -webkit-animation: preloader8-wave 5s linear infinite;
        -moz-animation: preloader8-wave 5s linear infinite;
        -o-animation: preloader8-wave 5s linear infinite;
    }

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

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

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

    @-o-keyframes preloader8-wave {
        0% {
            -o-transform: rotate(0);
        }
        100% {
            -o-transform: rotate(360deg);
        }
    }
</style>

<div class="cr-preloader-wrapper">
  <!--======= 8. Loading Animation =======-->
  <div class="cr-preloader cr-preloader-v8">
    <div class="cr-preloader-item"></div>
  </div>
</div>

CSS Loading Animation 9:

<style>
    .cr-preloader-wrapper {
        background: #ffffff;
    }
    .cr-preloader-wrapper .cr-preloader {
        background: #e4edff;
        padding: 20px;
        width: 250px;
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        position: relative;
    }
    /*======= 9. Loading Animation =======*/
    .cr-preloader-v9 .cr-preloader-item {
        display: grid;
        grid-template-columns: repeat(3, 20px);
        grid-gap: 5px;
        box-sizing: border-box;
    }

    .cr-preloader-v9 .cr-preloader-item div {
        width: 15px;
        height: 15px;
        background-color: #ff6122;
        border-radius: 50%;
        box-sizing: border-box;
        animation: preloader9-dot-move 1.5s infinite;
        -webkit-animation: preloader9-dot-move 1.5s infinite; 
        -moz-animation: preloader9-dot-move 1.5s infinite; 
        -o-animation: preloader9-dot-move 1.5s infinite; 
        -ms-animation: preloader9-dot-move 1.5s infinite; 
    }

    @keyframes preloader9-dot-move {
        0%, 100% { transform: translate(0, 0); }
        25% { transform: translate(20px, 0); }
        50% { transform: translate(20px, 20px); }
        75% { transform: translate(0, 20px); }
    }

    @-webkit-keyframes preloader9-dot-move {
        0%, 100% { -webkit-transform: translate(0, 0); }
        25% { -webkit-transform: translate(20px, 0); }
        50% { -webkit-transform: translate(20px, 20px); }
        75% { -webkit-transform: translate(0, 20px); }
    }
</style>

<div class="cr-preloader-wrapper">
  <!--======= 9. Loading Animation =======-->
  <div class="cr-preloader cr-preloader-v9">
    <div class="cr-preloader-item">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
  </div>
</div>

Loading Animation 10:

<style>
    .cr-preloader-wrapper {
        background: #ffffff;
    }
    .cr-preloader-wrapper .cr-preloader {
        background: #e4edff;
        padding: 20px;
        width: 250px;
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        position: relative;
    }
   /*======= 10. Loading Animation =======*/
   .cr-preloader-v10 .cr-preloader-item {
        width: 65px;
        height: 30px;
        position: relative;
    }

    .cr-preloader-v10 .cr-preloader-item:before {
        content: "";
        position: absolute;
        border-radius: 50px;
        box-shadow: 0 0 0 3px inset #ff6122;
        animation: preloaderl0 0.75s infinite alternate;
        -webkit-animation: preloaderl0 0.75s infinite alternate; 
        -moz-animation: preloaderl0 0.75s infinite alternate; 
        -o-animation: preloaderl0 0.75s infinite alternate; 
        -ms-animation: preloaderl0 0.75s infinite alternate; 
    }

    @keyframes preloaderl0 {
        0% {
            inset: 0 35px 0 0;
        }
        50% {
            inset: 0 0 0 0;
        }
        100% {
            inset: 0 0 0 35px;
        }
    }

    @-webkit-keyframes preloaderl0 {
        0% {
            inset: 0 35px 0 0;
        }
        50% {
            inset: 0 0 0 0;
        }
        100% {
            inset: 0 0 0 35px;
        }
    }
</style>

<div class="cr-preloader-wrapper">
  <!--======= 10. Loading Animation =======-->
  <div class="cr-preloader cr-preloader-v10">
    <div class="cr-preloader-item"></div>
  </div>
</div>

Loading Animation 11:

<style>
    .cr-preloader-wrapper {
        background: #ffffff;
    }
    .cr-preloader-wrapper .cr-preloader {
        background: #e4edff;
        padding: 20px;
        width: 250px;
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        position: relative;
    }
    /*======= 11. Loading Animation =======*/
    .cr-preloader-v11 .cr-preloader-item{
        display: flex;
        gap: 5px;
    }

    .cr-preloader-v11 .cr-preloader-item .bar {
        width: 10px;
        height: 40px;
        background-color: #ff6122;
        animation: preloader11-growShrink 1.2s infinite ease-in-out;
        -webkit-animation: preloader11-growShrink 1.2s infinite ease-in-out; 
        -moz-animation: preloader11-growShrink 1.2s infinite ease-in-out; 
        -o-animation: preloader11-growShrink 1.2s infinite ease-in-out; 
        -ms-animation: preloader11-growShrink 1.2s infinite ease-in-out; 
    }

    .cr-preloader-v11 .cr-preloader-item .bar:nth-child(1) {animation-delay: -1.1s;}
    .cr-preloader-v11 .cr-preloader-item .bar:nth-child(2) {animation-delay: -1s;}
    .cr-preloader-v11 .cr-preloader-item .bar:nth-child(3) {animation-delay: -0.9s;}
    .cr-preloader-v11 .cr-preloader-item .bar:nth-child(4) {animation-delay: -0.8s;}
    .cr-preloader-v11 .cr-preloader-item .bar:nth-child(5) {animation-delay: -0.7s;}

    @keyframes preloader11-growShrink {
        0%, 40%, 100% {
            transform: scaleY(1);
        }
        20% {
            transform: scaleY(1.8);
        }
    }

    @-webkit-keyframes preloader11-growShrink {
        0%, 40%, 100% {
            -webkit-transform: scaleY(1);
        }
        20% {
            -webkit-transform: scaleY(1.8);
        }
    }
</style>

<div class="cr-preloader-wrapper">
  <!--======= 11. Loading Animation =======-->
  <div class="cr-preloader cr-preloader-v11">
    <div class="cr-preloader-item">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
      </div>
  </div>
</div>

Loading Animation 12:

<style>
    .cr-preloader-wrapper {
        background: #ffffff;
    }
    .cr-preloader-wrapper .cr-preloader {
        background: #e4edff;
        padding: 20px;
        width: 250px;
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        position: relative;
    }
    /*======= 12. Loading Animation =======*/
    .cr-preloader-v12 .cr-preloader-item {
        display: inline-block;
        position: relative;
        width: 80px;
        height: 80px;
    }

    .cr-preloader-v12 .cr-preloader-item div {
        position: absolute;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #ff6122;
        animation: preloader12-grid 1.2s linear infinite;
        -webkit-animation: preloader12-grid 1.2s linear infinite; 
        -moz-animation: preloader12-grid 1.2s linear infinite; 
        -o-animation: preloader12-grid 1.2s linear infinite; 
        -ms-animation: preloader12-grid 1.2s linear infinite; 
    }

    .cr-preloader-v12 .cr-preloader-item div:nth-child(1) {
        top: 8px;
        left: 8px;
        animation-delay: 0s;
    }

    .cr-preloader-v12 .cr-preloader-item div:nth-child(2) {
        top: 8px;
        left: 32px;
        animation-delay: -0.4s;
    }

    .cr-preloader-v12 .cr-preloader-item div:nth-child(3) {
        top: 8px;
        left: 56px;
        animation-delay: -0.8s;
    }

    .cr-preloader-v12 .cr-preloader-item div:nth-child(4) {
        top: 32px;
        left: 8px;
        animation-delay: -0.4s;
    }

    .cr-preloader-v12 .cr-preloader-item div:nth-child(5) {
        top: 32px;
        left: 32px;
        animation-delay: -0.8s;
    }

    .cr-preloader-v12 .cr-preloader-item div:nth-child(6) {
        top: 32px;
        left: 56px;
        animation-delay: -1.2s;
    }

    .cr-preloader-v12 .cr-preloader-item div:nth-child(7) {
        top: 56px;
        left: 8px;
        animation-delay: -0.8s;
    }

    .cr-preloader-v12 .cr-preloader-item div:nth-child(8) {
        top: 56px;
        left: 32px;
        animation-delay: -1.2s;
    }

    .cr-preloader-v12 .cr-preloader-item div:nth-child(9) {
        top: 56px;
        left: 56px;
        animation-delay: -1.6s;
    }

    @keyframes preloader12-grid {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.5;
        }
    }

    @-webkit-keyframes preloader12-grid {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.5;
        }
    }
</style>

<div class="cr-preloader-wrapper">
  <!--======= 12. Loading Animation =======-->
  <div class="cr-preloader cr-preloader-v12">
    <div class="cr-preloader-item">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</div>

CSS Loading Animation 13:

<style>
    .cr-preloader-wrapper {
        background: #ffffff;
    }
    .cr-preloader-wrapper .cr-preloader {
        background: #e4edff;
        padding: 20px;
        width: 250px;
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        position: relative;
    }
    /*======= 13. Loading Animation =======*/
    .cr-preloader-v13 .cr-preloader-item {
        display: inline-block;
        position: relative;
        width: 80px;
        height: 80px;
    }

    .cr-preloader-v13 .cr-preloader-item div {
        position: absolute;
        border: 4px solid #ff6122;
        opacity: 1;
        border-radius: 50%;
        animation: preloader13-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
        -webkit-animation: preloader13-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; 
        -moz-animation: preloader13-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; 
        -o-animation: preloader13-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; 
        -ms-animation: preloader13-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; 
    }

    .cr-preloader-v13 .cr-preloader-item div:nth-child(2) {animation-delay: -0.5s;}

    @keyframes preloader13-ripple {
        0% {
            top: 36px;
            left: 36px;
            width: 8px;
            height: 8px;
            opacity: 0;
        }
        4.9% {
            top: 36px;
            left: 36px;
            width: 8px;
            height: 8px;
            opacity: 0;
        }
        5% {
            top: 36px;
            left: 36px;
            width: 8px;
            height: 8px;
            opacity: 1;
        }
        100% {
            top: 0;
            left: 0;
            width: 80px;
            height: 80px;
            opacity: 0;
        }
    }

    @-webkit-keyframes preloader13-ripple {
        0% {
            top: 36px;
            left: 36px;
            width: 8px;
            height: 8px;
            opacity: 0;
        }
        4.9% {
            top: 36px;
            left: 36px;
            width: 8px;
            height: 8px;
            opacity: 0;
        }
        5% {
            top: 36px;
            left: 36px;
            width: 8px;
            height: 8px;
            opacity: 1;
        }
        100% {
            top: 0;
            left: 0;
            width: 80px;
            height: 80px;
            opacity: 0;
        }
    }
</style>

<div class="cr-preloader-wrapper">
    <!--======= 13. Loading Animation =======-->
    <div class="cr-preloader cr-preloader-v13">
        <div class="cr-preloader-item">
            <div></div><div></div>
        </div>
    </div>
</div>

CSS Loading Animation 14:

<style>
    .cr-preloader-wrapper {
        background: #ffffff;
    }
    .cr-preloader-wrapper .cr-preloader {
        background: #e4edff;
        padding: 20px;
        width: 250px;
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        position: relative;
    }
    /*======= 14. Loading Animation =======*/
    .cr-preloader-v14 .cr-preloader-item {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: inline-block;
        position: relative;
        border: 3px solid;
        border-color: #ffffff #ffffff transparent transparent;
        box-sizing: border-box;
        animation: preloader14-rotation 1s linear infinite;
        -webkit-animation: preloader14-rotation 1s linear infinite; 
        -moz-animation: preloader14-rotation 1s linear infinite; 
        -o-animation: preloader14-rotation 1s linear infinite; 
        -ms-animation: preloader14-rotation 1s linear infinite; 
    }

    .cr-preloader-v14 .cr-preloader-item::after,
    .cr-preloader-v14 .cr-preloader-item::before {
        content: '';  
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        border: 3px solid;
        border-color: transparent transparent #ff6122 #ff6122;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        box-sizing: border-box;
        animation: preloader14-rotationBack 0.5s linear infinite;
        -webkit-animation: preloader14-rotationBack 0.5s linear infinite; 
        -moz-animation: preloader14-rotationBack 0.5s linear infinite; 
        -o-animation: preloader14-rotationBack 0.5s linear infinite; 
        -ms-animation: preloader14-rotationBack 0.5s linear infinite; 
        transform-origin: center center;
    }

    .cr-preloader-v14 .cr-preloader-item::before {
        width: 32px;
        height: 32px;
        border-color: #ffffff #ffffff transparent transparent;
        box-sizing: border-box;
        animation: preloader14-rotation 1.5s linear infinite;
        -webkit-animation: preloader14-rotation 1.5s linear infinite; 
        -moz-animation: preloader14-rotation 1.5s linear infinite; 
        -o-animation: preloader14-rotation 1.5s linear infinite; 
        -ms-animation: preloader14-rotation 1.5s linear infinite; 
    }


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

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

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

    @-webkit-keyframes preloader14-rotationBack {
        0% {
            -webkit-transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(-360deg);
        }
    }
</style>

<div class="cr-preloader-wrapper">
    <!--======= 14. Loading Animation =======-->
    <div class="cr-preloader cr-preloader-v14">
        <div class="cr-preloader-item"></div>
    </div>
</div>

CSS Loading Animation 15:

<style>
    .cr-preloader-wrapper {
        background: #ffffff;
    }
    .cr-preloader-wrapper .cr-preloader {
        background: #e4edff;
        padding: 20px;
        width: 250px;
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        position: relative;
    }
/*======= 15. Loading Animation =======*/
.cr-preloader-v15 .cr-preloader-item {
        width: 48px;
        height: 48px;
        border: 3px dotted #ffffff;
        border-style: solid solid dotted dotted;
        border-radius: 50%;
        display: inline-block;
        position: relative;
        animation: preloader15-rotation 2s linear infinite;
        -webkit-animation: preloader15-rotation 2s linear infinite; 
        -moz-animation: preloader15-rotation 2s linear infinite; 
        -o-animation: preloader15-rotation 2s linear infinite; 
        -ms-animation: preloader15-rotation 2s linear infinite; 
    }

    .cr-preloader-v15 .cr-preloader-item::after {
        content: '';  
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        border: 3px dotted #ff6122;
        border-style: solid solid dotted;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        animation: preloader15-rotationBack 1s linear infinite;
        -webkit-animation: preloader15-rotationBack 1s linear infinite; 
        -moz-animation: preloader15-rotationBack 1s linear infinite; 
        -o-animation: preloader15-rotationBack 1s linear infinite; 
        -ms-animation: preloader15-rotationBack 1s linear infinite; 
        transform-origin: center center;
    }

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

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

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

    @-webkit-keyframes preloader15-rotationBack {
        0% {
            -webkit-transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(-360deg);
        }
    }
</style>

<div class="cr-preloader-wrapper">
    <!--======= 15. Loading Animation =======-->
    <div class="cr-preloader cr-preloader-v15">
        <div class="cr-preloader-item"></div>
    </div>
</div>

CSS Loading Animation 16:

<style>
    .cr-preloader-wrapper {
        background: #ffffff;
    }
    .cr-preloader-wrapper .cr-preloader {
        background: #e4edff;
        padding: 20px;
        width: 250px;
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        position: relative;
    }
    /*======= 16. Loading Animation =======*/
    .cr-preloader-v16 .cr-preloader-item {
        border: 24px solid #ffffff;
        border-color: #ff6122 #ff6122 #ffffff #ffffff;
        border-radius: 50%;
        position: relative;
        animation: preloader16-rotate 1s linear infinite;
        -webkit-animation: preloader16-rotate 1s linear infinite; 
        -moz-animation: preloader16-rotate 1s linear infinite; 
        -o-animation: preloader16-rotate 1s linear infinite; 
        -ms-animation: preloader16-rotate 1s linear infinite; 
    }

    .cr-preloader-v16 .cr-preloader-item:before {
        content: '';
        position: absolute;
        top: 50%;
        transform: translate(-50%, -125%);
        left: 50%;
        width: 12px;
        height: 12px;
        background: #ffffff;
        border-radius: 50%;
    }

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

    @-webkit-keyframes preloader16-rotate {
        100% {
            -webkit-transform: rotate(360deg);
        }
    }
</style>

<div class="cr-preloader-wrapper">
  <!--======= 16. Loading Animation =======-->
  <div class="cr-preloader cr-preloader-v16">
    <div class="cr-preloader-item"></div>
 </div>
</div>

Loading Animation 17:

<style>
    .cr-preloader-wrapper {
        background: #ffffff;
    }
    .cr-preloader-wrapper .cr-preloader {
        background: #e4edff;
        padding: 20px;
        width: 250px;
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        position: relative;
    }
    /*======= 17. Loading Animation =======*/
    .cr-preloader-v17 .cr-preloader-item {
        animation: preloader17-rotate 1s infinite;
        height: 50px;
        width: 50px;
        display: inline-block;
        position: relative;
    }

    .cr-preloader-v17 .cr-preloader-item:before,
    .cr-preloader-v17 .cr-preloader-item:after {
        border-radius: 50%;
        content: "";
        display: block;
        height: 20px;
        width: 20px;
    }

    .cr-preloader-v17 .cr-preloader-item:before {
        animation: preloader17-ball1 1s infinite;
        background-color: #ffffff;
        box-shadow: 30px 0 0 #ff6122;
        margin-bottom: 10px;
    }

    .cr-preloader-v17 .cr-preloader-item:after {
        animation: preloader17-ball2 1s infinite;
        background-color: #ff6122;
        box-shadow: 30px 0 0 #ffffff;
    }

    @keyframes preloader17-rotate {
        0% { transform: rotate(0deg) scale(0.8); }
        50% { transform: rotate(360deg) scale(1.2); }
        100% { transform: rotate(720deg) scale(0.8); }
    }

    @-webkit-keyframes preloader17-rotate {
        0% { -webkit-transform: rotate(0deg) scale(0.8); }
        50% { -webkit-transform: rotate(360deg) scale(1.2); }
        100% { -webkit-transform: rotate(720deg) scale(0.8); }
    }

    @keyframes preloader17-ball1 {
        0% {
            box-shadow: 30px 0 0 #ff6122;
        }
        50% {
            box-shadow: 0 0 0 #ff6122;
            margin-bottom: 0;
            transform: translate(15px, 15px);
        }
        100% {
            box-shadow: 30px 0 0 #ff6122;
            margin-bottom: 10px;
        }
    }

    @-webkit-keyframes preloader17-ball1 {
        0% {
            box-shadow: 30px 0 0 #ff6122;
        }
        50% {
            box-shadow: 0 0 0 #ff6122;
            margin-bottom: 0;
            -webkit-transform: translate(15px, 15px);
        }
        100% {
            box-shadow: 30px 0 0 #ff6122;
            margin-bottom: 10px;
        }
    }

    @keyframes preloader17-ball2 {
        0% {
            box-shadow: 30px 0 0 #ffffff;
        }
        50% {
            box-shadow: 0 0 0 #ffffff;
            margin-top: -20px;
            transform: translate(15px, 15px);
        }
        100% {
            box-shadow: 30px 0 0 #ffffff;
            margin-top: 0;
        }
    }

    @-webkit-keyframes preloader17-ball2 {
        0% {
            box-shadow: 30px 0 0 #ffffff;
        }
        50% {
            box-shadow: 0 0 0 #ffffff;
            margin-top: -20px;
            -webkit-transform: translate(15px, 15px);
        }
        100% {
            box-shadow: 30px 0 0 #ffffff;
            margin-top: 0;
        }
    }
</style>

<div class="cr-preloader-wrapper">
  <!--======= 17. Loading Animation =======-->
  <div class="cr-preloader cr-preloader-v17">
    <div class="cr-preloader-item"></div>
 </div>
</div>

Loading Animation 18:

<style>
    .cr-preloader-wrapper {
        background: #ffffff;
    }
    .cr-preloader-wrapper .cr-preloader {
        background: #e4edff;
        padding: 20px;
        width: 250px;
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        position: relative;
    }
    /*======= 18. Loading Animation =======*/
    .cr-preloader-v18 .cr-preloader-item {
        width: 48px;
        height: 48px;
        background: #ff6122;
        display: block;
        margin: 20px auto;
        position: relative;
        animation: preloader18-rotationBack 1s ease-in-out infinite reverse;
        -webkit-animation: preloader18-rotationBack 1s ease-in-out infinite reverse; 
        -moz-animation: preloader18-rotationBack 1s ease-in-out infinite reverse; 
        -o-animation: preloader18-rotationBack 1s ease-in-out infinite reverse; 
        -ms-animation: preloader18-rotationBack 1s ease-in-out infinite reverse; 
    }

    .cr-preloader-v18 .cr-preloader-item::before {
        content: '';
        left: 0;
        top: 0;
        transform: rotate(45deg);
        position: absolute;
        width: 48px;
        height: 48px;
        background: #ff6122;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    }

    .cr-preloader-v18 .cr-preloader-item::after {
        content: '';
        width: 32px;
        height: 32px;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        top: 50%;
        background: #ffffff;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    }

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

    @-webkit-keyframes preloader18-rotationBack {
        0% {
            -webkit-transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(-360deg);
        }
    }
</style>

<div class="cr-preloader-wrapper">
 <!--======= 18. Loading Animation =======-->
 <div class="cr-preloader cr-preloader-v18">
    <div class="cr-preloader-item"></div>
 </div>
</div>

Loading Animation 19:

<style>
    .cr-preloader-wrapper {
        background: #ffffff;
    }
    .cr-preloader-wrapper .cr-preloader {
        background: #e4edff;
        padding: 20px;
        width: 250px;
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        position: relative;
    }
    /*======= 19. Loading Animation =======*/ 
    .cr-preloader-v19 .cr-preloader-item {
        position: absolute;
        top: calc(50% - 32px);
        left: calc(50% - 32px);
        width: 64px;
        height: 64px;
        border-radius: 50%;
        perspective: 100px;
    }

    .cr-preloader-v19 .cr-preloader-item .inner {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }

    .cr-preloader-v19 .cr-preloader-item .inner.one {
        left: 0%;
        top: 0%;
        animation: preloader19-rotate-one 1s linear infinite;
        border-bottom: 3px solid #252161;
    }

    .cr-preloader-v19 .cr-preloader-item .inner.two {
        right: 0%;
        top: 0%;
        animation: preloader19-rotate-two 1s linear infinite;
        border-right: 3px solid #ff6122;
    }

    .cr-preloader-v19 .cr-preloader-item .inner.three {
        right: 0%;
        bottom: 0%;
        animation: preloader19-rotate-three 1s linear infinite;
        border-top: 3px solid #ff6122;
    }

    @keyframes preloader19-rotate-one {
        0% {
            transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
        }
        100% {
            transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
        }
    }

    @-webkit-keyframes preloader19-rotate-one {
        0% {
            -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
        }
        100% {
            -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
        }
    }

    @keyframes preloader19-rotate-two {
        0% {
            transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
        }
        100% {
            transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
        }
    }

    @-webkit-keyframes preloader19-rotate-two {
        0% {
            -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
        }
        100% {
            -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
        }
    }

    @keyframes preloader19-rotate-three {
        0% {
            transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
        }
        100% {
            transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
        }
    }

    @-webkit-keyframes preloader19-rotate-three {
        0% {
            -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
        }
        100% {
            -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
        }
    }
</style>

<div class="cr-preloader-wrapper">
 <!--======= 19. Loading Animation =======-->
 <div class="cr-preloader cr-preloader-v19">
    <div class="cr-preloader-item">
       <div class="inner one"></div>
       <div class="inner two"></div>
       <div class="inner three"></div>
    </div>
 </div>
</div>

CSS Preloader Animation 20:

<style>
    .cr-preloader-wrapper {
        background: #ffffff;
    }
    .cr-preloader-wrapper .cr-preloader {
        background: #e4edff;
        padding: 20px;
        width: 250px;
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        position: relative;
    }
   /*======= 20. Loading Animation =======*/ 
   .cr-preloader-v20 .cr-preloader-item {
        width: 65px;
        aspect-ratio: 1;
        position: relative;
    }

    .cr-preloader-v20 .cr-preloader-item:before,
    .cr-preloader-v20 .cr-preloader-item:after {
        content: "";
        position: absolute;
        border-radius: 50px;
        box-shadow: 0 0 0 3px inset #ff6122;
        animation: preloader20 2.5s infinite;
    }

    .cr-preloader-v20 .cr-preloader-item:after {
        box-shadow: 0 0 0 3px inset #ff6122;
    }

    .cr-preloader-v20 .cr-preloader-item:after {
        animation-delay: -1.25s;
    }

    @keyframes preloader20 {
        0% {
            inset: 0 35px 35px 0;
        }
        12.5% {
            inset: 0 35px 0 0;
        }
        25% {
            inset: 35px 35px 0 0;
        }
        37.5% {
            inset: 35px 0 0 0;
        }
        50% {
            inset: 35px 0 0 35px;
        }
        62.5% {
            inset: 0 0 0 35px;
        }
        75% {
            inset: 0 0 35px 35px;
        }
        87.5% {
            inset: 0 0 35px 0;
        }
        100% {
            inset: 0 35px 35px 0;
        }
    }

    @-webkit-keyframes preloader20 {
        0% {
            inset: 0 35px 35px 0;
        }
        12.5% {
            inset: 0 35px 0 0;
        }
        25% {
            inset: 35px 35px 0 0;
        }
        37.5% {
            inset: 35px 0 0 0;
        }
        50% {
            inset: 35px 0 0 35px;
        }
        62.5% {
            inset: 0 0 0 35px;
        }
        75% {
            inset: 0 0 35px 35px;
        }
        87.5% {
            inset: 0 0 35px 0;
        }
        100% {
            inset: 0 35px 35px 0;
        }
    }

    @-moz-keyframes preloader20 {
        0% {
            inset: 0 35px 35px 0;
        }
        12.5% {
            inset: 0 35px 0 0;
        }
        25% {
            inset: 35px 35px 0 0;
        }
        37.5% {
            inset: 35px 0 0 0;
        }
        50% {
            inset: 35px 0 0 35px;
        }
        62.5% {
            inset: 0 0 0 35px;
        }
        75% {
            inset: 0 0 35px 35px;
        }
        87.5% {
            inset: 0 0 35px 0;
        }
        100% {
            inset: 0 35px 35px 0;
        }
    }

    @-o-keyframes preloader20 {
        0% {
            inset: 0 35px 35px 0;
        }
        12.5% {
            inset: 0 35px 0 0;
        }
        25% {
            inset: 35px 35px 0 0;
        }
        37.5% {
            inset: 35px 0 0 0;
        }
        50% {
            inset: 35px 0 0 35px;
        }
        62.5% {
            inset: 0 0 0 35px;
        }
        75% {
            inset: 0 0 35px 35px;
        }
        87.5% {
            inset: 0 0 35px 0;
        }
        100% {
            inset: 0 35px 35px 0;
        }
    }

    @-ms-keyframes preloader20 {
        0% {
            inset: 0 35px 35px 0;
        }
        12.5% {
            inset: 0 35px 0 0;
        }
        25% {
            inset: 35px 35px 0 0;
        }
        37.5% {
            inset: 35px 0 0 0;
        }
        50% {
            inset: 35px 0 0 35px;
        }
        62.5% {
            inset: 0 0 0 35px;
        }
        75% {
            inset: 0 0 35px 35px;
        }
        87.5% {
            inset: 0 0 35px 0;
        }
        100% {
            inset: 0 35px 35px 0;
        }
    }
</style>

<div class="cr-preloader-wrapper">
    <!--======= 20. Loading Animation =======-->
    <div class="cr-preloader cr-preloader-v20">
        <div class="cr-preloader-item"></div>
    </div>
</div>

CSS Preloader Animation 21:

<style>
    .cr-preloader-wrapper {
        background: #ffffff;
    }
    .cr-preloader-wrapper .cr-preloader {
        background: #e4edff;
        padding: 20px;
        width: 250px;
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        position: relative;
    }
    /*======= 21. Loading Animation =======*/   
    .cr-preloader-v21 .cr-preloader-item {
        display: grid;
        grid-template-columns: repeat(4, 30px);
        grid-gap: 5px;
    }

    .cr-preloader-v21 .cr-preloader-item .mosaic {
        width: 30px;
        height: 30px;
        background-color: #333;
        animation: preloader21-ripple 1.5s infinite ease-in-out;
    }

    .cr-preloader-v21 .cr-preloader-item .mosaic:nth-child(1) { background-color: #e57373; animation-delay: 0s; }
    .cr-preloader-v21 .cr-preloader-item .mosaic:nth-child(2) { background-color: #f06292; animation-delay: 0.1s; }
    .cr-preloader-v21 .cr-preloader-item .mosaic:nth-child(3) { background-color: #ba68c8; animation-delay: 0.2s; }
    .cr-preloader-v21 .cr-preloader-item .mosaic:nth-child(4) { background-color: #9575cd; animation-delay: 0.3s; }
    .cr-preloader-v21 .cr-preloader-item .mosaic:nth-child(5) { background-color: #7986cb; animation-delay: 0.4s; }
    .cr-preloader-v21 .cr-preloader-item .mosaic:nth-child(6) { background-color: #64b5f6; animation-delay: 0.5s; }
    .cr-preloader-v21 .cr-preloader-item .mosaic:nth-child(7) { background-color: #4fc3f7; animation-delay: 0.6s; }
    .cr-preloader-v21 .cr-preloader-item .mosaic:nth-child(8) { background-color: #4dd0e1; animation-delay: 0.7s; }
    .cr-preloader-v21 .cr-preloader-item .mosaic:nth-child(9) { background-color: #4db6ac; animation-delay: 0.8s; }
    .cr-preloader-v21 .cr-preloader-item .mosaic:nth-child(10) { background-color: #81c784; animation-delay: 0.9s; }
    .cr-preloader-v21 .cr-preloader-item .mosaic:nth-child(11) { background-color: #aed581; animation-delay: 1s; }
    .cr-preloader-v21 .cr-preloader-item .mosaic:nth-child(12) { background-color: #dce775; animation-delay: 1.1s; }
    .cr-preloader-v21 .cr-preloader-item .mosaic:nth-child(13) { background-color: #ffffff176; animation-delay: 1.2s; }
    .cr-preloader-v21 .cr-preloader-item .mosaic:nth-child(14) { background-color: #ffd54f; animation-delay: 1.3s; }
    .cr-preloader-v21 .cr-preloader-item .mosaic:nth-child(15) { background-color: #ffb74d; animation-delay: 1.4s; }
    .cr-preloader-v21 .cr-preloader-item .mosaic:nth-child(16) { background-color: #ff8a65; animation-delay: 1.5s; }

    @keyframes preloader21-ripple {
        0%, 100% {
            transform: scale(1);
            opacity: 1;
        }
        50% {
            transform: scale(1);
            opacity: 0;
        }
    }
</style>

<div class="cr-preloader-wrapper">
    <!--======= 21. Loading Animation =======-->
    <div class="cr-preloader cr-preloader-v21">
        <div class="cr-preloader-item">
            <div class="mosaic"></div>
            <div class="mosaic"></div>
            <div class="mosaic"></div>
            <div class="mosaic"></div>
            <div class="mosaic"></div>
            <div class="mosaic"></div>
            <div class="mosaic"></div>
            <div class="mosaic"></div>
            <div class="mosaic"></div>
            <div class="mosaic"></div>
            <div class="mosaic"></div>
            <div class="mosaic"></div>
            <div class="mosaic"></div>
            <div class="mosaic"></div>
            <div class="mosaic"></div>
            <div class="mosaic"></div>
        </div>
    </div>
</div>

CSS Preloader Animation 22:

<style>
    .cr-preloader-wrapper {
        background: #ffffff;
    }
    .cr-preloader-wrapper .cr-preloader {
        background: #e4edff;
        padding: 20px;
        width: 250px;
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        position: relative;
    }
   /*======= 22. Loading Animation =======*/   
   .cr-preloader-v22 .cr-preloader-item {
        display: grid;
        grid-template-columns: repeat(4, 15px);
        grid-gap: 5px;
    }

    .cr-preloader-v22 .cr-preloader-item .mosaic {
        width: 15px;
        height: 15px;
        background-color: #333;
        animation: preloader22-ripple 1.5s infinite ease-in-out;
        border-radius: 50px;
    }

    .cr-preloader-v22 .cr-preloader-item .mosaic:nth-child(1) { background-color: #e57373; animation-delay: 0s; }
    .cr-preloader-v22 .cr-preloader-item .mosaic:nth-child(2) { background-color: #f06292; animation-delay: 0.1s; }
    .cr-preloader-v22 .cr-preloader-item .mosaic:nth-child(3) { background-color: #ba68c8; animation-delay: 0.2s; }
    .cr-preloader-v22 .cr-preloader-item .mosaic:nth-child(4) { background-color: #9575cd; animation-delay: 0.3s; }
    .cr-preloader-v22 .cr-preloader-item .mosaic:nth-child(5) { background-color: #7986cb; animation-delay: 0.4s; }
    .cr-preloader-v22 .cr-preloader-item .mosaic:nth-child(6) { background-color: #64b5f6; animation-delay: 0.5s; }
    .cr-preloader-v22 .cr-preloader-item .mosaic:nth-child(7) { background-color: #4fc3f7; animation-delay: 0.6s; }
    .cr-preloader-v22 .cr-preloader-item .mosaic:nth-child(8) { background-color: #4dd0e1; animation-delay: 0.7s; }
    .cr-preloader-v22 .cr-preloader-item .mosaic:nth-child(9) { background-color: #4db6ac; animation-delay: 0.8s; }
    .cr-preloader-v22 .cr-preloader-item .mosaic:nth-child(10) { background-color: #81c784; animation-delay: 0.9s; }
    .cr-preloader-v22 .cr-preloader-item .mosaic:nth-child(11) { background-color: #aed581; animation-delay: 1s; }
    .cr-preloader-v22 .cr-preloader-item .mosaic:nth-child(12) { background-color: #dce775; animation-delay: 1.1s; }
    .cr-preloader-v22 .cr-preloader-item .mosaic:nth-child(13) { background-color: #ffffff176; animation-delay: 1.2s; }
    .cr-preloader-v22 .cr-preloader-item .mosaic:nth-child(14) { background-color: #ffd54f; animation-delay: 1.3s; }
    .cr-preloader-v22 .cr-preloader-item .mosaic:nth-child(15) { background-color: #ffb74d; animation-delay: 1.4s; }
    .cr-preloader-v22 .cr-preloader-item .mosaic:nth-child(16) { background-color: #ff8a65; animation-delay: 1.5s; }

    @keyframes preloader22-ripple {
        0%, 100% {
            transform: scale(1);
            opacity: 1;
        }
        50% {
            transform: scale(1);
            opacity: 0;
        }
    }
</style>

<div class="cr-preloader-wrapper">
   <!--======= 22. Loading Animation =======-->
  <div class="cr-preloader cr-preloader-v22">
    <div class="cr-preloader-item">
      <div class="mosaic"></div>
      <div class="mosaic"></div>
      <div class="mosaic"></div>
      <div class="mosaic"></div>
      <div class="mosaic"></div>
      <div class="mosaic"></div>
      <div class="mosaic"></div>
      <div class="mosaic"></div>
      <div class="mosaic"></div>
      <div class="mosaic"></div>
      <div class="mosaic"></div>
      <div class="mosaic"></div>
      <div class="mosaic"></div>
      <div class="mosaic"></div>
      <div class="mosaic"></div>
      <div class="mosaic"></div>
    </div>
  </div>
</div>

CSS Preloader Animation 23:

<style>
    .cr-preloader-wrapper {
        background: #ffffff;
    }
    .cr-preloader-wrapper .cr-preloader {
        background: #e4edff;
        padding: 20px;
        width: 250px;
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        position: relative;
    }
    /*======= 23. Loading Animation =======*/ 
    .cr-preloader-v23 .cr-preloader-item {
        width: 50px;
        aspect-ratio: 1;
        box-shadow: 0 0 0 3px #ff6122 inset;
        border-radius: 50%;
        position: relative;
        animation: preloader23 7s infinite;
    }

    .cr-preloader-v23 .cr-preloader-item:before,
    .cr-preloader-v23 .cr-preloader-item:after {
        content: "";
        position: absolute;
        top: calc(100% + 3px);
        left: calc(50% - 12.5px);
        box-shadow: inherit;
        width: 25px;
        aspect-ratio: 1;
        border-radius: 50%;
        transform-origin: 50% -28px;
        animation: preloader23 1.5s infinite;
    }

    .cr-preloader-v23 .cr-preloader-item:after {
        animation-delay: -0.75s;
    }

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

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

    @-moz-keyframes preloader23 {
        100% {
            -moz-transform: rotate(360deg);
        }
    }

    @-o-keyframes preloader23 {
        100% {
            -o-transform: rotate(360deg);
        }
    }

    @-ms-keyframes preloader23 {
        100% {
            -ms-transform: rotate(360deg);
        }
    }
</style>

<div class="cr-preloader-wrapper">
  <!--======= 23. Loading Animation =======-->
  <div class="cr-preloader cr-preloader-v23">
    <div class="cr-preloader-item"></div>
  </div>
</div>

CSS Preloader Animation 24:

<style>
    .cr-preloader-wrapper {
        background: #ffffff;
    }
    .cr-preloader-wrapper .cr-preloader {
        background: #e4edff;
        padding: 20px;
        width: 250px;
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        position: relative;
    }
    /*======= 24. Loading Animation =======*/ 
    .cr-preloader-v24 .cr-preloader-item {
        position: relative;
        width: 64px;
        height: 60px;
    }

    .cr-preloader-v24 .cr-preloader-item::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        background: #ffffff;
        width: 64px;
        height: 32px;
        border-radius: 0 0 50px 50px;
        animation: preloader24-move 0.5s linear infinite alternate;
    }

    .cr-preloader-v24 .cr-preloader-item::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 0;
        background: #ff6122;
        width: 24px;
        height: 24px;
        transform: translateX(-50%) rotate(0deg);
        animation: preloader24-rotate 2s linear infinite;
    }

    @keyframes preloader24-rotate {
        100% { transform: translateX(-50%) rotate(360deg); }
    }

    @keyframes preloader24-move {
        0% { transform: rotate(10deg); }
        100% { transform: rotate(-10deg); }
    }

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

    @-moz-keyframes preloader24-rotate {
        100% { -moz-transform: translateX(-50%) rotate(360deg); }
    }

    @-o-keyframes preloader24-rotate {
        100% { -o-transform: translateX(-50%) rotate(360deg); }
    }

    @-ms-keyframes preloader24-rotate {
        100% { -ms-transform: translateX(-50%) rotate(360deg); }
    }

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

    @-moz-keyframes preloader24-move {
        0% { -moz-transform: rotate(10deg); }
        100% { -moz-transform: rotate(-10deg); }
    }

    @-o-keyframes preloader24-move {
        0% { -o-transform: rotate(10deg); }
        100% { -o-transform: rotate(-10deg); }
    }

    @-ms-keyframes preloader24-move {
        0% { -ms-transform: rotate(10deg); }
        100% { -ms-transform: rotate(-10deg); }
    }
</style>

<div class="cr-preloader-wrapper">
  <!--======= 24. Loading Animation =======-->
  <div class="cr-preloader cr-preloader-v24">
    <div class="cr-preloader-item"></div>
  </div>
</div>

CSS Preloader Animation 25:

<style>
    .cr-preloader-wrapper {
        background: #ffffff;
    }
    .cr-preloader-wrapper .cr-preloader {
        background: #e4edff;
        padding: 20px;
        width: 250px;
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        position: relative;
    }
    /*======= 25. Loading Animation =======*/ 
    .cr-preloader-v25 .cr-preloader-item {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #ff6122;
        position: relative;
    }

    .cr-preloader-v25 .cr-preloader-item:before,
    .cr-preloader-v25 .cr-preloader-item:after {
        content: "";
        position: absolute;
        border-radius: 50%;
        inset: 0;
        background: #ffffff;
        transform: rotate(0deg) translate(30px);
        animation: preloader25-rotate 1s ease infinite;
    }

    .cr-preloader-v25 .cr-preloader-item:after {
        animation-delay: 0.5s;
    }

    @keyframes preloader25-rotate {
        100% {
            transform: rotate(360deg) translate(30px);
        }
    }

    @-webkit-keyframes preloader25-rotate {
        100% {
            -webkit-transform: rotate(360deg) translate(30px);
        }
    }

    @-moz-keyframes preloader25-rotate {
        100% {
            -moz-transform: rotate(360deg) translate(30px);
        }
    }

    @-o-keyframes preloader25-rotate {
        100% {
            -o-transform: rotate(360deg) translate(30px);
        }
    }

    @-ms-keyframes preloader25-rotate {
        100% {
            -ms-transform: rotate(360deg) translate(30px);
        }
    }
</style>

<div class="cr-preloader-wrapper">
  <!--======= 25. Loading Animation =======-->
  <div class="cr-preloader cr-preloader-v25">
    <div class="cr-preloader-item"></div>
  </div>
</div>

CSS loading animations are a great way to enhance your website’s user experience, keeping visitors engaged while content loads. Whether you opt for simple rotating circles or more complex 3D cubes, these CSS preloader animations can significantly improve the visual appeal and functionality of your site. Best of all, these CSS loading animations are compatible with all major browsers, ensuring a consistent experience for all users. Implementing these loaders is straightforward with CSS, and the benefits to user engagement and satisfaction are well worth the effort.

Stay tuned for the detailed code examples of each CSS loading animation in the following sections of this blog. Happy coding!

Tags: CSS Loading Animation

RELATED Posts

Create a Skeleton Loading Animation Using HTML CSS and JavaScript

Animation

Create a Skeleton Loading Animation Using HTML CSS and JavaScript

by Rishad Nov 16, 2022

Animated Range Slider using HTML CSS & JavaScript

html css

Animated Range Slider using HTML CSS & JavaScript

by Rishad Oct 27, 2022

Create a Responsive Services Section Design Using HTML, CSS & Bootstrap

html css

Create a Responsive Services Section Design Using HTML, CSS & Bootstrap

by Rishad Sep 5, 2022

Leave a Reply Cancel reply

CodeBari

CodeBari is a blog website where we post blogs related to WordPress, PHP, JavaScript & HTML CSS along with creative coding stuff.

Subscribe to our Newsletter

Stay updated with the latest blog posts, news, and special offers!

* We respect your privacy. Your email will not be used for spamming.