EffectHub.com: your best source for gaming

Recommendation

More Effects...

CSS

html {
background: #333;
text-align: center;
}

[class*="loader--"] {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
}

.loader--spin {
    border: .125em solid transparent;
    border-radius: 50%;
    border-top-color: #3498db;
    border-left-color: #3498db;

-webkit-animation: spin .7s infinite linear;
    -moz-animation: spin .7s infinite linear;
    -o-animation: spin .7s infinite linear;
    animation: spin .7s infinite linear;
}

.loader--pulse {
    border-radius: 50%;
    background: #3498db;

-webkit-animation: pulse .7s infinite linear;
    -moz-animation: pulse .7s infinite linear;
    -o-animation: pulse .7s infinite linear;
    animation: pulse .7s infinite linear;
}

.loader--line {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 3px;
    left: 0;
    top: 0;
}

.loader--line:after {
    content: '';
    width: 4px;
    height: 100%;
    position: absolute;
    outline: 999em solid #3498db;

-webkit-animation: load 1s infinite linear;
    -moz-animation: load 1s infinite linear;
    -o-animation: load 1s infinite linear;
    animation: load 1s infinite linear;
}

@keyframes "spin" {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(120deg);
        -moz-transform: rotate(120deg);
        -o-transform: rotate(120deg);
        transform: rotate(120deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes spin {
    0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
    50% { -moz-transform: rotate(120deg); transform: rotate(120deg); }
    100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}

@-webkit-keyframes "spin" {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    50% { -webkit-transform: rotate(120deg); transform: rotate(120deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@-ms-keyframes "spin" {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(120deg); }
    100% { transform: rotate(360deg); }
}

@-o-keyframes "spin" {
    0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
    50% { -o-transform: rotate(120deg); transform: rotate(120deg); }
    100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes "pulse" {
    from {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    to {
        -webkit-transform: scale(2);
        -moz-transform: scale(2);
        -o-transform: scale(2);
        transform: scale(2);
        opacity: 0;
    }
}

@-moz-keyframes pulse {
    from {
        -moz-transform: scale(1);
        transform: scale(1);
    }
    to {
        -moz-transform: scale(2);
        transform: scale(2);
        opacity: 0;
    }
}

@-webkit-keyframes "pulse" {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    to {
        -webkit-transform: scale(2);
        transform: scale(2);
        opacity: 0;
    }
}

@-o-keyframes "pulse" {
    from {
        -o-transform: scale(1);
        transform: scale(1);
    }
    to {
        -o-transform: scale(2);
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes "load" {
    0% { left: 0%;  }
    50% { left: 35%;  }
    100% { left: 100%;  }
}

@-moz-keyframes load {
    0% { left: 0%; }
    50% { left: 35%; }
    100% { left: 100%; }
}

@-webkit-keyframes "load" {
    0% { left: 0%; }
    50% { left: 35%; }
    100% { left: 100%; }
}

@-ms-keyframes "load" {
    0% { left: 0%; }
    50% { left: 35%; }
    100% { left: 100%; }
}

@-o-keyframes "load" {
    0% { left: 0%; }
    50% { left: 35%; }
    100% { left: 100%; }
}

HTML

Recommendation

Join Effecthub.com