12345678910111213141516171819202122232425262728293031323334353637 |
- $bg-color: #eee !default
- $spinner-color: #999 !default
- $spinner-bg-color: #ddd !default
- .loading-container {
- position: absolute;
- top: 0;
- width: 100%;
- height: 100%;
- background-color: $bg-color;
- z-index: 1000;
- }
- .loading-circle {
- box-sizing: border-box;
- width: 80px;
- height: 80px;
- position: absolute;
- top: calc(50% - 40px);
- left: calc(50% - 40px);
- border-radius: 100%;
- border: 10px solid $spinner-bg-color;
- border-top-color: $spinner-color;
- animation: spin 1s infinite linear;
- }
- @keyframes spin {
- 100% {
- transform: rotate(360deg);
- }
- }
- .loaded {
- top: -100%;
- transition: top 1s;
- transition-delay: 2s;
- }
|