CSS Loader Animation Version_5

Image

Real Time Example

Inspect the HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>

<section class="talign-center">
        <div class="spinner spinner--steps icon-spinner" aria-hidden="true"></div>
        <div class="spinner icon-spinner-2" aria-hidden="true"></div>
        <div class="spinner icon-spinner-3" aria-hidden="true"></div>
        <div class="spinner icon-spinner-4" aria-hidden="true"></div>
        <div class="spinner icon-spinner-5" aria-hidden="true"></div>
        <div class="spinner icon-spinner-6" aria-hidden="true"></div>
        <div class="spinner spinner--steps2 icon-spinner-7" aria-hidden="true"></div>
    </section>
    <style>
        @font-face {
    font-family: 'icomoon';
    src:url('https://s3.amazonaws.com/icomoon.io/4/Loading/icomoon.eot?-9haulc');
    src:url('https://s3.amazonaws.com/icomoon.io/4/Loading/icomoon.eot?#iefix-9haulc') format('embedded-opentype'),
        url('https://s3.amazonaws.com/icomoon.io/4/Loading/icomoon.woff?-9haulc') format('woff'),
        url('https://s3.amazonaws.com/icomoon.io/4/Loading/icomoon.ttf?-9haulc') format('truetype'),
        url('https://s3.amazonaws.com/icomoon.io/4/Loading/icomoon.svg?-9haulc#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-spinner:before {
    content: "\e000";
}
.icon-spinner-2:before {
    content: "\e001";
}
.icon-spinner-3:before {
    content: "\e002";
}
.icon-spinner-4:before {
    content: "\e003";
}
.icon-spinner-5:before {
    content: "\e004";
}
.icon-spinner-6:before {
    content: "\e005";
}
.icon-spinner-7:before {
    content: "\e006";
}

@keyframes anim-rotate {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}
.spinner {
    display: inline-block;
    font-size:4em;
    height: 1em;
    line-height: 1;
    margin: .5em;
    animation: anim-rotate 2s infinite linear;
    color: #fff;
    text-shadow: 0 0 .25em rgba(255,255,255, .3);
}
.spinner--steps {
    animation: anim-rotate 1s infinite steps(8);
}
.spinner--steps2 {
    animation: anim-rotate 1s infinite steps(12);
}
.talign-center {
    margin:20px;
    padding:10px;
    text-align: center;
    font-family: sans-serif;
    color: #ccc;
    line-height: 1.5;
    font-size: 1em;
    background-color:black;
}
    </style>
    </body>
</html>

Kumar Lakshmanan

Seven Spinner Animations Using Font-icons

Image

Real Time Example

Inspect the HTML

Post a Comment

0 Comments

Labels

Join Our Whatsapp Group

Search This Blog

Popular Posts

Disco Lights Animation using CSS

Best PDF books for web designing and developing

St.Mary's HSS | My School

Make the Loader Using HTML & CSS

Total Pageviews

Contact Form

Footer Menu Widget

Kumar Lakshmanan

Seven Spinner Animations Using Font-icons

Image

Real Time Example

Inspect the HTML

You may like these posts

Post a Comment

0 Comments

Labels

Join Our Whatsapp Group

Search This Blog

Popular Posts

Disco Lights Animation using CSS

Best PDF books for web designing and developing

St.Mary's HSS | My School

Make the Loader Using HTML & CSS

Total Pageviews

Contact Form

Footer Menu Widget