revision:
<div id="loader">
<div id="shadow"></div>
<div id="box"></div>
</div>
<style>
#loader {display: flex; animation: loader 5s linear infinite; position: absolute; top: 25vw; left: 2vw; margin-bottom: 5vw;}
@keyframes loader {
0% { left: -5vw; }
100% {left: 110%; }
}
#box {width: 4vw; height: 4vw; background: #fff; animation: animate 1.5s linear infinite; position: absolute; top: 5; left: 0; border-radius: 0.05vw;}
@keyframes animate {
17% {border-bottom-right-radius: 0.15vw;}
25% { transform: translateY(1vw) rotate(22.5deg); }
50% {transform: translateY(2vw) scale(1,.9) rotate(45deg) ; border-bottom-right-radius: 20vw;}
75% { transform: translateY(3vw) rotate(67.5deg); }
100% { transform: translateY(0) rotate(90deg); }
}
#shadow {width: 3vw; height: 1vw; background: #000; opacity: 0.1; position: absolute; top: 5vw; left: 0; border-radius: 50%; animation: shadow 1.5s linear infinite; }
@keyframes shadow {
50% { transform: scale(1.2,1);}
}
</style>
<div class="canvas canvas1">
<div class="spinner1 spinnerMax">
<div class="spinner1 spinnerMid">
<div class="spinner1 spinnerMin"></div>
</div>
</div>
</div>
<style>
.canvas {align-items: center; background: skyblue; border-radius: 50%; box-shadow: 0 0.5vw 2vw rgba(0,0,0,0.2); display: flex; width: 20vw; height: 20vw; justify-content: center; margin: 1vw 1vw 2vw 10vw;}
.spinner1 {align-items: center; border: 1.3vw solid transparent; border-top:1.3vw solid red; border-right: 1.3vw solid
darkgreen; border-radius: 100%; display: flex; justify-content: center;}
.spinnerMax {animation: spinnerOne 3s linear infinite; height: 6vw; width: 6vw;}
.spinnerMid {animation: spinnerOne 5s linear infinite; width: 3.6vw;height: 3.6vw;}
.spinnerMin {animation: spinnerOne 5s linear infinite; height: 1.8vw; width: 1.8vw;}
@keyframes spinnerOne {
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg)}
}
</style>
<div class="canvas canvas2">
<div class="spinner2"></div>
<div class="hourHand"></div>
<div class="dot"></div>
</div>
<style>
.canvas {align-items: center; background: skyblue; border-radius: 50%; box-shadow: 0 0.5vw 2vw rgba(0,0,0,0.2); display: flex; width: 20vw; height: 20vw; justify-content: center; margin: 1vw 1vw 2vw 10vw;}
.canvas2 {position: relative;}
.spinner2 {animation: spinnerTwo 12s linear infinite; background: seagreen; border-radius: 25vw; height: 7vw; transform-origin: top;position: absolute; top: 50%; width: .8vw;}
.hourHand {animation: spinnerTwo 30s linear infinite; background: lightgreen; border-radius: 50vw; height: 4vw;transform-origin: top; position: absolute; top: 50%; width: .8vw;}
.dot {background: darkgreen;border-radius: 100%; height: 1vw; width: 1vw;}
@keyframes spinnerTwo {
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg)}
}
</style>
<div class="canvas canvas3">
<div class="spinner3"></div>
</div>
<style>
.canvas {align-items: center; background: skyblue; border-radius: 50%; box-shadow: 0 0.5vw 2vw rgba(0,0,0,0.2); display: flex; width: 20vw; height: 20vw; justify-content: center; margin: 1vw 1vw 2vw 10vw;}
.spinner3 {animation: spinnerThree 10s linear infinite; background: dodgerblue; border-radius: 100%; width: 10vw; height: 10vw;}
@keyframes spinnerThree {
0%, 35% {background: darkgreen; transform: scale(1);}
20%, 50% {background: darkred;transform: scale(1.3);}
}
</style>
<div class="canvas canvas4">
<div class="spinner4"></div>
</div>
<style>
.canvas {align-items: center; background: skyblue; border-radius: 50%; box-shadow: 0 0.5vw 2vw rgba(0,0,0,0.2); display: flex; width: 20vw; height: 20vw; justify-content: center; margin: 1vw 1vw 2vw 10vw;}
.spinner4 {animation: spinnerFour 4s linear infinite; border: solid 2.5vw transparent; border-top: solid 2.5vw darkblue; border-radius: 100%; width: 10vw; height: 10vw;}
@keyframes spinnerFour {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
</style>
<div class="canvas canvas5">
<div class="spinner5"></div>
</div>
<style>
.canvas {align-items: center; background: skyblue; border-radius: 50%; box-shadow: 0 0.5vw 2vw rgba(0,0,0,0.2); display: flex; width: 20vw; height: 20vw; justify-content: center; margin: 1vw 1vw 2vw 10vw;}
.spinner5 {animation: spinnerFive 1s linear infinite; border: solid 2.5vw red; border-right: solid 2.5vw transparent; border-left: solid 2.5vw transparent; border-radius: 100%; width: 0; height: 0;}
@keyframes spinnerFive {
0% {transform: rotate(0deg);}
50% {transform: rotate(180deg)}
100% {transform: rotate(360deg);}
}
</style>
<style>
.canvas {align-items: center; background: skyblue; border-radius: 50%; box-shadow: 0 0.5vw 2vw rgba(0,0,0,0.2); display: flex; width: 20vw; height: 20vw; justify-content: center; margin: 1vw 1vw 2vw 10vw;}
.spinner6 {background: #4DB6AC; border-radius: 50%; height: 1vw; margin: .1vw; width: 1vw;}
.p1 {animation: fall 1s linear .3s infinite;}
.p2 {animation: fall 1s linear .2s infinite;}
.p3 {animation: fall 1s linear .1s infinite;}
.p4 {animation: fall 1s linear infinite;}
@keyframes fall {
0% {transform: translateY(-1.5vw);}
25%, 75% {transform: translateY(0);}
100% {transform: translateY(-1.5vw);}
}
</style>
<div class="timer"></div>
<style>
.timer{ width: 10vw; height: 10vw; box-shadow: 0px 0px 0px 0.2vw red; border-radius: 50%; position: relative; margin: 0vw 0 0 13vw;
background-color:blue;}
.timer:after{position: absolute; content:""; background-color: yellow; }
.timer:before{position: absolute; content:""; background-color: black;}
.timer:after{ width: 5vw; height: 0.2vw; top: 5vw; left: 5vw; -webkit-transform-origin: 1px 1px; -moz-transform-origin: 1px 1px;
transform-origin: 1px 1px; -webkit-animation: minhand 8s linear infinite; -moz-animation: minhand 8s linear infinite;
animation: minhand 8s linear infinite;}
.timer:before{width: 3vw;height: 0.2vw; top: 5vw; left: 5vw; -webkit-transform-origin: 1px 1px; -moz-transform-origin: 1px 1px;
transform-origin: 1px 1px; -webkit-animation: hrhand 16s linear infinite;-moz-animation: hrhand 16s linear infinite;
animation: hrhand 16s linear infinite;}
@-webkit-keyframes minhand{
0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes minhand{
0%{-moz-transform:rotate(0deg)}
100%{-moz-transform:rotate(360deg)}
}
@keyframes minhand{
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
@-webkit-keyframes hrhand{
0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes hrhand{
0%{-moz-transform:rotate(0deg)}
100%{-moz-transform:rotate(360deg)}
}
@keyframes hrhand{
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
</style>
<div class="typing_loader"></div>
</style>
.typing_loader{width: 4vw; height: 4vw; border-radius: 50%; -webkit-animation: typing 3s linear infinite alternate;-moz-animation: typing 3s linear infinite alternate;
animation: typing 3s linear infinite alternate; margin: 2vw 0vw 0vw 6vw; position: relative; left: -1vw; background-color:blue;}
@-webkit-keyframes typing{
0%{background-color: lightgreen; box-shadow: 12vw 0vw 0vw 0vw grey, 24vw 0vw 0vw 0vw darkgrey;}
25%{ background-color: seagreen; box-shadow: 12vw 0vw 0vw 0vw darkgrey, 24vw 0vw 0vw 0vw grey;}
75%{ background-color: darkgreen; box-shadow: 12vw 0vw 0vw 0vw blue, 24vw 0vw 0vw 0vw skyblue;}
}
@-moz-keyframes typing{
0%{background-color: lightgreen; box-shadow: 12vw 0vw 0vw 0vw grey, 24vw 0vw 0vw 0vw darkgrey;}
25%{ background-color: seagreen; box-shadow: 12vw 0vw 0vw 0vw darkgrey, 24vw 0vw 0vw 0vw grey;}
75%{ background-color: darkgreen; box-shadow: 12vw 0vw 0vw 0vw blue, 24vw 0vw 0vw 0vw skyblue;}
}
@keyframes typing{
0%{background-color: lightgreen; box-shadow: 12vw 0vw 0vw 0vw grey, 24vw 0vw 0vw 0vw darkgrey;}
25%{ background-color: seagreen; box-shadow: 12vw 0vw 0vw 0vw darkgrey, 24vw 0vw 0vw 0vw grey;}
75%{ background-color: darkgreen; box-shadow: 12vw 0vw 0vw 0vw blue, 24vw 0vw 0vw 0vw skyblue;}
}
</style>
<div class="location_indicator"></div>
<style>
.location_indicator{margin: 2vw 0vw 0vw 6vw; position: relative; margin-bottom: 15vw;}
.location_indicator:before, .location_indicator:after{position: absolute; content: "";}
.location_indicator:before{ width: 8vw; height: 8vw; background-color:aliceblue; border-radius: 100% 100% 100% 0; box-shadow: 0vw 0vw 0.5vw 0.5vw green; -webkit-animation: mapping 2s linear infinite;
-moz-animation: mapping 2s linear infinite; animation: mapping 2s linear infinite; -webkit-transform: rotate(-46deg); -moz-transform: rotate(-46deg); transform: rotate(-46deg);}
.location_indicator:after{ width: 8vw; height: 4vw; border-radius: 100%; background-color: skyblue; top: 8vw; z-index: -1;}
@-webkit-keyframes mapping{
0% {top: 0;}
50%{top: -2vw;}
100% {top:0; }
}
@-moz-keyframes mapping{
0% {top: 0;}
50%{top: -2vw;}
100% {top:0; }
}
@keyframes mapping{
0% {top: 0;}
50%{top: -2vw;}
100% {top:0; }
}
</style>
<div class="dashboard"></div>
<style>
.dashboard{width: 10vw; height: 10vw; margin: 3vw 0vw 0vw 12vw; border: 1vw crimson solid; border-radius: 100%; position: relative; overflow: hidden; z-index: 1;background-color: lightgrey;}
.dashboard:after, .dashboard:before{position: absolute; content: ""; }
.dashboard:after{ width: 10vw; height: 1vh; top: 5vw; left: 5vw; -webkit-transform-origin: 1vw 1vw; -moz-transform-origin: 1vw 1vw; transform-origin: 1vw 1vw; background-color: black;
-webkit-animation: dashboard_hand 12s linear infinite alternate; -moz-animation: dashboard_hand 2s linear infinite alternate; animation: dashboard_hand 12s linear infinite alternate;}
.dashboard:before{width: 12vw; height: 3vw; right:-2; background-color: black; top:5vw;}
@-webkit-keyframes dashboard_hand{
0%{ -webkit-transform: rotate(-160deg);}
100%{ -webkit-transform: rotate(-20deg);}
}
@-moz-keyframes dashboard_hand{
0%{ -moz-transform: rotate(-160deg);}
100%{ -moz-transform: rotate(-20deg);}
}
@keyframes dashboard_hand{
0%{ transform: rotate(-160deg);}
100%{ transform: rotate(-20deg);}
}
</style>
<div class="battery"></div>
<style>
.battery{width: 10vw; height: 4vw; border: 0.2vw brown solid; border-radius: 0.5vw; position: relative; -webkit-animation: charge 10s linear infinite; -moz-animation: charge 10s linear infinite;
animation: charge 10s linear infinite; top: 2vw; margin: 2vw 0vw 0vw 12vw;}
.battery:after{ width: 0.9vw; height: 0.9vw; background-color: red; border-radius: 0px 1px 1px 0px; position: absolute; content: ""; top: 1.5vw; right: -0.9vw;}
@-webkit-keyframes charge{
0%{box-shadow: inset 0vw 0vw 0vw silver;}
100%{box-shadow: inset 8vw 0vw 0vw silver;}
}
@-moz-keyframes charge{
0%{box-shadow: inset 0vw 0vw 0vw silver;}
100%{box-shadow: inset 8vw 0vw 0vw silver;}
}
@keyframes charge{
0%{box-shadow: inset 0vw 0vw 0vw silver;}
100%{box-shadow: inset 8vw 0vw 0vw silver;}
}
</style>
<div class="magnifier"></div>
<style>
.magnifier{width: 8vw; height: 8vw; box-shadow: 0vw 0vw 0.1vw .4vw ; border-radius: 50%; position: relative; margin: 3vw 0vw 0vw 12vw; color: CadetBlue; -webkit-animation: magnify 4s linear infinite alternate;
-moz-animation: magnify 4s linear infinite alternate; animation: magnify 4s linear infinite alternate;}
.magnifier:after, .magnifier:before{position: absolute;content: "";}
.magnifier:before{ content: "? ?"; font-size: 4vw; left:2vw; text-align: center; top: 2vw; color:green;}
.magnifier:after{ width: 2vw; height: 6vw; background-color: CadetBlue; bottom: -3vw; left: 9vw; border-radius: 2px; -webkit-transform: rotate(-55deg); moz-transform: rotate(-55deg); transform: rotate(-55deg);}
@-webkit-keyframes magnify{
0%{-webkit-transform: scale(1); }
100%{-webkit-transform: scale(1.7);}
}
@-moz-keyframes magnify{
0%{-moz-transform: scale(1); }
100%{-moz-transform: scale(1.7);}
}
@keyframes magnify{
0%{transform: scale(1); }
100%{transform: scale(1.7);}
}
</style>
<div class="evolve"></div>
<style>
.evolve{margin: 3vw 0vw 0vw 12vw; width: 16vw; height: 14vw; border: 0.3vw blue solid; border-radius: 50%; -webkit-animation:
rotation 4s ease-in-out infinite; -moz-animation: rotation 4s ease-in-out infinite; animation: rotation 4s ease-in-out infinite;}
.evolve:after{ width: 2vw; height: 2vw; background-color: red; border-radius: 100%; position: absolute; content: "⚽"; padding:0.5vw;}
@-webkit-keyframes rotation{
0%{-webkit-transform: rotate(0deg);}
100%{-webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotation{
0%{-moz-transform: rotate(0deg);}
100%{-moz-transform: rotate(360deg);}
}
@keyframes rotation{
0%{transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}
</style>
<div class="eyes"></div>
<style>
.eyes{width: 8vw; height: 8vw; background-color: lightgrey; border-radius: 50%; box-shadow: 9vw 0vw 0vw 0.3vw lightgrey; position: relative; margin: 3vw 0vw 0vw 12vw; }
.eyes:after{background-color: black; width: 5vw; height: 4vw; box-shadow: 9vw 0vw 0vw 0vw black; border-radius: 50%; left: 0.5vw; top: 2vw; right:0.5vw; position: absolute; content: "";
-webkit-animation: eyeball 4s linear infinite alternate; -moz-animation: eyeball 4s linear infinite alternate; animation: eyeball 4s linear infinite alternate;}
@-webkit-keyframes eyeball{
0%{left: 3vw;}
100%{right: 0vw;}
}
@-moz-keyframes eyeball{
0%{left: 3vw;}
100%{right: 0vw;}
}
@keyframes eyeball{
0%{left: 3vw;}
100%{right: 0vw;}
}
</style>
<div class="cup"></div>
<style>
.cup{width: 5vw; height: 7vw; border: 0.5vw red solid; border-radius: 0vw 0vw 0.8vw 0.8vw; position: relative; margin: 4vw 0vw 0vw 12vw;}
.cup:after, .cup:before{position: absolute; content: "";}
.cup:after{width: 2.4vw; height: 3.2vw; border: 0.5vw red solid; border-left: none; border-radius: 0vw 4vw 4vw 0vw; left: 5.2vw;}
.cup:before{width: 0.3vw; height: 5vw; background-color: rgba(255,255,255,1); top: -2vw; left: 1vw; box-shadow: 2vw 0vw 0vw 0vw rgba(255,255,255,1), 1vw -1vw 0vw 0vw rgba(255,255,255,1),
1vw 0vw 1vw 0vw rgba(255,255,255,1); -webkit-animation: steam 2s linear infinite alternate; -moz-animation: steam 2s linear infinite alternate; animation: steam 2s linear infinite alternate;}
@-webkit-keyframes steam{
0%{height: 0vw;}
100%{height: 1.5vw;}
}
@-moz-keyframes steam{
0%{height: 0vw;}
100%{height: 1.5vw;}
}
@keyframes steam{
0%{height: -0vw}
100%{height: 1.5vw;}
}
</style>
<div class="square"></div>
<style>
.square{width: 12vw; height: 12vw; border: 0.3vw blue solid; margin: 3vw 0vw 0vw 12vw; position: relative; -webkit-animation: fill_color 5s linear infinite; -moz-animation: fill_color 5s linear infinite;
animation: fill_color 5s linear infinite;}
.square:after{ width: 2vw; height: 2vw; position: absolute; content: "❀"; background-color: green; top: -1.2vw; left: 1vw; -webkit-animation: square_check 5s ease-in-out infinite;
-moz-animation: square_check 5s ease-in-out infinite; animation: square_check 5s ease-in-out infinite;}
@-webkit-keyframes square_check{
0%{left: -2vw; top:-2vw;}
25%{ left: 12vw; top: -2vw;}
50%{ left: 12vw; top: 12vw;}
75%{ left: -2vw; top: 12vw;}
100%{ left: -2vw; top: -2vw;}
}
@-moz-keyframes square_check{
0%{left: -2vw; top:-2vw;}
25%{ left: 12vw; top: -2vw;}
50%{ left: 12vw; top: 12vw;}
75%{ left: -2vw; top: 12vw;}
100%{ left: -2vw; top: -2vw;}
}
@keyframes square_check{
0%{left: -2vw; top:-2vw;}
25%{ left: 12vw; top: -2vw;}
50%{ left: 12vw; top: 12vw;}
75%{ left: -2vw; top: 12vw;}
100%{ left: -2vw; top: -2vw;}
}
@-webkit-keyframes fill_color{
0%{ box-shadow: inset 0vw 0vw 0vw 0vw green;}
50%{ box-shadow: inset 0vw -8vw 0vw 0vw lightblue;}
100%{ box-shadow: inset 0vw 0vw 0vw 0vw green;}
}
@-moz-keyframes fill_color{
0%{ box-shadow: inset 0vw 0vw 0vw 0vw green;}
50%{ box-shadow: inset 0vw -8vw 0vw 0vw lightblue;}
100%{ box-shadow: inset 0vw 0vw 0vw 0vw green;}
}
@keyframes fill_color{
0%{ box-shadow: inset 0vw 0vw 0vw 0vw green;}
50%{ box-shadow: inset 0vw -8vw 0vw 0vw lightblue;}
100%{ box-shadow: inset 0vw 0vw 0vw 0vw green;}
}
</style>
<div class="circle"></div>
<style>
.circle{ margin: 5vw 0vw 0vw 12vw; position: relative; width: 3vw; height: 3vw; background-color: red; box-shadow: -3.6vw 0vw 0vw seagreen; border-radius: 50%;
-webkit-animation: circle_classic 2s ease-in-out infinite alternate; -moz-animation: circle_classic 2s ease-in-out infinite alternate; animation: circle_classic 2s ease-in-out infinite alternate;}
@-webkit-keyframes circle_classic{
0%{ opacity: 0.1; -webkit-transform: rotate(0deg) scale(0.5);}
100%{opacity: 1; -webkit-transform: rotate(420deg) scale(1.5);}
}
@-moz-keyframes circle_classic{
0%{ opacity: 0.1; -moz-transform: rotate(0deg) scale(0.5);}
100%{opacity: 1; -moz-transform: rotate(420deg) scale(1.5);}
}
@keyframes circle_classic{
0%{ opacity: 0.1; transform: rotate(0deg) scale(0.5);}
100%{opacity: 1; transform: rotate(420deg) scale(1.5);}
}
</style>
<div class="expand"></div>
<style>
.expand{margin: 4vw 0vw 0vw 12vw; width: 3vw; height: 4vw; opacity: 0.5; position: relative; box-shadow: 1.4vw 0vw 0vw 0vw red, 2.8vw 0vw 0vw 0vw orange, 4.2vw 0vw 0vw 0vw yellow,
5.6vw 0vw 0vw 0vw green, 7.4vw 0vw 0vw 0vw darkblue, 8.8vw 0vw 0vw 0vw black; -webkit-animation: rain 2s linear infinite alternate; -moz-animation: rain 2s linear infinite alternate;
animation: rain 2s linear infinite alternate;}
.expand:after{width: 4vw; height: 4vw;position: absolute; content: ""; background-color: rgba(255,255,255,1); top: 0px; opacity: 1; -webkit-animation: line_flow 3s linear infinite reverse;
-moz-animation: line_flow 3s linear infinite reverse; animation: line_flow 3s linear infinite reverse;}
@-webkit-keyframes rain{
0%{box-shadow: 1.2vw 0vw 0vw 0vw red, 2.4vw 0vw 0vw 0vw orange,3.6vw 0vw 0vw 0vw yellow, 4.8vw 0vw 0vw 0vw green, 6vw 0vw 0vw 0vw darkblue, 7.2vw 0vw 0vw 0vw black;}
100%{box-shadow: 1.2vw 0vw 0vw 0vw red, 2.4vw 0vw 0vw 0vw orange,3.6vw 0vw 0vw 0vw yellow, 4.8vw 0vw 0vw 0vw green, 6vw 0vw 0vw 0vw darkblue, 7.2vw 0vw 0vw 0vw black; opacity: 1;}
}
@-moz-keyframes rain{
0%{box-shadow: 1.2vw 0vw 0vw 0vw red, 2.4vw 0vw 0vw 0vw orange,3.6vw 0vw 0vw 0vw yellow, 4.8vw 0vw 0vw 0vw green, 6vw 0vw 0vw 0vw darkblue, 7.2vw 0vw 0vw 0vw black;}
100%{box-shadow: 1.2vw 0vw 0vw 0vw red, 2.4vw 0vw 0vw 0vw orange,3.6vw 0vw 0vw 0vw yellow, 4.8vw 0vw 0vw 0vw green, 0vw 0vw 0vw 0vw darkblue, 7.2vw 0vw 0vw 0vw black; opacity: 1;}
}
@keyframes rain{
0%{box-shadow: 1.4vw 0vw 0vw 0vw red,2.8vw 0vw 0vw 0vw orange, 4.2vw 0vw 0vw 0vw yellow, 5.6vw 0vw 0vw 0vw green, 7.4vw 0vw 0vw 0vw darkblue, 8.8vw 0vw 0vw 0vw black;}
100%{box-shadow: 1.4vw 0vw 0vw 0vw red,2.8vw 0vw 0vw 0vw orange, 4.2vw 0vw 0vw 0vw yellow, 5.6vw 0vw 0vw 0vw green, 7.4vw 0vw 0vw 0vw darkblue, 8.8vw 0vw 0vw 0vw black; opacity: 1;}
}
@-webkit-keyframes line_flow{
0%{ width: 0px;}
100%{width: 7vw;}
}
@-moz-keyframes line_flow{
0%{ width: 0px;}
100%{width: 40px;}
}
@keyframes line_flow{
0%{ width: 0px;}
100%{width: 10vw;}
}
</style>