Incredibly Beautiful CSS3 Preloader Degree

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

9 point/2 review File has been tested

Download   incredibly-beautiful-css3.zip (2.01 KB)

You need to Sign In to download the file incredibly-beautiful-css3.zip
If you do not have an account then Sign up for free here

Download error   Report copyright violation

Today, I would like to share with you a rather nice preloader effect, you can apply it into your web app.

Introduction

HTML

 class="wrapper">
   class="progressbar">
     class="stylization"> 

CSS

body,
html,
.wrapper {
  width: 100%;
  height: 100%;
}
.wrapper {
  position: relative;
  background: #e7f0f7;
}
.progressbar {
  display: block;
  position: absolute;
  z-index: 9;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 400px;
  height: 30px;
}
.progressbar::before,
.progressbar::after {
  content: '';
  display: block;
  position: absolute;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background-image: -webkit-linear-gradient(0deg, #e91e63 0%, 
#e91e63 20%, #03a9f4 20%, #03a9f4 40%, #8bc34a 40%, #8bc34a 60%, 
#ffeb3b 60%, #ffeb3b 80%, #ff5722 80%, #ff5722 100%);
  background-image: linear-gradient(90deg, #e91e63 0%, 
#e91e63 20%, #03a9f4 20%, #03a9f4 40%, #8bc34a 40%, 
#8bc34a 60%, #ffeb3b 60%, #ffeb3b 80%, #ff5722 80%, #ff5722 100%);
  background-position: 0 0;
  background-repeat: repeat-x;
  -webkit-animation: movebar 5s linear infinite;
          animation: movebar 5s linear infinite;
}
.progressbar::before {
  box-shadow: 0 6px 10px 0 rgba(0,0,0,0.1);
}
.progressbar::after {
  z-index: 9;
  top: 6px;
  -webkit-filter: blur(16px);
          filter: blur(16px);
  opacity: 0.7;
}
.stylization {
  position: absolute;
  z-index: 999;
  height: 4px;
  width: 90%;
  left: 5%;
  top: 6px;
  opacity: 0.3;
}
.stylization::before,
.stylization::after {
  content: '';
  display: block;
  position: absolute;
  height: 4px;
  top: 0;
  border-radius: 2px;
}
.stylization::before {
  background: #fff;
  left: 0;
  right: 10px;
}
.stylization::after {
  width: 6px;
  background: #fff;
  right: 0;
}
@-webkit-keyframes movebar {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 400px 0;
  }
}
@keyframes movebar {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 400px 0;
  }
}

Good luck !

Incredibly Beautiful CSS3 Preloader Degree

Incredibly Beautiful CSS3 Preloader Degree Posted on 12-12-2015  Today, I would like to share with you a rather nice preloader effect, you can apply it into your web app. 4.5/10 371

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