Pure CSS Loading Animation

Pure CSS Loading Animation

HTML

<div class="container">
  <div class="loader">
    <div class="content">
      <div class="main">Loading.</div>
      <div class="sub">
        <span>
           <div class="line"></div>
        </span>
        Initializing...
      </div>
    </div>
    <div class="progressBar">
      <span>
      </span>
    </div>
  </div>
</div>

SCSS

@import url('https://fonts.googleapis.com/css?family=Oswald:300,700');
@function rem($value) {
  @return unquote(($value/1px)/16+"rem");
}

$fontFamily:'Oswald', sans-serif;
.container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
$background:#fccc00;
$black:#333333;
$speed:0.5s;
*{
  font-family:$fontFamily;
  box-sizing:border-box;
}
body{
  background-color: $background;
}
.loader{
  display: inline-flex;
  .content{
    padding:rem(20px);
    background-color: $black;
    flex-basis:80%;
    align-items:stretch;
    .main{
      padding:rem(5px) rem(40px);
      background-color: $background;
      font-weight:800;
      text-transform:uppercase;
      font-size:rem(40px);
      color:$black;
      margin-bottom:rem(20px);
    }
    .sub{
      padding:0 rem(20px);
      padding-left:rem(44px);
      margin:rem(10px) auto;
      font-weight:600;
      font-size:rem(16px);
      text-transform:uppercase;
      color:$background;
      position:relative;
      span{
        position:absolute;
        top: 0;
        bottom: 0;
        left: 0;
        margin:auto;
        height:rem(30px);
        width: rem(30px);
        border:rem(4px) solid $background;
        border-radius:rem(50px);
        animation:spanRotate $speed * 2 linear infinite;
        .line{
          position:absolute;
          height:rem(30px);
          width: rem(4px);
          background-color: $black;
          left: 0;
          right: 0;
          margin:auto;
          top: 0;
          bottom: 0;
          z-index:1;
        }
      }
    }
  }
  .progressBar{
    margin-left:rem(6px);
    border:rem(6px) solid $black;
    flex-basis:50%;
    width:rem(40px);
    position:relative;
    padding:rem(4px);
    span{
      height: 95%;
      width: 80%;
      position:absolute;
      background-image:linear-gradient(45deg,$black 40%,$background 40%,$background 50%,$black 50%,$black);
      background-size:1.8rem 1.8rem;
      left: 0;
      right: 0;
      bottom: 2.5%;
      margin:auto;
      animation:progressAnimate $speed linear infinite,progressPercentage $speed * 8 ease-in-out forwards;
    }
  }
}


@keyframes progressPercentage{
  0%{
    height: 0;
  }
  15%{
    height: 15%;
  }
  45%{
    height: 50%;
  }
  60%{
    height: 80%;
  }
  100%{
    height: 95%;
  }
}

@keyframes progressAnimate{
  from{
    background-position:0 1.8rem;
  }
  to{
    background-position: 0 0;
  }
}


@keyframes spanRotate{
  from{
    transform:rotate(0deg);
  }
  to{
    transform:rotate(360deg);
  }
}

CSS

@import url("https://fonts.googleapis.com/css?family=Oswald:300,700");
.container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

* {
  font-family: "Oswald", sans-serif;
  box-sizing: border-box;
}

body {
  background-color: #fccc00;
}

.loader {
  display: inline-flex;
}
.loader .content {
  padding: 1.25rem;
  background-color: #333333;
  flex-basis: 80%;
  align-items: stretch;
}
.loader .content .main {
  padding: 0.3125rem 2.5rem;
  background-color: #fccc00;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 2.5rem;
  color: #333333;
  margin-bottom: 1.25rem;
}
.loader .content .sub {
  padding: 0 1.25rem;
  padding-left: 2.75rem;
  margin: 0.625rem auto;
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  color: #fccc00;
  position: relative;
}
.loader .content .sub span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: 1.875rem;
  width: 1.875rem;
  border: 0.25rem solid #fccc00;
  border-radius: 3.125rem;
  animation: spanRotate 1s linear infinite;
}
.loader .content .sub span .line {
  position: absolute;
  height: 1.875rem;
  width: 0.25rem;
  background-color: #333333;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  bottom: 0;
  z-index: 1;
}
.loader .progressBar {
  margin-left: 0.375rem;
  border: 0.375rem solid #333333;
  flex-basis: 50%;
  width: 2.5rem;
  position: relative;
  padding: 0.25rem;
}
.loader .progressBar span {
  height: 95%;
  width: 80%;
  position: absolute;
  background-image: linear-gradient(45deg, #333333 40%, #fccc00 40%, #fccc00 50%, #333333 50%, #333333);
  background-size: 1.8rem 1.8rem;
  left: 0;
  right: 0;
  bottom: 2.5%;
  margin: auto;
  animation: progressAnimate 0.5s linear infinite, progressPercentage 4s ease-in-out forwards;
}

@keyframes progressPercentage {
  0% {
    height: 0;
  }
  15% {
    height: 15%;
  }
  45% {
    height: 50%;
  }
  60% {
    height: 80%;
  }
  100% {
    height: 95%;
  }
}
@keyframes progressAnimate {
  from {
    background-position: 0 1.8rem;
  }
  to {
    background-position: 0 0;
  }
}
@keyframes spanRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

 

Add a Comment

Your email address will not be published. Required fields are marked *