Bouncing Ball Preloader Using HTML and CSS

HTML

CSS

body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100vh;
      position: relative;
    }

.preloaderDivArea {
      width: 50px;
      height: 4px;
      background-color: rgb(240, 240, 240);
      position: relative;
    }

.preloaderDivArea::before {
      content: "";
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #999;
      bottom: 20px;
      left: -10px;
      animation: bounceAni 2s linear infinite;
    }

.preloaderDivArea:after {
      content: "";
      position: absolute;
      top: 0;
      left: -2px;
      height: 4px;
      background-color: lime;
      animation: colorAni 2s linear infinite;
    }

@keyframes bounceAni {
      0% {
        bottom: 20px;
        left: -15px;
        width: 10px;
        opacity: 0;
        background: red;
      }

20% {
        bottom: 0px;
        left: 0;
        width: 10px;
        opacity: 1;
        background: orange;
      }

22% {
        bottom: 0px;
        left: 0;
        width: 12px;
        height: 8px;
      }

27% {
        bottom: 0px;
        left: 2px;
        width: 10px;
        height: 10px;
      }

50% {
        bottom: 20px;
        left: 17px;
        width: 10px;
        height: 10px;
        background: green;
      }

55% {
        bottom: 20px;
        left: 22px;
        width: 10px;
        height: 10px;
      }

75% {
        bottom: 0px;
        left: 35px;
        width: 10px;
        height: 10px;
        background: blue;
      }

80% {
        bottom: 0px;
        left: 35px;
        width: 12px;
        height: 8px;
      }

82% {
        bottom: 0px;
        left: 35px;
        width: 10px;
        height: 10px;
        opacity: 1;
      }

100% {
        bottom: 20px;
        left: 50px;
        width: 10px;
        height: 8px;
        opacity: 0;
      }
    }

@keyframes colorAni {
      0% {
        width: 0;
        background: red;
      }

20% {
        width: 10px;
        background: orange;
      }

50% {
        width: 25px;
        background: green;
      }

75% {
        width: 45px;
        background: blue;
      }

100% {
        width: 52px;
        background: purple;
      }
    }

p {
      color: #9999;
      font-weight: 700;
    }

Ui Code Snippets

Bouncing Ball Preloader Using HTML and CSS

HTML

CSS

JS

Output

Network Marketing

SEO Course

Our Courses

Our Tutorials

Ui Code Snippets

Popular Notes

Ui Code Snippets

Bouncing Ball Preloader Using HTML and CSS

HTML

CSS

JS

Output

Network Marketing

SEO Course