Create beautiful CSS Loader Degree

View: 451    Dowload: 0   Comment: 0   Post by: hanhga  
Author: none   Category: HTML-CSS template   Fields: Other

9 point/2 review File has been tested

Today I continue to show you a beautiful effect other equally well, with this effect, you can apply for projects for web or your blog.

Introduction

Today I continue to show you a beautiful effect other equally well, with this effect, you can apply for projects for web or your blog.

Previously Laptrinhweb showed the effects you create pure CSS loader loading styled like effect with CSS3 Windows phone. Today I continue to show you a beautiful effect other equally well, with this effect, you can apply for projects for web or your blog.

HTML


 
 
 
 
 
 

CSS

And here is the whole css code to help you create beautiful loading effects.

html {
  height: 100%;
  min-height: 100%;
}
body {
  height: 100%;
  background: #51b8e2;
}
.container {
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  
}
.container .part {
  width: 40px;
  height: 40px;
  margin-left: 45px;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  background: #51b8e2;
  border-radius: 4px;
  border: 2px solid #fff;
  -webkit-transition: background 100ms linear;
          transition: background 100ms linear;
  -webkit-animation: change 950ms linear infinite;
          animation: change 950ms linear infinite;
}
.container .part:nth-child(1) {
  -webkit-animation-delay: 100ms;
          animation-delay: 100ms;
}
.container .part:nth-child(2) {
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}
.container .part:nth-child(3) {
  -webkit-animation-delay: 300ms;
          animation-delay: 300ms;
}
.container .part:nth-child(4) {
  -webkit-animation-delay: 400ms;
          animation-delay: 400ms;
}
.container .part:nth-child(5) {
  -webkit-animation-delay: 500ms;
          animation-delay: 500ms;
}
@-webkit-keyframes change {
  0% {
    border-radius: 4px;
  }
  17.5% {
    border-radius: 4px;
  }
  50% {
    border-radius: 100%;
    background: rgba(255,255,255,0.4);
  }
  93.5% {
    border-radius: 4px;
  }
  100% {
    border-radius: 4px;
  }
}
@keyframes change {
  0% {
    border-radius: 4px;
  }
  17.5% {
    border-radius: 4px;
  }
  50% {
    border-radius: 100%;
    background: rgba(255,255,255,0.4);
  }
  93.5% {
    border-radius: 4px;
  }
  100% {
    border-radius: 4px;
  }
}

Certainly, through this article, you will have to add an option for your web site, as well as learn more tips on css to creativity can manually add other effects of their own.

Good luck !

 

 

Create beautiful CSS Loader Degree

Create beautiful CSS Loader Degree Posted on 17-12-2015  Today I continue to show you a beautiful effect other equally well, with this effect, you can apply for projects for web or your blog. 4.5/10 451

Comment:

To comment you must be logged in members.

Files with category

 

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd