arifal/sibedas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
dev
sibedas/resources/views/ui/progress.blade.php
arifal e17f5beaf0 production code
2025-06-13 13:36:27 +00:00

164 lines
7.8 KiB
PHP
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
@extends('layouts.vertical', ['subtitle' => 'Progress'])
@section('content')
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Progress'])
<!-- start progress -->
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<h5 class="card-title">
How it works
</h5>
<p class="card-subtitle">
A progress bar can be used to show a user how far along he/she is in a process.
</p>
</div>
<div class="card-body">
<div class="progress mb-2">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
<div class="progress mb-2">
<div class="progress-bar" role="progressbar" style="width: 35%" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<div class="progress mb-2">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<div class="progress mb-2">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100">25%</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<h5 class="card-title">
Backgrounds Color
</h5>
<p class="card-subtitle"> Use background utility classes to change the appearance of individual progress
bars.</p>
</div>
<div class="card-body">
<div class="progress mb-2">
<div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-2">
<div class="progress-bar bg-secondary" role="progressbar" style="width: 50%" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-2">
<div class="progress-bar bg-success" role="progressbar" style="width: 75%" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-2">
<div class="progress-bar bg-info" role="progressbar" style="width: 100%" aria-valuenow="100"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0"
aria-valuemax="100"></div>
<div class="progress-bar bg-secondary" role="progressbar" style="width: 30%" aria-valuenow="30"
aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-success" role="progressbar" style="width: 20%" aria-valuenow="20"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<h5 class="card-title">
Striped Progress Bar
</h5>
<p class="card-subtitle">Add <code>.progress-bar-striped</code> to any <code>.progress-bar</code> to
apply a stripe via CSS gradient
over the progress bar’s background color.</p>
</div>
<div class="card-body">
<div class="progress mb-2">
<div class="progress-bar bg-primary progress-bar-striped" role="progressbar" style="width: 25%"
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-2">
<div class="progress-bar bg-secondary progress-bar-striped" role="progressbar" style="width: 50%"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-2">
<div class="progress-bar bg-success progress-bar-striped" role="progressbar" style="width: 75%"
aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-2">
<div class="progress-bar bg-info progress-bar-striped progress-bar-animated" role="progressbar"
style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" role="progressbar"
style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<h5 class="card-title">
Height
</h5>
<p class="card-subtitle"> We only set a height value on the <code>.progress</code>, so if you change
that value the inner
<code>.progress-bar</code> will automatically resize accordingly. Use <code>.progress-xs</code>,
<code>.progress-sm</code>,
<code>.progress-md</code>, <code>.progress-lg</code> or <code>.progress-xl</code> classes.
</p>
</div>
<div class="card-body">
<div class="progress mb-2 progress-xs">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-2 progress-sm">
<div class="progress-bar bg-secondary" role="progressbar" style="width: 50%;" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-2 progress-md">
<div class="progress-bar bg-success" role="progressbar" style="width: 75%;" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-2 progress-lg">
<div class="progress-bar bg-info" role="progressbar" style="width: 35%;" aria-valuenow="35"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-xl">
<div class="progress-bar bg-warning" role="progressbar" style="width: 60%;" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div> <!-- end card body -->
</div> <!-- end card -->
</div> <!-- end col -->
</div> <!-- end row -->
<!-- end progress -->
@endsection
Reference in New Issue View Git Blame Copy Permalink