Potion Loader | Pure CSS

index.pug

.box
  .container
    .glass
      .cap-left
      .cap-right
      .fill
        .bubble-1
        .bubble-2
        .bubble-3
        .bubble-4
        .bubble-5
        .bubble-6
        
      

potion-loader-pure-css.markdown

Potion Loader | Pure CSS

Pure CSS potion loader, learn to make CSS images here:

https://medium.com/dailycssimages/a-beginners-guide-to-pure-css-images-ef9a5d069dd2#.eqzaeotl7

A Pen by Mike Mangialardi on CodePen.

License.

style.scss

body{
  background: #18212A;
}

.box{
  position: relative;
  background: none;
  width: 600px;
  height: 400px;
  display: block;
  margin: auto;
  margin-top: 5%;
}

.container{
  position: absolute;
  width: 40%;
  height: 50%;
  background: none;
  top: 25%;
  left: 30%;
}

.glass{
  position: absolute;
  height: 80%;
  width: 20%;
  background: #B5F0E8;
  opacity: 0.7;
  top: 20%;
  left: 40%;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  z-index: 2;
}

.cap-left{
  position: absolute;
  width: 50%;
  height: 15%;
  top: -15%;
  background: #B9661C;
} 
.cap-right{
  position: absolute;
  width: 50%;
  height: 15%;
  top: -15%;
  right: 0%;
  background: #9A501D;
}

.fill{
  position: absolute;
  height: 90%;
  width: 80%;
  background: #DA0000;
  opacity: 0.8;
  bottom: 5%;
  left: 10%;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  animation: slime 1.5s infinite;
  z-index: 1;
}

.bubble-1{
  position: absolute;
  height: 10%;
  width: 35%;
  top: 10%;
  left: 15%;
  border-radius: 50%;
  background: #bf0303;
}

.bubble-2{
  position: absolute;
  height: 8%;
  width: 33%;
  top: 25%;
  right: 15%;
  border-radius: 50%;
  background: #bf0303;
}

.bubble-3{
  position: absolute;
  height: 10%;
  width: 35%;
  top: 40%;
  left: 15%;
  border-radius: 50%;
  background: #bf0303;
}

.bubble-4{
  position: absolute;
  height: 8%;
  width: 33%;
  top: 55%;
  right: 15%;
  border-radius: 50%;
  background: #bf0303;
}

.bubble-5{
  position: absolute;
  height: 8%;
  width: 33%;
  top: 75%;
  left: 15%;
  border-radius: 50%;
  background: #bf0303;
}

//animations
@keyframes slime{
  0%{
    height: 0%;
  }
  10%{
    height: 10%;
  }
  15%{
    height: 15%;
  }
  20%{
    height: 20%;
  }
  25%{
    height: 25%;
  }
  30%{
    height: 30%;
  }
  35%{
    height: 35%;
  }
  40%{
    height: 40%;
  }
  45%{
    height: 45%;
  }
  50%{
    height: 50%;
  }
  55%{
    height: 55%;
  }
  60%{
    height: 60%;
  }
  65%{
    height: 65%;
  }
  70%{
    height: 70%;
  }
  75%{
    height: 75%;
  }
  80%{
    height: 80%;
  }
  85%{
    height: 85%;
  }
  90%{
    height: 90%;
  }
  95%{
    height: 92%;
  }
  100%{
    height: 93%;
  }

}