mirror of
https://github.com/tabler/tabler.git
synced 2026-07-15 10:01:41 +04:00
Add progress page (#2494)
Co-authored-by: ethancrawford <ethan_jc@hotmail.com>
This commit is contained in:
Paweł Kuna
GitHub
@@ -0,0 +1,149 @@
|
||||
---
|
||||
layout: base
|
||||
title: Onboarding
|
||||
permalink: onboarding.html
|
||||
---
|
||||
|
||||
<nav class="navbar">
|
||||
<div class="container">
|
||||
<div class="row w-100 align-items-center">
|
||||
<div class="col me-auto">
|
||||
{% include "layout/navbar-logo.html" class="logo-gray" %}
|
||||
</div>
|
||||
<div class="col-2">
|
||||
{% include "ui/progress-steps.html" count=5 current=2 %}
|
||||
</div>
|
||||
<div class="col text-end">
|
||||
<a href="{{ page.url | relative }}" class="btn btn-ghost">Skip<span class="d-none d-md-inline"> to dashboard</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="py-5">
|
||||
<div class="container container-tight">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">
|
||||
Let's set up your account
|
||||
</h1>
|
||||
</div>
|
||||
<div class="card mt-5">
|
||||
<div class="card-body space-y-4">
|
||||
<div>
|
||||
<label class="form-label">Full name</label>
|
||||
<input type="text" class="form-control" placeholder="Enter your full name">
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label">Company name</label>
|
||||
<input type="text" class="form-control" placeholder="Enter your company name">
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label">Role</label>
|
||||
<select class="form-select">
|
||||
<option value="">Select your role</option>
|
||||
<option value="developer">Developer</option>
|
||||
<option value="designer">Designer</option>
|
||||
<option value="manager">Manager</option>
|
||||
<option value="founder">Founder</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label">Team size</label>
|
||||
<div class="form-selectgroup">
|
||||
<label class="form-selectgroup-item">
|
||||
<input type="radio" name="team-size" value="1" class="form-selectgroup-input" checked>
|
||||
<span class="form-selectgroup-label">Just me</span>
|
||||
</label>
|
||||
<label class="form-selectgroup-item">
|
||||
<input type="radio" name="team-size" value="2-10" class="form-selectgroup-input">
|
||||
<span class="form-selectgroup-label">2-10 people</span>
|
||||
</label>
|
||||
<label class="form-selectgroup-item">
|
||||
<input type="radio" name="team-size" value="11-50" class="form-selectgroup-input">
|
||||
<span class="form-selectgroup-label">11-50 people</span>
|
||||
</label>
|
||||
<label class="form-selectgroup-item">
|
||||
<input type="radio" name="team-size" value="50+" class="form-selectgroup-input">
|
||||
<span class="form-selectgroup-label">50+ people</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label">What are you planning to use this for?</label>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" value="personal" id="use-personal" checked>
|
||||
<label class="form-check-label" for="use-personal">
|
||||
Personal projects
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" value="business" id="use-business">
|
||||
<label class="form-check-label" for="use-business">
|
||||
Business applications
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" value="client" id="use-client">
|
||||
<label class="form-check-label" for="use-client">
|
||||
Client work
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" value="learning" id="use-learning">
|
||||
<label class="form-check-label" for="use-learning">
|
||||
Learning and experimentation
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label">How did you hear about us?</label>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="referral" value="search" id="ref-search">
|
||||
<label class="form-check-label" for="ref-search">
|
||||
Search engine
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="referral" value="social" id="ref-social">
|
||||
<label class="form-check-label" for="ref-social">
|
||||
Social media
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="referral" value="friend" id="ref-friend">
|
||||
<label class="form-check-label" for="ref-friend">
|
||||
Friend or colleague
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="referral" value="blog" id="ref-blog">
|
||||
<label class="form-check-label" for="ref-blog">
|
||||
Blog or article
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="referral" value="other" id="ref-other">
|
||||
<label class="form-check-label" for="ref-other">
|
||||
Other
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="notifications" checked>
|
||||
<label class="form-check-label" for="notifications">
|
||||
Send me product updates and tips via email
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-list justify-content-between mt-4">
|
||||
{% include "ui/button.html" text="Back" color="link link-secondary" %}
|
||||
{% include "ui/button.html" text="Continue" color="primary" %}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -0,0 +1,270 @@
|
||||
---
|
||||
layout: default
|
||||
title: Progress
|
||||
page-header: Progress
|
||||
page-menu: base.progress
|
||||
permalink: progress.html
|
||||
---
|
||||
|
||||
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Default</h3>
|
||||
<div class="space-y">
|
||||
{% include "ui/progress.html" value="0" %}
|
||||
{% include "ui/progress.html" value="20" %}
|
||||
{% include "ui/progress.html" value="40" %}
|
||||
{% include "ui/progress.html" value="100" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">With value</h3>
|
||||
<div class="space-y">
|
||||
{% include "ui/progress.html" value="10" show-value size="lg" %}
|
||||
{% include "ui/progress.html" value="20" show-value size="lg" %}
|
||||
{% include "ui/progress.html" value="90" show-value size="lg" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Colors</h3>
|
||||
<div class="space-y">
|
||||
{% include "ui/progress.html" color="blue" value="20" %}
|
||||
{% include "ui/progress.html" color="green" value="40" %}
|
||||
{% include "ui/progress.html" color="yellow" value="60" %}
|
||||
{% include "ui/progress.html" color="red" value="80" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Sizes</h3>
|
||||
<div class="space-y">
|
||||
{% include "ui/progress.html" value="20" size="sm" %}
|
||||
{% include "ui/progress.html" value="40" %}
|
||||
{% include "ui/progress.html" value="60" size="lg" %}
|
||||
{% include "ui/progress.html" value="80" size="xl" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Indeterminate</h3>
|
||||
<div class="space-y">
|
||||
{% include "ui/progress.html" indeterminate=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Multiple values</h3>
|
||||
<div class="space-y">
|
||||
{% include "ui/progress.html" values="20,30,10" %}
|
||||
{% include "ui/progress.html" values="10,20,30,40" class="progress-separated" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Striped</h3>
|
||||
<div class="space-y">
|
||||
{% include "ui/progress.html" color="blue" value="20" striped %}
|
||||
{% include "ui/progress.html" color="green" value="40" striped %}
|
||||
{% include "ui/progress.html" color="yellow" value="60" striped %}
|
||||
{% include "ui/progress.html" color="red" value="80" striped %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Animated</h3>
|
||||
<div class="space-y">
|
||||
{% include "ui/progress.html" value="20" striped animated %}
|
||||
{% include "ui/progress.html" value="40" color="green" striped animated %}
|
||||
{% include "ui/progress.html" value="60" color="yellow" striped animated %}
|
||||
{% include "ui/progress.html" value="80" color="red" striped animated %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">
|
||||
Animated with JavaScript
|
||||
</h3>
|
||||
<div class="row align-items-center g-0">
|
||||
<div class="col">
|
||||
{% include "ui/progress.html" value="0" id="progress-animated" %}
|
||||
</div>
|
||||
<div class="col-2 text-end" id="progress-animated-value">
|
||||
0%
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-list mt-3">
|
||||
<button class="btn btn-sm" id="progress-animated-0">0%</button>
|
||||
<button class="btn btn-sm" id="progress-animated-10">10%</button>
|
||||
<button class="btn btn-sm" id="progress-animated-50">50%</button>
|
||||
<button class="btn btn-sm" id="progress-animated-100">100%</button>
|
||||
<button class="btn btn-sm ms-3" id="progress-animated-minus-10">-10%</button>
|
||||
<button class="btn btn-sm" id="progress-animated-add-10">+10%</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">
|
||||
Steps Progress
|
||||
</h3>
|
||||
<div class="space-y">
|
||||
{% include "ui/progress-steps.html" count=3 %}
|
||||
{% include "ui/progress-steps.html" count=5 active=4 %}
|
||||
{% include "ui/progress-steps.html" count=10 color="red" %}
|
||||
{% include "ui/progress-steps.html" count=8 color="green" active=8 %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">
|
||||
Progress Background
|
||||
</h3>
|
||||
<div class="space-y">
|
||||
{% include "ui/progressbg.html" value="85" text="Poland" show-value=true %}
|
||||
{% include "ui/progressbg.html" value="65" text="Germany" show-value=true %}
|
||||
{% include "ui/progressbg.html" value="45" text="United States" show-value=true %}
|
||||
{% include "ui/progressbg.html" value="25" text="France" show-value=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">
|
||||
Progress Background Colors
|
||||
</h3>
|
||||
<div class="space-y">
|
||||
{% include "ui/progressbg.html" value="75" text="Success" color="success-lt" show-value=true %}
|
||||
{% include "ui/progressbg.html" value="60" text="Warning" color="warning-lt" show-value=true %}
|
||||
{% include "ui/progressbg.html" value="40" text="Danger" color="danger-lt" show-value=true %}
|
||||
{% include "ui/progressbg.html" value="90" text="Info" color="info-lt" show-value=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">
|
||||
Progress Description
|
||||
</h3>
|
||||
<div class="space-y">
|
||||
{% include "ui/progress-description.html" label="Project completion" value="85" color="green" %}
|
||||
{% include "ui/progress-description.html" label="Storage usage" description="2.4GB of 5GB" value="48" color="blue" %}
|
||||
{% include "ui/progress-description.html" label="Download progress" value="75" color="yellow" %}
|
||||
{% include "ui/progress-description.html" label="Skills assessment" description="HTML/CSS" value="92" color="red" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">
|
||||
Progress Description Sizes
|
||||
</h3>
|
||||
<div class="space-y">
|
||||
{% include "ui/progress-description.html" label="Small progress" value="60" size="sm" color="blue" %}
|
||||
{% include "ui/progress-description.html" label="Default progress" value="70" color="green" %}
|
||||
{% include "ui/progress-description.html" label="Large progress" value="80" size="lg" color="orange" %}
|
||||
{% include "ui/progress-description.html" label="Extra large" value="90" size="xl" color="purple" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% capture_script -%}
|
||||
<!-- BEGIN SCRIPT OF ANIMATION -->
|
||||
<script>
|
||||
/*
|
||||
This script is for animation of the last progress bar
|
||||
It increases the progress bar value by a random amount every 2 seconds until it reaches 100%
|
||||
When it reaches 100%, it changes the color to green and stops the animation
|
||||
|
||||
This is just a demo script to show how to animate the progress bar. You can modify it as needed.
|
||||
*/
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
var width = 0;
|
||||
var setWidth = function(w) {
|
||||
width = Math.min(Math.max(w, 0), 100);
|
||||
|
||||
progress.querySelector('.progress-bar').style.width = width + '%';
|
||||
progress.querySelector('.progress-bar').setAttribute('aria-valuenow', width);
|
||||
document.getElementById('progress-animated-value').innerText = width + '%';
|
||||
|
||||
if (width >= 100) {
|
||||
progress.querySelector('.progress-bar').classList.add('bg-green');
|
||||
} else {
|
||||
progress.querySelector('.progress-bar').classList.remove('bg-green');
|
||||
}
|
||||
}
|
||||
|
||||
var progress = document.getElementById('progress-animated');
|
||||
|
||||
var increment = 0;
|
||||
var interval = setInterval(function () {
|
||||
increment = Math.ceil(Math.random() * 10);
|
||||
setWidth(width + increment);
|
||||
|
||||
if (width >= 100) {
|
||||
clearInterval(interval);
|
||||
}
|
||||
}, 2000);
|
||||
|
||||
document.getElementById('progress-animated-0').addEventListener('click', function() {
|
||||
setWidth(0);
|
||||
});
|
||||
|
||||
document.getElementById('progress-animated-add-10').addEventListener('click', function() {
|
||||
setWidth(width + 10);
|
||||
});
|
||||
|
||||
|
||||
document.getElementById('progress-animated-minus-10').addEventListener('click', function() {
|
||||
setWidth(width - 10);
|
||||
});
|
||||
|
||||
|
||||
document.getElementById('progress-animated-100').addEventListener('click', function() {
|
||||
setWidth(100);
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
<!-- END SCRIPT OF ANIMATION -->
|
||||
{%- endcapture_script -%}
|
||||
Reference in New Issue
Block a user