Wait
Usage notes
Wait loaders show the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. They can represent determinate or indeterminate progress.
Default
Toggle markup
<coral-wait></coral-wait>
With value
Toggle markup
<coral-wait value="50"></coral-wait>
Sizes
Toggle markup
<coral-wait size="S" value="25"></coral-wait>
<coral-wait size="M" value="50"></coral-wait>
<coral-wait size="L" value="75"></coral-wait>
Indeterminate
Toggle markup
<coral-wait indeterminate=""></coral-wait>
Centered
Toggle markup
<style>
.container {
position: relative;
width: 200px;
height: 200px;
background-color: rgba(0, 0, 0, 0.4);
}
</style>
<div class="container">
<coral-wait centered="" value="50"></coral-wait>
</div>