p5.js-web-editor/client/styles/components/_loader.scss
siddhant 538a41c617 Added Loader to indicate loading of sketches (#880)
* Added Loader to indicate loading of sketches

* Fixed styles

* Changed styles

* remove prefixes

* Issues Fixed:

* added Loader

* Refactor

* Issues Fixed

* clean up loader functions
2019-05-01 16:32:39 -04:00

40 lines
No EOL
578 B
SCSS

.loader {
width: #{80 / $base-font-size }rem;
height: #{80 / $base-font-size}rem;
position: relative;
margin: #{100 / $base-font-size}rem auto;
}
.loader__circle1,
.loader__circle2 {
width: 100%;
height: 100%;
border-radius: 80%;
@include themify() {
background-color: getThemifyVariable('logo-color');
}
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
animation: sk-bounce 2.0s infinite ease-in-out;
}
.loader__circle2 {
animation-delay: -1.0s;
}
@keyframes sk-bounce {
0%,
100% {
transform: scale(0.0);
}
50% {
transform: scale(1.0);
}
}