diff --git a/projects/dsp-ui/src/lib/action/components/progress-indicator/progress-indicator.component.html b/projects/dsp-ui/src/lib/action/components/progress-indicator/progress-indicator.component.html index 0c1afd66e..aec570d4f 100644 --- a/projects/dsp-ui/src/lib/action/components/progress-indicator/progress-indicator.component.html +++ b/projects/dsp-ui/src/lib/action/components/progress-indicator/progress-indicator.component.html @@ -19,29 +19,39 @@
-
-
-
-
-
-
-
-
-
-
+ + + + +
- - - diff --git a/projects/dsp-ui/src/lib/action/components/progress-indicator/progress-indicator.component.scss b/projects/dsp-ui/src/lib/action/components/progress-indicator/progress-indicator.component.scss index 79fda7602..f3d49b9f8 100644 --- a/projects/dsp-ui/src/lib/action/components/progress-indicator/progress-indicator.component.scss +++ b/projects/dsp-ui/src/lib/action/components/progress-indicator/progress-indicator.component.scss @@ -19,61 +19,36 @@ $warn: rgb(244, 67, 54); // .dsp-progress-indicator.default { - height: 56px; + // height: 56px; margin-left: auto; margin-right: auto; - padding: 24px 36px; - top: 60px; - width: 96px; - - &.page-center { - left: 50%; - position: absolute; - top: 39%; - transform: translate(-50%, -50%); + // padding: 24px 36px; + // top: 60px; + // width: 96px; + + // &.page-center { + // left: 50%; + // position: absolute; + // top: 39%; + // transform: translate(-50%, -50%); + // } + + .loader { + display: block; + margin: 0 auto; } - - p, - h1, - h2, - h3 { - color: #555555; - text-align: center; + svg path { + stroke-dasharray: 530; + stroke-dashoffset: 530; + animation: load 3s both infinite; } - .line { - margin: 0 auto; - text-align: center; - width: 70px; - - > div { - animation: bounce-keyframes 1.4s infinite ease-in-out both; - background-color: $primary; - border-radius: 6px; - display: inline-block; - height: 18px; - width: 18px; - } - - .bounce1 { - animation-delay: -.32s; - } - - .bounce2 { - animation-delay: -.16s; + @keyframes load { + to { + stroke-dashoffset: 2120; } } - @keyframes bounce-keyframes { - - 0%, 80%, 100% { - transform: scale(0); - } - - 40% { - transform: scale(1); - } - } } // @@ -117,63 +92,63 @@ $warn: rgb(244, 67, 54); } -// -// loader element -// -.loading-progress-indicator { - text-align: center; - width: 100%; - - .text { - color: $primary; - font-size: 12pt; - } - - .dot { - animation: dot-keyframes 1.4s infinite ease-in-out; - background-color: $primary; - border-radius: 2px; - display: inline-block; - height: 6px; - margin: 3px 6px 2px; - width: 6px; - - &:nth-child(2) { - animation-delay: .16s; - } - - &:nth-child(3) { - animation-delay: .32s; - } - - &:nth-child(4) { - animation-delay: .48s; - } - - &:nth-child(5) { - animation-delay: .64s; - } - - &:nth-child(6) { - animation-delay: .8s; - } - } -} - -@keyframes dot-keyframes { - 0% { - opacity: .4; - transform: scale(1, 1); - } - - 50% { - opacity: 1; - transform: scale(1.2, 1.2); - } - - 100% { - opacity: .4; - transform: scale(1, 1); - } -} +// // +// // loader element +// // +// .loading-progress-indicator { +// text-align: center; +// width: 100%; + +// .text { +// color: $primary; +// font-size: 12pt; +// } + +// .dot { +// animation: dot-keyframes 1.4s infinite ease-in-out; +// background-color: $primary; +// border-radius: 2px; +// display: inline-block; +// height: 6px; +// margin: 3px 6px 2px; +// width: 6px; + +// &:nth-child(2) { +// animation-delay: .16s; +// } + +// &:nth-child(3) { +// animation-delay: .32s; +// } + +// &:nth-child(4) { +// animation-delay: .48s; +// } + +// &:nth-child(5) { +// animation-delay: .64s; +// } + +// &:nth-child(6) { +// animation-delay: .8s; +// } +// } +// } + +// @keyframes dot-keyframes { +// 0% { +// opacity: .4; +// transform: scale(1, 1); +// } + +// 50% { +// opacity: 1; +// transform: scale(1.2, 1.2); +// } + +// 100% { +// opacity: .4; +// transform: scale(1, 1); +// } +// } diff --git a/projects/dsp-ui/src/lib/action/components/progress-indicator/progress-indicator.component.spec.ts b/projects/dsp-ui/src/lib/action/components/progress-indicator/progress-indicator.component.spec.ts index dca85fe0d..5df6a0d45 100644 --- a/projects/dsp-ui/src/lib/action/components/progress-indicator/progress-indicator.component.spec.ts +++ b/projects/dsp-ui/src/lib/action/components/progress-indicator/progress-indicator.component.spec.ts @@ -144,6 +144,7 @@ describe('ProgressIndicatorComponent', () => { expect(testHostComponent.progressIndicatorComponent.status).toEqual(undefined); + testHostFixture.detectChanges(); testHostFixture.detectChanges(); const hostCompDe = testHostFixture.debugElement; @@ -152,13 +153,15 @@ describe('ProgressIndicatorComponent', () => { const divProgressElement = progressEl.query(By.css('.dsp-progress-indicator')); - const lineEl = divProgressElement.query(By.css('.line')); + const svgEl = divProgressElement.nativeElement.getElementsByTagName('svg'); + expect(svgEl).not.toBe(null); - const bounceEl = lineEl.query(By.css('div')); + // const gEl = divProgressElement.nativeElement.getElementsByTagName('g'); + const gEl = progressEl.query(By.css('g')); + // const gEl = svgEl.getElementsByTagName('g'); - // expect the default progress indicator - expect(bounceEl.styles.backgroundColor).toEqual('red'); - expect(bounceEl.attributes.class).toEqual('bounce1'); + // // expect the default progress indicator in red + expect(gEl.attributes.stroke).toEqual('red'); }); }); diff --git a/projects/dsp-ui/src/lib/action/components/progress-indicator/progress-indicator.component.ts b/projects/dsp-ui/src/lib/action/components/progress-indicator/progress-indicator.component.ts index 14142b3e8..9d8e62042 100644 --- a/projects/dsp-ui/src/lib/action/components/progress-indicator/progress-indicator.component.ts +++ b/projects/dsp-ui/src/lib/action/components/progress-indicator/progress-indicator.component.ts @@ -30,6 +30,10 @@ export class ProgressIndicatorComponent implements OnInit { */ @Input() color = '#5849a7'; + @Input() size: 'small' | 'large' = 'small'; + + widthAndHeight: string; + /** * @ignore */ @@ -37,6 +41,7 @@ export class ProgressIndicatorComponent implements OnInit { } ngOnInit() { + this.widthAndHeight = (this.size === "small" ? '48px' : '128px') } }