How to Do an Animated and Creative Loading with CSS3?

Question

How to Do an Animated and Creative Loading with CSS3?

Asked 7 years, 2 months ago

Viewed 108 times

0

I wanted to do an animated loading like this example here:

https://dribbble.com/shots/963799-Animation-Loading-gif

5

Is this a question? If you don’t understand the foundation of the site see https://answall.com/tour

– Guilherme Nascimento

2017/04/16 at 22:33
3

It’s nice that you’re willing to cooperate, but you used a space to questions on programming. Nothing prevents you from posting a question and putting together an answer (in the answer field), but it is important that the question is clear, objective, within the scope, Do not be broad or duplicate. In the case of the current post, I can not imagine how to turn a question that is not wide, but if you can, can [Dit] the post at any time to try to fit. A read on [Ask] and [help] can be interesting, in addition to the link recommended by @Guilhermenascimento

– Bacco

2017/04/16 at 23:05

1 answer

Browser other questions tagged html5 css3 effect

You are not signed in. Login or sign up in order to post.

by Fabricio Marra • 41 points · Answer 1 · 2017-04-17T05:40:31+00:00

    body {
      background: #ede9de; 
    }
    .container {
      left: 50%;
      margin: auto -50px;
      position: absolute;
      top: 50%;
    }
    .swing div {
      border-radius: 50%;
      float: left;
      height: 1em;
      width: 1em;
    }
    .swing div:nth-of-type(1) {
      background: -webkit-linear-gradient(left, #385c78 0%, #325774 100%);
      background: linear-gradient(to right, #385c78 0%, #325774 100%);
    }
    .swing div:nth-of-type(2) {
      background: -webkit-linear-gradient(left, #325774 0%, #47536a 100%);
      background: linear-gradient(to right, #325774 0%, #47536a 100%);
    }
    .swing div:nth-of-type(3) {
      background: -webkit-linear-gradient(left, #4a5369 0%, #6b4d59 100%);
      background: linear-gradient(to right, #4a5369 0%, #6b4d59 100%);
    }
    .swing div:nth-of-type(4) {
      background: -webkit-linear-gradient(left, #744c55 0%, #954646 100%);
      background: linear-gradient(to right, #744c55 0%, #954646 100%);
    }
    .swing div:nth-of-type(5) {
      background: -webkit-linear-gradient(left, #9c4543 0%, #bb4034 100%);
      background: linear-gradient(to right, #9c4543 0%, #bb4034 100%);
    }
    .swing div:nth-of-type(6) {
      background: -webkit-linear-gradient(left, #c33f31 0%, #d83b27 100%);
      background: linear-gradient(to right, #c33f31 0%, #d83b27 100%);
    }
    .swing div:nth-of-type(7) {
      background: -webkit-linear-gradient(left, #da3b26 0%, #db412c 100%);
      background: linear-gradient(to right, #da3b26 0%, #db412c 100%);
    }
    .shadow {
      clear: left;
      padding-top: 1.5em;
    }
    .shadow div {
      -webkit-filter: blur(1px);
      filter: blur(1px);
      float: left;
      width: 1em;
      height: .25em;
      border-radius: 50%;
      background: #e3dbd2;
    }
    .shadow .shadow-l {
      background: #d5d8d6;
    }
    .shadow .shadow-r {
      background: #eed3ca;
    }
    @-webkit-keyframes ball-l {
      0%, 50% {
        -webkit-transform: rotate(0) translateX(0);
        transform: rotate(0) translateX(0);
      }
      100% {
        -webkit-transform: rotate(50deg) translateX(-2.5em);
        transform: rotate(50deg) translateX(-2.5em);
      }
    }
    @keyframes ball-l {
      0%, 50% {
        -webkit-transform: rotate(0) translate(0);
        transform: rotate(0) translateX(0);
      }
      100% {
        -webkit-transform: rotate(50deg) translateX(-2.5em);
        transform: rotate(50deg) translateX(-2.5em);
      }
    }
    @-webkit-keyframes ball-r {
      0% {
        -webkit-transform: rotate(-50deg) translateX(2.5em);
        transform: rotate(-50deg) translateX(2.5em);
      }
      50%,
      100% {
        -webkit-transform: rotate(0) translateX(0);
        transform: rotate(0) translateX(0);
      }
    }
    @keyframes ball-r {
      0% {
        -webkit-transform: rotate(-50deg) translateX(2.5em);
        transform: rotate(-50deg) translateX(2.5em);
      }
      50%,
      100% {
        -webkit-transform: rotate(0) translateX(0);
        transform: rotate(0) translateX(0)
      }
    }
    @-webkit-keyframes shadow-l-n {
      0%, 50% {
        opacity: .5;
        -webkit-transform: translateX(0);
        transform: translateX(0);
      }
      100% {
        opacity: .125;
        -webkit-transform: translateX(-1.57em);
        transform: translateX(-1.75em);
      }
    }
    @keyframes shadow-l-n {
      0%, 50% {
        opacity: .5;
        -webkit-transform: translateX(0);
        transform: translateX(0);
      }
      100% {
        opacity: .125;
        -webkit-transform: translateX(-1.75);
        transform: translateX(-1.75em);
      }
    }
    @-webkit-keyframes shadow-r-n {
      0% {
        opacity: .125;
        -webkit-transform: translateX(1.75em);
        transform: translateX(1.75em);
      }
      50%,
      100% {
        opacity: .5;
        -webkit-transform: translateX(0);
        transform: translateX(0);
      }
    }
    @keyframes shadow-r-n {
      0% {
        opacity: .125;
        -webkit-transform: translateX(1.75em);
        transform: translateX(1.75em);
      }
      50%,
      100% {
        opacity: .5;
        -webkit-transform: translateX(0);
        transform: translateX(0);
      }
    }
    .swing-l {
      -webkit-animation: ball-l .425s ease-in-out infinite alternate;
      animation: ball-l .425s ease-in-out infinite alternate;
    }
    .swing-r {
      -webkit-animation: ball-r .425s ease-in-out infinite alternate;
      animation: ball-r .425s ease-in-out infinite alternate;
    }
    .shadow-l {
      -webkit-animation: shadow-l-n .425s ease-in-out infinite alternate;
      animation: shadow-l-n .425s ease-in-out infinite alternate;
    }
    .shadow-r {
      -webkit-animation: shadow-r-n .425s ease-in-out infinite alternate;
      animation: shadow-r-n .425s ease-in-out infinite alternate;
    }

<div aria-busy="true" aria-label="Loading" role="progressbar" class="container">
    <div class="swing">
    <div class="swing-l"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div class="swing-r"></div>
  </div>
  <div class="shadow">
    <div class="shadow-l"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div class="shadow-r"></div>
  </div>
 </div>