Menu
  1. Home
  2. Movies and Cinema
  3. Events
  4. Theatre
  5. Music
  6. Concerts
  7. Blog style
  8. About Theme
    1. Features
      1. Short Codes
        1. Pricing
        2. Testimonials
        3. Tabs
        4. Accordions
        5. Boxes
        6. Progress bars
        7. Flip boxes
        8. Custom buttons
        9. Additional menus
        10. Counters
        11. Column Separator
        12. Animations
      2. Utilities
        1. Borders
        2. Clearfix
        3. Colors
        4. Display
        5. Ratios
        6. Float
        7. Position
        8. Visually hidden
        9. Sizing
        10. Spacing
        11. Text
        12. Visibility
      3. Content
        1. Typography
        2. Tables
        3. Figures
        4. Custom Typography element
      4. Theme layout
        1. Panes
        2. Containers
      5. Components A-L
        1. Alerts
        2. Badge
        3. Breadcrumb
        4. Buttons
        5. Button group
        6. Card
        7. Carousel
        8. Collapse
        9. Dropdowns
        10. Forms
        11. Input group
        12. List group
      6. Components M-Z
        1. Modal
        2. Navs and tabs
        3. Navbar
        4. Progress
        5. Scrollspy
        6. Offcanvas
        7. Placeholders
        8. Spinners
        9. Toasts
      7. Layout
        1. Grid
        2. Flex
      8. Images
    2. Pages
      1. 404 Error
      2. FAQ
      3. Our Services
      4. Pricing
      5. Testimonials
      6. Our Team
      7. Our Office
      8. About Us
      9. About Me
Social Links Search User Login Menu
Tools
Close
Search
Close
Close

Progress bars

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
0
<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
0
<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
0
<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
0
<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

0
<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

0
<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
0
<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
0
<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
0
<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
0
<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

0
<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>
0
<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>
0
<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>
0
<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>
0
<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>
0
<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>
Back To Top