<ng-template i18n #noAuthorComments>View {comment.totalReplies, plural, =1 {1 reply} other {{{ comment.totalReplies }} replies}}</ng-template>
- <my-small-loader class="comment-thread-loading ms-1" [loading]="threadLoading[comment.id]"></my-small-loader>
+ <my-loader size="sm" class="comment-thread-loading ms-1" [loading]="threadLoading[comment.id]"></my-loader>
</div>
</my-video-comment>
<div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length >= 250" (click)="showMoreDescription()">
<ng-container i18n>Show more</ng-container>
<span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-down"></span>
- <my-small-loader class="description-loading" [loading]="descriptionLoading"></my-small-loader>
+ <my-loader size="sm" class="description-loading" [loading]="descriptionLoading"></my-loader>
</div>
<div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-info-description-more">
</div>
<div *ngIf="!loaded" class="loader mt-4">
- <my-loader [loading]="!loaded"></my-loader>
+ <my-loader size="xl" [loading]="!loaded"></my-loader>
</div>
<my-user-notifications
</a>
<ng-template #content>
- <my-small-loader [loading]="loading"></my-small-loader>
+ <my-loader size="sm" [loading]="loading"></my-loader>
<my-global-icon *ngIf="icon && !loading" [iconName]="icon"></my-global-icon>
<span *ngIf="label" class="button-label">{{ label }}</span>
display: inline-block;
}
-my-small-loader ::ng-deep .root {
- display: inline-block;
- margin: 0 3px 0 0;
- width: 20px;
-}
-
a[class$=-button],
span[class$=-button] {
> span {
export * from './loader.component'
-export * from './small-loader.component'
+++ /dev/null
-<div *ngIf="loading">
- <div class="loader">
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- </div>
-</div>
+++ /dev/null
-@use '_variables' as *;
-@use '_mixins' as *;
-
-// Thanks to https://loading.io/css/ (CC0 License)
-
-.loader {
- display: inline-block;
- position: relative;
- width: 50px;
- height: 50px;
-}
-
-.loader div {
- box-sizing: border-box;
- display: block;
- position: absolute;
- width: 44px;
- height: 44px;
- margin: 6px;
- border: 4px solid;
- border-radius: 50%;
- animation: loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
- border-color: #999999 transparent transparent;
-}
-
-.loader div:nth-child(1) {
- animation-delay: -0.45s;
-}
-
-.loader div:nth-child(2) {
- animation-delay: -0.3s;
-}
-
-.loader div:nth-child(3) {
- animation-delay: -0.15s;
-}
-
-@keyframes loader {
- 0% {
- transform: rotate(0deg);
- }
- 100% {
- transform: rotate(360deg);
- }
-}
@Component({
selector: 'my-loader',
- styleUrls: [ './loader.component.scss' ],
- templateUrl: './loader.component.html'
+ template: `<div *ngIf="loading" class="spinner-border" [ngStyle]="getStyle()" role="status"></div>`
})
export class LoaderComponent {
@Input() loading: boolean
+ @Input() size: 'sm' | 'xl'
+
+ private readonly sizes = {
+ sm: {
+ width: '1rem',
+ height: '1rem',
+ 'border-width': '.2em'
+ },
+ xl: {
+ width: '3rem',
+ height: '3rem'
+ }
+ }
+
+ getStyle () {
+ if (!this.size) return undefined
+
+ return this.sizes[this.size]
+ }
}
+++ /dev/null
-<div class="root" *ngIf="loading">
- <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
-</div>
+++ /dev/null
-import { Component, Input } from '@angular/core'
-
-@Component({
- selector: 'my-small-loader',
- styleUrls: [ ],
- templateUrl: './small-loader.component.html'
-})
-
-export class SmallLoaderComponent {
- @Input() loading: boolean
-}
import { CustomPageService } from './custom-page'
import { DateToggleComponent } from './date'
import { FeedComponent } from './feeds'
-import { LoaderComponent, SmallLoaderComponent } from './loaders'
+import { LoaderComponent } from './loaders'
import {
ChannelsSetupMessageComponent,
HelpComponent,
FeedComponent,
LoaderComponent,
- SmallLoaderComponent,
ChannelsSetupMessageComponent,
HelpComponent,
FeedComponent,
LoaderComponent,
- SmallLoaderComponent,
ChannelsSetupMessageComponent,
HelpComponent,
@import '~bootstrap/scss/modal';
@import '~bootstrap/scss/tooltip';
@import '~bootstrap/scss/popover';
+@import '~bootstrap/scss/spinners';
@import '~bootstrap/scss/helpers';
@import '~bootstrap/scss/utilities/api';
@import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons';
-// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
-.glyphicon-refresh-animate {
- animation: spin 0.7s infinite linear;
-}
-
.flex-auto {
flex: auto;
}
cursor: pointer !important;
}
-@keyframes spin {
- from {
- transform: scale(1) rotate(0deg);
- }
-
- to {
- transform: scale(1) rotate(360deg);
- }
-}
-
// ---------------------------------------------------------------------------
// Dropdown
// ---------------------------------------------------------------------------