Web SDK documentation
  1. Components
  2. ExportProgressComponent
widgets/implementations/events/event-image-view/export-progress.component.ts

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector c8y-export-progress
imports
styles :host { display: contents; } .c8y-export-progress__cancel { display: none; } /* When the progress sits inside a hovered/focused button, reveal the cancel icon in place of the ring so the running export can be cancelled. */ :host-context(.btn:hover) .c8y-export-progress__ring, :host-context(.btn:focus-visible) .c8y-export-progress__ring { display: none; } :host-context(.btn:hover) .c8y-export-progress__cancel, :host-context(.btn:focus-visible) .c8y-export-progress__cancel { display: inline-block; } @keyframes c8y-export-progress-spin { to { transform: rotate(360deg); } } .c8y-export-progress-spin { animation: c8y-export-progress-spin 1s linear infinite; transform-origin: center; }
template 
@if (cancellable()) {
  <i class="c8y-export-progress__cancel" c8yIcon="times" aria-hidden="true"></i>
}
<svg
  class="c8y-export-progress__ring"
  style="transform: rotate(-90deg)"
  height="20"
  width="20"
  viewBox="0 0 40 40"
  fill="none"
>
  <circle
    cx="20"
    cy="20"
    r="15.8"
    stroke="var(--c8y-component-border-color, #ccc)"
    stroke-width="5"
    stroke-dasharray="100"
  />
  @if (progress() !== null) {
    <circle
      [style.stroke-dashoffset]="100 - progress()!"
      style="transition: stroke-dashoffset 0.15s linear"
      cx="20"
      cy="20"
      r="15.8"
      stroke="var(--c8y-brand-primary)"
      stroke-width="5"
      stroke-dasharray="100"
    />
  } @else {
    <circle
      class="c8y-export-progress-spin"
      cx="20"
      cy="20"
      r="15.8"
      stroke="var(--c8y-brand-primary)"
      stroke-width="5"
      stroke-dasharray="25 75"
    />
  }
</svg>

Relationships

Used by

Depends on

results matching ""

    No results matching ""