Description:-

Hello everyone! In this video, you are going to learn " How to Create Bullet Page Pre-Loader - Using HTML & CSS".

Let's see!

Result -

Bullet page preloader- codexbaba

Source code:-

Bullet Page Pre-Loader - Using HTML & CSS

HTML

CSS

html,
body {
  height: 100%;
}

body {
  background-color: #000;
  position: relative;
}

@-webkit-keyframes animIn {
    0% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
        opacity: 0
    }

50% {
        opacity: 1
    }

100% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
        opacity: 0
    }
}

@keyframes animIn {
    0% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
        opacity: 0
    }

50% {
        opacity: 1
    }

100% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
        opacity: 0
    }
}

.loading {
    position: absolute;
    top: calc(50% - 5px);
    left: 50%
}

.loading .bullet {
    position: absolute;
    padding: 5px;
    border-radius: 50%;
    background: #fff;
    -webkit-animation: animIn .65s ease-in-out 0s infinite;
    animation: animIn .65s ease-in-out 0s infinite
}

.loading .bullet:nth-child(1) {
    -webkit-animation-delay: 0s;
    animation-delay: 0s
}

.loading .bullet:nth-child(2) {
    -webkit-animation-delay: .15s;
    animation-delay: .15s
}

.loading .bullet:nth-child(3) {
    -webkit-animation-delay: .3s;
    animation-delay: .3s
}

.loading .bullet:nth-child(4) {
    -webkit-animation-delay: .45s;
    animation-delay: .45s
}

Result -

× NOTE: Make sure that you follow us on Telegram ( our recommendation ). Some drives will be telegram exclusive.

Join Our Telegram Group of your batch and get Off-campus and Job updates.

Instagram

Join Our Instagaram channel of your batch and get Off-campus and Job updates.

~~full-width~~

You Might Also Like ➝

• Authentic Weather Loader - Using HTML & CSS

• DROPMORPHISM UI DESIGN - Using HTML & CSS

• Profile card hover effect - Using HTML & CSS

• About us page with pop effect - Using HTML & CSS

• Social Media Button Hover Effect - Using Html & CSS

• Login in Page - Using HTML & CSS

Thanks for reading our article.

Bullet Page Pre-Loader - Using HTML & CSS

Description:-

Source code:-

Bullet Page Pre-Loader - Using HTML & CSS

HTML

CSS

Result -

Telegram

Instagram

You Might Also Like ➝

Post a Comment

Contact Form