Profil Utilisateur Progress Bootstrap 5

Bootstrap 5 Progress Profil Step Competences Skills Registre Ui
Composant progression profil Bootstrap 5 avec barres compétences animées, skills visuels colorés et indicateur d'avancement du profil.
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8" />
    <meta name="copyright" content="AngularForAll" />
    <meta name="author" content="AngularForAll" />
    <meta name="robots" content="noindex, nofollow" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Cache-Control" content="public, max-age=604800" />
    <title>Snippets Progress Profil Boostrap5 202605060030 | AngularForAll</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    <style>
        .progress-dynamic {
            padding: 2rem;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            border-radius: 20px;
        }
        
        .progress-header {
            text-align: center;
            margin-bottom: 2rem;
        }
        
        .progress-percentage {
            font-size: 3rem;
            font-weight: bold;
            color: #0d6efd;
            margin-bottom: 0.5rem;
        }
        
        .progress-steps-horizontal {
            display: flex;
            justify-content: space-between;
            margin-bottom: 2rem;
        }
        
        .step-indicator {
            text-align: center;
            flex: 1;
            position: relative;
        }
        
        .step-indicator::after {
            content: '';
            position: absolute;
            top: 15px;
            left: 50%;
            width: 100%;
            height: 2px;
            background: #dee2e6;
            z-index: 0;
        }
        
        .step-indicator:last-child::after {
            display: none;
        }
        
        .step-dot {
            width: 30px;
            height: 30px;
            background: white;
            border: 2px solid #dee2e6;
            border-radius: 50%;
            display: inline-block;
            position: relative;
            z-index: 1;
            transition: all 0.3s ease;
        }
        
        .step-indicator.completed .step-dot {
            background: #28a745;
            border-color: #28a745;
        }
        
        .step-indicator.completed::after {
            background: #28a745;
        }
        
        .step-indicator.active .step-dot {
            background: #0d6efd;
            border-color: #0d6efd;
            box-shadow: 0 0 0 5px rgba(13, 110, 253, 0.2);
        }
        
        .step-name {
            font-size: 0.75rem;
            margin-top: 0.5rem;
            color: #6c757d;
        }
        
        .step-indicator.active .step-name {
            color: #0d6efd;
            font-weight: 600;
        }
    </style>
</head>
<body>
    <div class="container py-5">
        <div class="progress-dynamic">
            <div class="progress-header">
                <div class="progress-percentage">75%</div>
                <p class="text-muted">Complétion du profil</p>
            </div>
            
            <div class="progress mb-4" style="height: 8px;">
                <div class="progress-bar progress-bar-striped progress-bar-animated" 
                     style="width: 75%"></div>
            </div>
            
            <div class="progress-steps-horizontal">
                <div class="step-indicator completed">
                    <div class="step-dot"></div>
                    <div class="step-name">Compte</div>
                </div>
                
                <div class="step-indicator completed">
                    <div class="step-dot"></div>
                    <div class="step-name">Profil</div>
                </div>
                
                <div class="step-indicator completed">
                    <div class="step-dot"></div>
                    <div class="step-name">Compétences</div>
                </div>
                
                <div class="step-indicator active">
                    <div class="step-dot"></div>
                    <div class="step-name">Expérience</div>
                </div>
                
                <div class="step-indicator">
                    <div class="step-dot"></div>
                    <div class="step-name">Vérification</div>
                </div>
            </div>
            
            <div class="card bg-white">
                <div class="card-body">
                    <h5 class="card-title">Étape 4 : Expérience professionnelle</h5>
                    <div class="mb-3">
                        <label class="form-label">Poste actuel</label>
                        <input type="text" class="form-control" placeholder="Ex: Développeur Full Stack">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Entreprise</label>
                        <input type="text" class="form-control" placeholder="Nom de l'entreprise">
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Date de début</label>
                            <input type="date" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Date de fin</label>
                            <input type="date" class="form-control">
                        </div>
                    </div>
                    <button class="btn btn-primary w-100">
                        <i class="bi bi-save me-2"></i>Enregistrer et continuer
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
Télécharger le fichier source
- Profil Utilisateur Progress Bootstrap 5

Explorer par mot clé

Partager

Voir aussi

Explorer par mot clé
