Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Creating a Loader Using CSS Properties

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 549
    Comment on it

    Hello readers, Today in my blog I will discuss about creating a loader using CSS properties.

     

    As many of us has seen various loaders while opening a website, In this blog I have tried to create a loader using CSS properties.

     

    Below is the HTML code for it :-

    <div class="loader">
    
    <span class="loader-block"></span>
    
    <span class="loader-block"></span>
    
    <span class="loader-block"></span>
    
    <span class="loader-block"></span>
    
    <span class="loader-block"></span>
    
    <span class="loader-block"></span>
    
    <span class="loader-block"></span>
    
    <span class="loader-block"></span>
    
    <span class="loader-block"></span>
    
    </div>

    In this code I have created a div with the class name as loader and have created spans with the class name as loader-block.

     

    Below is the CSS code for it :-

    body {
    
    text-align: center;
    
    }
    
    .loader {
    
    position: absolute;
    
    top: 50%;
    
    left: 50%;
    
    width: 7.33333em;
    
    height: 7.33333em;
    
    margin-left: -3.66667em;
    
    margin-top: -3.66667em;
    
    }
    
    
    
    .loader-block {
    
    position: absolute;
    
    top: 0;
    
    left: 0;
    
    display: inline-block;
    
    opacity: 0;
    
    width: 2em;
    
    height: 2em;
    
    background: #fdfdfd;
    
    -webkit-animation: show 0.88s step-end infinite alternate, pulse 0.88s linear infinite alternate;
    
    animation: show 0.88s step-end infinite alternate, pulse 0.88s linear infinite alternate;
    
    }
    
    
    
    .loader-block:nth-child(1) {
    
    -moz-transform: translate(0, 0);
    
    -ms-transform: translate(0, 0);
    
    -webkit-transform: translate(0, 0);
    
    transform: translate(0, 0);
    
    -webkit-animation-delay: 0.065s;
    
    animation-delay: 0.065s;
    
    }
    
    
    
    .loader-block:nth-child(2) {
    
    -moz-transform: translate(2.66667em, 0);
    
    -ms-transform: translate(2.66667em, 0);
    
    -webkit-transform: translate(2.66667em, 0);
    
    transform: translate(2.66667em, 0);
    
    -webkit-animation-delay: 0.13s;
    
    animation-delay: 0.13s;
    
    }
    
    
    
    .loader-block:nth-child(3) {
    
    -moz-transform: translate(5.33333em, 0);
    
    -ms-transform: translate(5.33333em, 0);
    
    -webkit-transform: translate(5.33333em, 0);
    
    transform: translate(5.33333em, 0);
    
    -webkit-animation-delay: 0.195s;
    
    animation-delay: 0.195s;
    
    }
    
    
    
    .loader-block:nth-child(4) {
    
    -moz-transform: translate(0, 2.66667em);
    
    -ms-transform: translate(0, 2.66667em);
    
    -webkit-transform: translate(0, 2.66667em);
    
    transform: translate(0, 2.66667em);
    
    -webkit-animation-delay: 0.325s;
    
    animation-delay: 0.325s;
    
    }
    
    
    
    .loader-block:nth-child(5) {
    
    -moz-transform: translate(2.66667em, 2.66667em);
    
    -ms-transform: translate(2.66667em, 2.66667em);
    
    -webkit-transform: translate(2.66667em, 2.66667em);
    
    transform: translate(2.66667em, 2.66667em);
    
    -webkit-animation-delay: 0.13s;
    
    animation-delay: 0.13s;
    
    }
    
    
    
    .loader-block:nth-child(6) {
    
    -moz-transform: translate(5.33333em, 2.66667em);
    
    -ms-transform: translate(5.33333em, 2.66667em);
    
    -webkit-transform: translate(5.33333em, 2.66667em);
    
    transform: translate(5.33333em, 2.66667em);
    
    -webkit-animation-delay: 0.455s;
    
    animation-delay: 0.455s;
    
    }
    
    
    
    .loader-block:nth-child(7) {
    
    -moz-transform: translate(0, 5.33333em);
    
    -ms-transform: translate(0, 5.33333em);
    
    -webkit-transform: translate(0, 5.33333em);
    
    transform: translate(0, 5.33333em);
    
    -webkit-animation-delay: 0.39s;
    
    animation-delay: 0.39s;
    
    }
    
    
    
    .loader-block:nth-child(8) {
    
    -moz-transform: translate(2.66667em, 5.33333em);
    
    -ms-transform: translate(2.66667em, 5.33333em);
    
    -webkit-transform: translate(2.66667em, 5.33333em);
    
    transform: translate(2.66667em, 5.33333em);
    
    -webkit-animation-delay: 0.26s;
    
    animation-delay: 0.26s;
    
    }
    
    
    
    .loader-block:nth-child(9) {
    
    -moz-transform: translate(5.33333em, 5.33333em);
    
    -ms-transform: translate(5.33333em, 5.33333em);
    
    -webkit-transform: translate(5.33333em, 5.33333em);
    
    transform: translate(5.33333em, 5.33333em);
    
    }
    
    
    
    @-webkit-keyframes pulse {
    
    from,
    
    40% {
    
    background: #fdfdfd;
    
    }
    
    to {
    
    background: #dadada;
    
    }
    
    }
    
    @-webkit-keyframes show {
    
    from, 40% {
    
    opacity: 0;
    
    }
    
    41%, to {
    
    opacity: 1;
    
    }
    
    }
    
    @keyframes pulse {
    
    from,
    
    40% {
    
    background: #fdfdfd;
    
    }
    
    to {
    
    background: #dadada;
    
    }
    
    }
    
    @keyframes show {
    
    from, 40% {
    
    opacity: 0;
    
    }
    
    41%, to {
    
    opacity: 1;
    
    }
    
    }
    
    /* Body styling */
    
    html,
    
    body {
    
    height: 100%;
    
    }
    
    
    
    body {
    
    background: #999;
    
    background: #999 -moz-radial-gradient(circle farthest-side, #333333, #111111);
    
    background: #999 -webkit-radial-gradient(circle farthest-side, #333333, #111111);
    
    background: #999 radial-gradient(circle farthest-side, #333333, #111111);
    
    }

    In the CSS, I have applied transform and translate property to the loader-block.

     

    I have also used animation and applied it to the loader block.

     

    I have used Keyframe and applied opacity with background changes at specified percentage.

     

    I have created pulse and show Keyframe in which one contains opacity while other the background.

    Conclusion:-

    With the help of above code anyone can easily create a loader using CSS properties.

    Note:- This code runs over all modern browsers.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: