exercises

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

busy.component.scss (1604B)

      1 :host {
      2     position: fixed;
      3     top: 0;
      4     left: 0;
      5     width: 100%;
      6     height: 100%;
      7     background-color: rgba(0, 0, 0, 0.1);
      8     z-index: 999;
      9     display: none;
     10 
     11     &.visible {
     12         display: block;
     13     }
     14 
     15     .loader {
     16         position: absolute;
     17         top: calc(50% - 32px);
     18         left: calc(50% - 32px);
     19         width: 64px;
     20         height: 64px;
     21         border-radius: 50%;
     22         perspective: 800px;
     23     }
     24 
     25     .inner {
     26         position: absolute;
     27         box-sizing: border-box;
     28         width: 100%;
     29         height: 100%;
     30         border-radius: 50%;
     31     }
     32 
     33     .inner.one {
     34         left: 0%;
     35         top: 0%;
     36         animation: rotate-one 1s linear infinite;
     37         border-bottom: 3px solid violet;
     38     }
     39 
     40     .inner.two {
     41         right: 0%;
     42         top: 0%;
     43         animation: rotate-two 1s linear infinite;
     44         border-right: 3px solid red;
     45     }
     46 
     47     .inner.three {
     48         right: 0%;
     49         bottom: 0%;
     50         animation: rotate-three 1s linear infinite;
     51         border-top: 3px solid green;
     52     }
     53 
     54 }
     55 
     56 @keyframes rotate-one {
     57     0% {
     58         transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
     59     }
     60 
     61     100% {
     62         transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
     63     }
     64 }
     65 
     66 @keyframes rotate-two {
     67     0% {
     68         transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
     69     }
     70 
     71     100% {
     72         transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
     73     }
     74 }
     75 
     76 @keyframes rotate-three {
     77     0% {
     78         transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
     79     }
     80 
     81     100% {
     82         transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
     83     }
     84 }