Horizontal progress
0
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minima veniam, quis nostrum lorem ipsum. Sed do eiusmod tempor incididunt ut labore et dolore magna
<div class="eds_horizontalProgress" data-progress-loaderheight="50" data-progress-fontcolor="rgb(135, 206, 235)" data-progress-fontsize="2rem" data-progress-maxvalue="90" data-progress-size="100%" data-progress-starttime="0">
<div class="loader-bg">
<div class="eds_progressValue">0</div>
<div class="eds_progressDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minima veniam, quis nostrum lorem ipsum. Sed do eiusmod tempor incididunt ut labore et dolore magna</div>
</div>
</div>
Skins
Success
<div class="eds_horizontalProgress" data-progress-loaderheight="20" data-progress-maxvalue="90" data-progress-size="100%" data-progress-skin="success" data-progress-starttime="0">
<div class="loader-bg">
<div class="eds_progressValue">0</div>
</div>
</div>
Info
<div class="eds_horizontalProgress" data-progress-loaderheight="20" data-progress-maxvalue="100" data-progress-size="100%" data-progress-skin="info" data-progress-starttime="0">
<div class="loader-bg">
<div class="eds_progressValue">0</div>
</div>
</div>
Warning
<div class="eds_horizontalProgress" data-progress-loaderheight="20" data-progress-maxvalue="90" data-progress-size="100%" data-progress-skin="warning" data-progress-starttime="0">
<div class="loader-bg">
<div class="eds_progressValue">0</div>
</div>
</div>
Danger
<div class="eds_horizontalProgress" data-progress-loaderheight="20" data-progress-maxvalue="90" data-progress-size="100%" data-progress-skin="danger" data-progress-starttime="0">
<div class="loader-bg">
<div class="eds_progressValue">0</div>
</div>
</div>
Circle
<div class="eds_circleProgress eds_fullCircleProgress" data-progress-dialwidth="20" data-progress-fontcolor="rgb(135, 206, 235)" data-progress-fontsize="20px" data-progress-maxvalue="90" data-progress-size="300px" data-progress-starttime="0">
<div class="loader-bg">
<div class="eds_progressValue">0</div>
</div>
</div>
Half-circle
<div class="eds_circleProgress eds_halfCircleProgress" data-progress-dialwidth="20" data-progress-fontcolor="rgb(135, 206, 235)" data-progress-fontsize="20px" data-progress-maxvalue="90" data-progress-size="300px" data-progress-starttime="0">
<div class="eds_halfOverflow">
<div class="loader-bg">
<div class="eds_progressValue">0</div>
</div>
</div>
</div>
Skins
Success
<div class="eds_circleProgress eds_fullCircleProgress" data-progress-dialwidth="20" data-progress-fontsize="20px" data-progress-maxvalue="90" data-progress-size="150px" data-progress-skin="success" data-progress-starttime="0">
<div class="loader-bg">
<div class="eds_progressValue">0</div>
</div>
</div>
Info
<div class="eds_circleProgress eds_fullCircleProgress" data-progress-dialwidth="20" data-progress-fontsize="20px" data-progress-maxvalue="100" data-progress-size="150px" data-progress-skin="info" data-progress-starttime="0">
<div class="loader-bg">
<div class="eds_progressValue">0</div>
</div>
</div>
Warning
<div class="eds_circleProgress eds_fullCircleProgress" data-progress-dialwidth="20" data-progress-fontsize="20px" data-progress-maxvalue="90" data-progress-size="150px" data-progress-skin="warning" data-progress-starttime="0">
<div class="loader-bg">
<div class="eds_progressValue">0</div>
</div>
</div>
Danger
<div class="eds_circleProgress eds_fullCircleProgress" data-progress-dialwidth="20" data-progress-fontsize="20px" data-progress-maxvalue="90" data-progress-size="150px" data-progress-skin="danger" data-progress-starttime="0">
<div class="loader-bg">
<div class="eds_progressValue">0</div>
</div>
</div>
Icons
<div class="eds_circleProgress eds_fullCircleProgress" data-progress-dialwidth="10" data-progress-fontsize="20px" data-progress-maxvalue="37" data-progress-size="150px" data-progress-skin="success" data-progress-starttime="0">
<div class="loader-bg">
<div class="eds_progressValue">0</div>
</div>
<span class="eds_progressIcon"><i class="fas fa-book-open"></i></span>
</div>
<div class="eds_circleProgress eds_fullCircleProgress" data-progress-dialwidth="10" data-progress-fontsize="20px" data-progress-maxvalue="75" data-progress-size="150px" data-progress-skin="info" data-progress-starttime="0">
<div class="loader-bg">
<div class="eds_progressValue">0</div>
</div>
<span class="eds_progressIcon"><i class="fas fa-charging-station"></i></span>
</div>
<div class="eds_circleProgress eds_halfCircleProgress" data-progress-dialwidth="10" data-progress-fontsize="20px" data-progress-maxvalue="90" data-progress-size="150px" data-progress-skin="warning" data-progress-starttime="0">
<div class="eds_halfOverflow">
<div class="loader-bg">
<div class="eds_progressValue">0</div>
</div>
</div>
<span class="eds_progressIcon"><i class="fas fa-balance-scale"></i></span>
</div>
<div class="eds_circleProgress eds_halfCircleProgress" data-progress-dialwidth="10" data-progress-fontsize="20px" data-progress-maxvalue="60" data-progress-size="150px" data-progress-skin="danger" data-progress-starttime="0">
<div class="eds_halfOverflow">
<div class="loader-bg">
<div class="eds_progressValue">0</div>
</div>
</div>
<span class="eds_progressIcon"><i class="fas fa-cubes"></i></span>
</div>
<div class="eds_circleProgress eds_fullCircleProgress" data-progress-dialwidth="20" data-progress-fontsize="30px" data-progress-maxvalue="50" data-progress-size="300px" data-progress-skin="success" data-progress-starttime="0">
<div class="loader-bg">
<div class="eds_progressValue">0</div>
</div>
<span class="eds_progressIcon eds_largeIcon"><i class="fas fa-book-open"></i></span>
</div>
<div class="eds_circleProgress eds_halfCircleProgress" data-progress-dialwidth="20" data-progress-fontsize="30px" data-progress-maxvalue="50" data-progress-size="300px" data-progress-skin="info" data-progress-starttime="0">
<div class="eds_halfOverflow">
<div class="loader-bg">
<div class="eds_progressValue">0</div>
</div>
</div>
<span class="eds_progressIcon eds_largeIcon"><i class="fas fa-charging-station"></i></span>
</div>
Carousel
<div id="carouselExampleProgress" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col">
<div class="eds_circleProgress eds_fullCircleProgress" data-progress-dialwidth="10" data-progress-fontsize="20px" data-progress-maxvalue="90" data-progress-size="150px" data-progress-skin="info" data-progress-starttime="0">
<div class="loader-bg">
<div class="eds_progressValue">0</div>
</div>
</div>
</div>
<div class="col">
<div class="eds_circleProgress eds_fullCircleProgress" data-progress-dialwidth="10" data-progress-fontsize="20px" data-progress-maxvalue="74" data-progress-size="150px" data-progress-skin="warning" data-progress-starttime="0">
<div class="loader-bg">
<div class="eds_progressValue">0</div>
</div>
</div>
</div>
<div class="col">
<div class="eds_circleProgress eds_fullCircleProgress" data-progress-dialwidth="10" data-progress-fontsize="20px" data-progress-maxvalue="40" data-progress-size="150px" data-progress-skin="success" data-progress-starttime="0">
<div class="loader-bg">
<div class="eds_progressValue">0</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col">
<div class="eds_circleProgress eds_halfCircleProgress" data-progress-dialwidth="10" data-progress-fontsize="20px" data-progress-maxvalue="60" data-progress-size="150px" data-progress-skin="info" data-progress-starttime="0">
<div class="eds_halfOverflow">
<div class="loader-bg">
<div class="eds_progressValue">0</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="eds_circleProgress eds_halfCircleProgress" data-progress-dialwidth="10" data-progress-fontsize="20px" data-progress-maxvalue="60" data-progress-size="150px" data-progress-skin="warning" data-progress-starttime="0">
<div class="eds_halfOverflow">
<div class="loader-bg">
<div class="eds_progressValue">0</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="eds_circleProgress eds_halfCircleProgress" data-progress-dialwidth="10" data-progress-fontsize="20px" data-progress-maxvalue="30" data-progress-size="150px" data-progress-skin="success" data-progress-starttime="0">
<div class="eds_halfOverflow">
<div class="loader-bg">
<div class="eds_progressValue">0</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col">
<div class="eds_circleProgress eds_fullCircleProgress" data-progress-dialwidth="10" data-progress-fontsize="20px" data-progress-maxvalue="30" data-progress-size="150px" data-progress-skin="info" data-progress-starttime="0">
<div class="loader-bg">
<div class="eds_progressValue">0</div>
</div>
</div>
</div>
<div class="col">
<div class="eds_circleProgress eds_fullCircleProgress" data-progress-dialwidth="10" data-progress-fontsize="20px" data-progress-maxvalue="93" data-progress-size="150px" data-progress-skin="warning" data-progress-starttime="0">
<div class="loader-bg">
<div class="eds_progressValue">0</div>
</div>
</div>
</div>
<div class="col">
<div class="eds_circleProgress eds_fullCircleProgress" data-progress-dialwidth="10" data-progress-fontsize="20px" data-progress-maxvalue="27" data-progress-size="150px" data-progress-skin="success" data-progress-starttime="0">
<div class="loader-bg">
<div class="eds_progressValue">0</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Bootstrap animated progress
<div class="progress eds_progressAnimated">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress eds_progressAnimated">
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress eds_progressAnimated">
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress eds_progressAnimated">
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>