CSS Animated Progress Bar

This great tutorial, pure CSS Animated Progress Bar. Someone use Progress Bar for any reasons. In business world Progress Bar is useful, look like 4Shared. Some CSS very helpful here Keyframes animation and animation. This CSS progress bar very easy to customize. You can change the speed, background, or the bar. Codepen help me to build this project. Let's Start

HTML

Single elements!

<div class="progress"><div>

CSS

Some keyframes it become animated.

.progress {
background-color: #1a1a1a;
	height: 25px;
	padding: 5px;
	width: 350px;
	margin: 50px 0;			
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
	-webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
	box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;	
}

.progress div {
          display:block;
          background-color: #34c2e3;
	  background-image: -webkit-gradient(linear, left top, left bottom, from(#34c2e3), to(#3cbef2));
	  background-image: -webkit-linear-gradient(top, #34c2e3, #3cbef2);
	  background-image: -moz-linear-gradient(top, #34c2e3, #3cbef2);
	  background-image: -ms-linear-gradient(top, #34c2e3, #3cbef2);
	  background-image: -o-linear-gradient(top, #34c2e3, #3cbef2);
	  background-image: linear-gradient(top, #34c2e3, #3cbef2);        
	 height: 100%;	
         width: 100%;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
        -webkit-animation:progressbar 15s linear; 
        -moz-animation:progressbar 15s linear;
        -ms-animation:progressbar 15s linear;
        -o-animation:progressbar 15s linear;
        animation:progressbar 15s linear;
}
@-webkit-keyframes progressbar {
0% {width:0%;background-position:top left;}
100% {width:100%;background-position:bottom right;}
}

@-webkit-keyframes complete {
0% {visibility:hidden;}
1%, 100% {height:1000px;visibility:visible;}
}

@-moz-keyframes progressbar {
0% {width:0%;background-position:top left;}
100% {width:100%;background-position:bottom right;}
}

@-moz-keyframes complete {
0% {visibility:hidden;}
1%, 100% {height:1000px;visibility:visible;}
}

@-ms-keyframes progressbar {
0% {width:0%;background-position:top left;}
100% {width:100%;background-position:bottom right;}
}

@-ms-keyframes complete {
0% {visibility:hidden;}
1%, 100% {height:1000px;visibility:visible;}
}

@-o-keyframes progressbar {
0% {width:0%;background-position:top left;}
100% {width:100%;background-position:bottom right;}
}

@-o-keyframes complete {
0% {visibility:hidden;}
1%, 100% {height:1000px;visibility:visible;}
}


@keyframes progressbar {
0% {width:0%;background-position:top left;}
100% {width:100%;background-position:bottom right;}
}

@keyframes complete {
0% {visibility:hidden;}
1%, 100% {height:1000px;visibility:visible;}
}

OK, Enjoy

I hope you like it.

Continue reading this article

Pure CSS3 Animated Checkbox

Josua Hibbert - He build an amazing checkbox. It pure CSS, no sugar, salt, preservative. That great work forked by more than 100 peoples. With great checked indicator. You will never forget it.

This could be helpful if you want insert it to registration form or login form and say "Remember Me" or "Send  Me Weekly Newsletter". 

HTML

The markup is contain default checkbox code and without class or id.

<input type="checkbox">

CSS

This checkbox is controlled by CSS3.

input {
    display: block;
    margin-bottom: 20px;
}

/* Checkbox */

input[type="checkbox"] {
    background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)),
                      -webkit-linear-gradient(left, #f66 50%, #6cf 50%);
    background-size: 100% 100%, 200% 100%;
    background-position: 0 0, 5px 0;
    border-radius: 25px;
    box-shadow: inset 0 1px 4px hsla(0,0%,0%,.5),
                inset 0 0 10px hsla(0,0%,0%,.5),
                0 0 0 1px hsla(0,0%,0%,.1),
                0 -1px 2px 1px hsla(0,0%,0%,.25),
                0 2px 2px 1px hsla(0,0%,100%,.5),
                0 -2px 10px 2px hsla(0,0%,100%,.75),
                0 2px 10px 2px hsla(0,0%,0%,.25);
    cursor: pointer;
    height: 10px;
    padding-right: 10px;
    position: relative;
    width: 20px;
    -webkit-appearance: none;
    -webkit-transition: .15s;
}
input[type="checkbox"]:after {
    background-color: #eee;
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    border-radius: 25px;
    box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,1),
                inset 0 -1px 1px 1px hsla(0,0%,0%,.25),
                0 1px 3px 1px hsla(0,0%,0%,.5),
                0 0 2px hsla(0,0%,0%,.25);
    content: '';
    display: block;
    height: 10px;
    left: 0;
    position: relative;
    top: 0;
    width: 10px;
}
input[type="checkbox"]:checked {
    background-position: 0 0, 15px 0;
    padding-left: 10px;
    padding-right: 0;
}
input[type="checkbox"]:hover:before {
    background: hsla(0,0%,0%,.25);
    border-radius: 10px;
    color: #e4ded4;
    content: '✘';
    font: 12px/20px sans-serif;
    height: 20px;
    left: 25px;
    letter-spacing: 1px;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: -5px;
    width: 20px;
}
input[type="checkbox"]:checked:hover:before {
    content: '✔';
}

That's All

I Hope you like it and thank you for reading

Continue reading this article