Home / Frontend Codes and Demos / CSS Code Demos / Google-style Loading Animation using css keyframers
Google-style Loading Animation using css keyframers

This is a Loading Animation Concept on Google Style inspired by those cool animations made for Google Home App!. This tricky tumbling transform-origin animation using only CSS.

Google-style Loading Animation using css keyframers

Google-style Loading Animation using css keyframers

This is a Loading Animation Concept on Google Style inspired by those cool animations made for Google Home App!. This tricky tumbling transform-origin animation using only CSS.

Demo Download

Author keyframers
Hits
Created SEPTEMBER 19, 2018
License Open
Compatible browsers Chrome, Firefox, Safari

HTML Snippet

<div id="app">   <div class="boxes">     <div class="box -blue"></div>     <div class="box -red"></div>     <div class="box -yellow"></div>     <div class="box -green"></div>   </div> </div>

CSS Code

#app {   -webkit-animation-duration: 2s;           animation-duration: 2s;   -webkit-animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);           animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);   -webkit-animation-iteration-count: infinite;           animation-iteration-count: infinite;   -webkit-animation-fill-mode: both;           animation-fill-mode: both;   will-change: transform; }  .boxes {   display: grid;   grid-template-columns: 1fr 1fr;   grid-template-rows: 1fr 1fr;   height: 25vmin;   width: 25vmin;   background: #eee;   background-image: radial-gradient(circle at center, #FFF 45%, transparent 45%), linear-gradient(to right, transparent 49.99%, #ccc 50%); }  .boxes, .box {   -webkit-animation: inherit;           animation: inherit; }  /* ---------------------------------- */ .-blue {   background: #5D88C5; }  .-red {   background: #F04F3D; }  .-yellow {   background: #ffc60b; }  .-green {   background: #3AAF56; }  /* ---------------------------------- */ .boxes {   -webkit-animation-name: box-anim;           animation-name: box-anim; }  @-webkit-keyframes box-anim {   0% {     -webkit-transform: rotate(-0.125turn);             transform: rotate(-0.125turn);   }   100% {     -webkit-transform: rotate(-1.125turn);             transform: rotate(-1.125turn);   } }  @keyframes box-anim {   0% {     -webkit-transform: rotate(-0.125turn);             transform: rotate(-0.125turn);   }   100% {     -webkit-transform: rotate(-1.125turn);             transform: rotate(-1.125turn);   } } #app {   -webkit-animation-name: box-container;           animation-name: box-container; }  @-webkit-keyframes box-container {   0%, 60%, 90%, 100% {     -webkit-transform: none;             transform: none;   }   70% {     -webkit-transform: rotate(0.03turn);             transform: rotate(0.03turn);   } }  @keyframes box-container {   0%, 60%, 90%, 100% {     -webkit-transform: none;             transform: none;   }   70% {     -webkit-transform: rotate(0.03turn);             transform: rotate(0.03turn);   } } /* ---------------------------------- */ .-blue {   -webkit-animation-name: blue-anim;           animation-name: blue-anim;   -webkit-transform-origin: bottom right;           transform-origin: bottom right; }  @-webkit-keyframes blue-anim {   0% {     -webkit-transform: translateY(-100%);             transform: translateY(-100%);   }   20% {     -webkit-transform: translateX(-100%) translateY(-100%) rotate(0.25turn);             transform: translateX(-100%) translateY(-100%) rotate(0.25turn);   }   40% {     -webkit-transform: translateX(0) translateY(-100%) rotate(-0.25turn);             transform: translateX(0) translateY(-100%) rotate(-0.25turn);   }   40.0002%, 75% {     -webkit-transform: translateX(0) translateY(0%) rotate(0turn);             transform: translateX(0) translateY(0%) rotate(0turn);   }   100% {     -webkit-transform: translateY(-100%);             transform: translateY(-100%);   } }  @keyframes blue-anim {   0% {     -webkit-transform: translateY(-100%);             transform: translateY(-100%);   }   20% {     -webkit-transform: translateX(-100%) translateY(-100%) rotate(0.25turn);             transform: translateX(-100%) translateY(-100%) rotate(0.25turn);   }   40% {     -webkit-transform: translateX(0) translateY(-100%) rotate(-0.25turn);             transform: translateX(0) translateY(-100%) rotate(-0.25turn);   }   40.0002%, 75% {     -webkit-transform: translateX(0) translateY(0%) rotate(0turn);             transform: translateX(0) translateY(0%) rotate(0turn);   }   100% {     -webkit-transform: translateY(-100%);             transform: translateY(-100%);   } } /* ---------------------------------- */ .-red {   -webkit-animation-name: red-anim;           animation-name: red-anim; }  @-webkit-keyframes red-anim {   20% {     -webkit-transform: translateX(-100%);             transform: translateX(-100%);   }   40% {     -webkit-transform: translateX(0%);             transform: translateX(0%);   } }  @keyframes red-anim {   20% {     -webkit-transform: translateX(-100%);             transform: translateX(-100%);   }   40% {     -webkit-transform: translateX(0%);             transform: translateX(0%);   } } /* ---------------------------------- */ .-green {   -webkit-animation-name: green-anim;           animation-name: green-anim;   -webkit-transform-origin: top left;           transform-origin: top left; }  @-webkit-keyframes green-anim {   0% {     -webkit-transform: translateX(100%);             transform: translateX(100%);   }   20% {     -webkit-transform: translateX(0%);             transform: translateX(0%);   }   40% {     -webkit-transform: translateX(100%) rotate(0.2turn);             transform: translateX(100%) rotate(0.2turn);   }   60% {     -webkit-transform: translateX(100%) rotate(-0.25turn);             transform: translateX(100%) rotate(-0.25turn);   }   80% {     -webkit-transform: translateX(100%) rotate(0.25turn);             transform: translateX(100%) rotate(0.25turn);   }   80.002% {     -webkit-transform: translateX(0%) rotate(0turn);             transform: translateX(0%) rotate(0turn);   }   100% {     -webkit-transform: translateX(100%) rotate(0turn);             transform: translateX(100%) rotate(0turn);   } }  @keyframes green-anim {   0% {     -webkit-transform: translateX(100%);             transform: translateX(100%);   }   20% {     -webkit-transform: translateX(0%);             transform: translateX(0%);   }   40% {     -webkit-transform: translateX(100%) rotate(0.2turn);             transform: translateX(100%) rotate(0.2turn);   }   60% {     -webkit-transform: translateX(100%) rotate(-0.25turn);             transform: translateX(100%) rotate(-0.25turn);   }   80% {     -webkit-transform: translateX(100%) rotate(0.25turn);             transform: translateX(100%) rotate(0.25turn);   }   80.002% {     -webkit-transform: translateX(0%) rotate(0turn);             transform: translateX(0%) rotate(0turn);   }   100% {     -webkit-transform: translateX(100%) rotate(0turn);             transform: translateX(100%) rotate(0turn);   } } /* ---------------------------------- */ .-yellow {   -webkit-animation-name: yellow-anim;           animation-name: yellow-anim;   -webkit-transform-origin: top left;           transform-origin: top left; }  @-webkit-keyframes yellow-anim {   0%, 40% {     -webkit-transform: rotate(0);             transform: rotate(0);   }   60% {     -webkit-transform: rotate(0.45turn);             transform: rotate(0.45turn);   }   80%, 100% {     -webkit-transform: rotate(0);             transform: rotate(0);   } }  @keyframes yellow-anim {   0%, 40% {     -webkit-transform: rotate(0);             transform: rotate(0);   }   60% {     -webkit-transform: rotate(0.45turn);             transform: rotate(0.45turn);   }   80%, 100% {     -webkit-transform: rotate(0);             transform: rotate(0);   } } /* ---------------------------------- */ /* Scrubbing animation control */ :root {   --scrub: 0;   --play-state: running; }  #app {   -webkit-animation-delay: calc(-1 * 2s * var(--scrub));           animation-delay: calc(-1 * 2s * var(--scrub));   -webkit-animation-play-state: var(--play-state);           animation-play-state: var(--play-state); }  #range {   position: absolute;   top: .5em;   width: 80%;   padding: .5em;   opacity: 0.5;   transition: opacity .3s linear;   cursor: col-resize; } #range:hover, #range:focus {   opacity: 1; }  /* ---------------------------------- */ #app:hover {   outline: 2px solid red; } #app:hover .box:after {   content: '';   display: block;   width: 100%;   height: 100%;   position: absolute;   top: 0;   left: 0;   border: solid 15px white;   background: red;   -webkit-transform-origin: inherit;           transform-origin: inherit;   -webkit-transform: scale(0.1);           transform: scale(0.1); }  /* ---------------------------------- */ *, *:before, *:after {   box-sizing: border-box;   position: relative; }  html, body {   height: 100%;   width: 100%;   margin: 0;   padding: 0; }  body {   display: flex;   justify-content: center;   align-items: center; }

Preview

Google-style Loading Animation using css keyframers preview

About CV

I'm frontend developer

Check Also

Naturalized Checkbox Toggle Switches

This demo is a response to a post by Marcus Connor addressing confusion with checkbox …