v1.0.1
MENU ANIMATIONS
ADVANCED EFFECTS
CORE BACKGROUND
UI SURECART
BUTTONS
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition 001 Configurator - BricksFusion</title>
<style>
:root {
--background: #000;
--card-bg: #1e1e1e;
--card-bg-hover: #252525;
--text-primary: #f2f2f7;
--text-secondary: #8e8e93;
--accent: #b4ff99;
--accent-hover: #a1e588;
--border: #2c2c2e;
--shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
--track: #2c2c2e;
--thumb: #b4ff99;
--card-radius: 16px;
--input-radius: 8px;
--button-radius: 12px;
--transition: all 0.25s ease;
--font: 'Inter', BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif;
--action-bar-height: 70px;
--success: #28a745;
--warning: #ffc107;
--danger: #dc3545;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font);
background-color: var(--background);
color: var(--text-primary);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding-bottom: var(--action-bar-height);
}
.action-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: var(--action-bar-height);
background: linear-gradient(145deg, #1a1a1a, #0f0f0f);
border-top: 1px solid var(--border);
z-index: 1000;
display: flex;
align-items: center;
padding: 0 1.5rem;
gap: 1rem;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
}
.breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem;
flex: 1;
}
.breadcrumb-item {
color: var(--text-secondary);
font-size: var(--text-xs);
font-weight: 500;
text-decoration: none;
transition: var(--transition);
padding: 0.5rem 0.75rem;
border-radius: 6px;
}
.breadcrumb-item:hover {
color: var(--text-primary);
background-color: rgba(255, 255, 255, 0.05);
}
.breadcrumb-item.active {
color: var(--accent);
background-color: rgba(180, 255, 153, 0.1);
}
.breadcrumb-separator {
color: var(--text-secondary);
font-size: var(--text-xs);
opacity: 0.5;
}
.action-buttons {
display: flex;
align-items: center;
gap: 0.75rem;
}
.action-btn {
padding: 0.6rem 1rem;
background-color: var(--card-bg);
color: var(--text-primary);
font-family: var(--font);
font-size: var(--text-xs);
font-weight: 500;
border: 1px solid var(--border);
border-radius: var(--button-radius);
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
white-space: nowrap;
}
.action-btn:hover {
background-color: var(--card-bg-hover);
border-color: var(--accent);
transform: translateY(-1px);
}
.action-btn.primary {
background: linear-gradient(90deg, var(--accent), #a1e588);
border-color: var(--accent);
color: #000;
font-weight: 600;
}
.action-btn.primary:hover {
background: linear-gradient(90deg, var(--accent-hover), #90d477);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(180, 255, 153, 0.3);
}
.data-attribute-display {
background-color: rgba(50, 50, 50, 0.8);
border: 1px solid var(--border);
border-radius: 6px;
padding: 0.5rem 0.75rem;
font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
font-size: var(--text-xs);
color: #b4ff99;
cursor: pointer;
transition: var(--transition);
user-select: all;
}
.data-attribute-display:hover {
background-color: rgba(180, 255, 153, 0.2);
border-color: var(--accent);
}
.container {
max-width: 100%;
margin: 0 auto;
padding: 2rem 1.5rem;
}
.page-header {
text-align: center;
margin-bottom: 2rem;
}
.page-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 0.5rem;
background: linear-gradient(90deg, var(--accent), #a1e588);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.page-subtitle {
font-size: var(--text-s);
color: var(--text-secondary);
font-weight: 500;
}
.instructions-toggle {
margin-bottom: 2rem;
}
.instructions-card {
background-color: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--card-radius);
box-shadow: var(--shadow);
overflow: hidden;
transition: var(--transition);
}
.instructions-header {
padding: 1rem 1.5rem;
cursor: pointer;
transition: var(--transition);
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid transparent;
}
.instructions-header:hover {
background-color: var(--card-bg-hover);
}
.instructions-card.expanded .instructions-header {
border-bottom-color: var(--border);
}
.instructions-title {
font-size: var(--text-s);
font-weight: 600;
}
.toggle-icon {
font-size: 1.2em;
transition: transform 0.3s ease;
}
.toggle-icon.expanded {
transform: rotate(180deg);
}
.instructions-content {
padding: 0 1.5rem;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.instructions-content.show {
max-height: 500px;
padding: 1.5rem;
}
.instructions-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
.how-to-use ol {
padding-left: 1.5rem;
}
.how-to-use li {
margin-bottom: 0.75rem;
font-size: var(--text-xs);
color: var(--text-secondary);
line-height: 1.6;
}
.how-to-use strong {
color: var(--text-primary);
font-weight: 600;
}
.how-to-use code {
background-color: rgba(50, 50, 50, 0.5);
padding: 0.2rem 0.5rem;
border-radius: 4px;
font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
font-size: var(--text-xs);
color: #b4ff99;
}
.content {
display: grid;
grid-template-columns: 1fr 500px;
gap: 2rem;
align-items: start;
}
.preview-section {
position: sticky;
top: 2rem;
}
.controls-section {
max-width: 500px;
}
.card {
background-color: var(--card-bg);
border-radius: var(--card-radius);
box-shadow: var(--shadow);
overflow: hidden;
margin-bottom: 1.5rem;
border: 1px solid var(--border);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}
.preview-container {
height: 400px;
width: 100%;
position: relative;
overflow: hidden;
border-radius: var(--card-radius);
background-color: #000000;
border: 1px solid var(--border);
box-shadow: var(--shadow);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.preview-content {
color: white;
text-align: center;
font-weight: bold;
font-size: var(--text-s);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
.preview-controls {
position: absolute;
top: 1rem;
right: 1rem;
display: flex;
gap: 0.5rem;
z-index: 10;
}
.preview-btn {
padding: 0.5rem;
background-color: rgba(0, 0, 0, 0.7);
color: white;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 6px;
cursor: pointer;
transition: var(--transition);
font-size: var(--text-xs);
backdrop-filter: blur(5px);
}
.preview-btn:hover {
background-color: var(--accent);
border-color: var(--accent);
color: #000;
}
.preview-btn svg {
width: 18px;
height: 18px;
stroke: currentColor;
}
.background-selector-wrapper {
position: relative;
display: inline-block;
}
.background-selector-btn {
position: relative;
}
.background-selector-btn:hover {
background-color: rgba(180, 255, 153, 0.2);
border-color: var(--accent);
box-shadow: 0 0 8px rgba(180, 255, 153, 0.3);
}
.hidden-color-input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.card-heading {
padding: 1rem 1.5rem;
font-size: var(--text-s);
font-weight: 600;
border-bottom: 1px solid var(--border);
letter-spacing: 0.3px;
display: flex;
justify-content: space-between;
align-items: center;
}
.card-actions {
display: flex;
gap: 0.5rem;
}
.card-action-btn {
padding: 0.4rem 0.8rem;
background-color: transparent;
color: var(--text-secondary);
border: 1px solid var(--border);
border-radius: 6px;
cursor: pointer;
font-size: var(--text-xs);
transition: var(--transition);
}
.card-action-btn:hover {
color: var(--text-primary);
border-color: var(--accent);
background-color: rgba(180, 255, 153, 0.1);
}
.card-content {
padding: 1.5rem;
}
.control-group {
margin-bottom: 1.5rem;
position: relative;
}
.control-group:last-child {
margin-bottom: 0;
}
.control-label {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.75rem;
}
.label-text {
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.2px;
display: flex;
align-items: center;
gap: 0.5rem;
}
.help-tooltip {
cursor: help;
opacity: 0.7;
transition: var(--transition);
}
.help-tooltip:hover {
opacity: 1;
color: var(--accent);
}
.value-display {
display: flex;
align-items: center;
gap: 0.5rem;
}
.value-text {
font-size: var(--text-xs);
color: var(--text-secondary);
background-color: rgba(50, 50, 50, 0.5);
padding: 2px 8px;
border-radius: 4px;
min-width: 45px;
text-align: center;
}
.reset-btn {
padding: 0.2rem 0.4rem;
background-color: transparent;
color: var(--text-secondary);
border: 1px solid var(--border);
border-radius: 4px;
cursor: pointer;
font-size: 10px;
transition: var(--transition);
}
.reset-btn:hover {
color: var(--danger);
border-color: var(--danger);
background-color: rgba(220, 53, 69, 0.1);
}
input[type="range"] {
-webkit-appearance: none;
width: 100%;
height: 6px;
background: var(--track);
border-radius: 3px;
outline: none;
margin: 0.8rem 0;
position: relative;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background: var(--thumb);
border-radius: 50%;
cursor: pointer;
transition: var(--transition);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
input[type="range"]::-webkit-slider-thumb:hover {
transform: scale(1.2);
box-shadow: 0 0 10px rgba(180, 255, 153, 0.5);
}
.color-list {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 1.5rem;
}
.color-row {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1rem 1.25rem;
background-color: rgba(30, 30, 30, 0.7);
border: 1px solid var(--border);
border-radius: var(--input-radius);
transition: var(--transition);
}
.color-row:hover {
border-color: var(--accent);
box-shadow: 0 0 0 1px rgba(180, 255, 153, 0.1);
}
.color-picker-container {
position: relative;
width: 40px;
height: 40px;
border-radius: 8px;
overflow: hidden;
border: 2px solid var(--border);
cursor: pointer;
transition: var(--transition);
flex-shrink: 0;
background: var(--card-bg);
display: flex;
align-items: center;
justify-content: center;
--selected-color: #4CAF50;
}
.color-picker-container:hover {
border-color: var(--accent);
transform: scale(1.05);
box-shadow: 0 0 12px rgba(180, 255, 153, 0.3);
}
.color-picker-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--selected-color, #4CAF50);
border-radius: 6px;
transition: var(--transition);
}
input[type="color"] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
cursor: pointer;
background: transparent;
opacity: 0;
z-index: 2;
}
.color-input-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.color-label {
font-size: 10px;
font-weight: 500;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-left: 0.25rem;
}
.color-input {
padding: 0.5rem 0.75rem;
background-color: rgba(0, 0, 0, 0.3);
border: 1px solid var(--border);
border-radius: 6px;
color: var(--text-primary);
font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
font-size: 12px;
transition: var(--transition);
min-width: 0;
}
.color-input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 1px rgba(180, 255, 153, 0.2);
outline: none;
}
.color-input.invalid {
border-color: var(--danger);
box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.2);
}
.hex-input,
.hsl-input {
width: 100%;
}
.color-input-group:nth-child(2) {
flex: 0.3;
}
.color-input-group:nth-child(3) {
flex: 0.7;
}
select {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--border);
border-radius: var(--input-radius);
font-family: var(--font);
font-size: var(--text-xs);
color: var(--text-primary);
background-color: var(--card-bg);
margin-bottom: 0.75rem;
outline: none;
transition: var(--transition);
}
select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(180, 255, 153, 0.2);
}
.notification {
position: fixed;
bottom: calc(var(--action-bar-height) + 1rem);
left: 50%;
background-color: var(--success);
color: white;
padding: 0.75rem 1rem;
border-radius: var(--input-radius);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
z-index: 1001;
transform: translate(-50%, 200px);
opacity: 0;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
font-size: var(--text-xs);
font-weight: 500;
max-width: 320px;
word-wrap: break-word;
line-height: 1.4;
text-align: center;
}
.notification.show {
transform: translate(-50%, 0);
opacity: 1;
}
.gradient-preview {
height: 24px;
border-radius: 4px;
margin-bottom: 10px;
background: linear-gradient(to right, #4CAF50, #45a049);
border: 1px solid var(--border);
}
.PageTransition001-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 10;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
contain: strict;
isolation: isolate;
}
.PageTransition001-container.PageTransition001-active {
opacity: 1;
visibility: visible;
}
.PageTransition001-progress-bar {
width: 300px;
height: 6px;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 3px;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.PageTransition001-progress {
width: 0;
height: 100%;
background: linear-gradient(90deg, #4CAF50, #45a049);
transition: width 0.3s ease;
border-radius: 3px;
}
.PageTransition001-counter {
font-size: 18px;
color: white;
margin-top: 15px;
}
@media (max-width: 1200px) {
.content {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.preview-section {
position: static;
}
.controls-section {
max-width: 100%;
}
}
@media (max-width: 768px) {
.action-bar {
flex-direction: column;
height: auto;
min-height: var(--action-bar-height);
padding: 0.75rem;
}
.breadcrumb {
order: 1;
width: 100%;
}
.action-buttons {
order: 2;
width: 100%;
justify-content: center;
flex-wrap: wrap;
}
body {
padding-bottom: calc(var(--action-bar-height) + 20px);
}
.notification {
bottom: calc(var(--action-bar-height) + 2rem);
max-width: 280px;
transform: translate(-50%, 250px);
}
.notification.show {
transform: translate(-50%, 0);
opacity: 1;
}
.color-row {
flex-direction: column;
align-items: stretch;
gap: 1rem;
padding: 1rem;
}
.color-picker-container {
align-self: center;
margin-bottom: 0.5rem;
}
.color-input-group {
align-items: stretch;
}
.hex-input,
.hsl-input {
width: 100%;
}
.preview-container {
height: 300px;
}
.data-attribute-display {
font-size: 10px;
padding: 0.4rem 0.6rem;
}
.action-btn {
font-size: 11px;
padding: 0.5rem 0.8rem;
}
.page-title {
font-size: 2rem;
}
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
button:focus-visible,
input:focus-visible,
.action-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--background);
}
::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent);
}
.loading {
opacity: 0.6;
pointer-events: none;
position: relative;
}
.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid var(--border);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="action-bar">
<nav class="breadcrumb">
<a href="https://bricksfusion.com" class="breadcrumb-item">Home</a>
<span class="breadcrumb-separator">›</span>
<a href="https://bricksfusion.com/transition-pages/" class="breadcrumb-item">Transition Pages</a>
<span class="breadcrumb-separator">›</span>
<span class="breadcrumb-item active">Transition 001</span>
</nav>
<div class="action-buttons">
<button class="action-btn primary" id="download-config" title="Copy JavaScript code (Ctrl+D)" data-protection-animation="true">
<span>⬇</span>
Copy JS
</button>
</div>
</div>
<div class="container">
<div class="page-header">
<h1 class="page-title">Transition 001</h1>
<p class="page-subtitle">Interactive page transitions for Bricks Builder</p>
</div>
<div class="instructions-toggle">
<div class="instructions-card" id="instructions-card">
<div class="instructions-header" id="instructions-toggle">
<div class="instructions-title">
How to Use & Code Information
</div>
<span class="toggle-icon">â–¼</span>
</div>
<div class="instructions-content" id="instructions-content">
<div class="instructions-grid">
<div class="how-to-use">
<ol>
<li>Customize your page transition effect using the controls below</li>
<li>Click <strong>Copy JS</strong> to copy the JavaScript code to clipboard</li>
<li>Go to your <strong>Template</strong> (Header/Footer) that appears on all pages</li>
<li>Click <strong>Manage</strong> → <strong>Page Settings</strong> → <strong>Custom Code</strong></li>
<li>Paste the code in <strong>Body (Footer) Scripts</strong> section</li>
<li>The smooth transition effect will now appear automatically when visitors navigate between pages on your website</li>
</ol>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<section class="preview-section">
<div class="preview-container" id="transition-preview">
<div class="preview-content">Click here to test the transition effect</div>
<div class="preview-controls">
<button class="preview-btn" id="randomize-transition" title="Randomize (R)">🎲</button>
<div class="background-selector-wrapper">
<button class="preview-btn background-selector-btn" id="background-selector">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="12,2 2,7 12,12 22,7"/>
<polyline points="2,17 12,22 22,17"/>
<polyline points="2,12 12,17 22,12"/>
</svg>
</button>
<input type="color" id="preview-background-picker" class="hidden-color-input" value="#000000" title="Change Preview Background (B)">
</div>
</div>
<div class="PageTransition001-container" id="previewTransitionContainer">
<div class="PageTransition001-progress-bar" id="previewProgressBar">
<div class="PageTransition001-progress" id="previewProgress"></div>
</div>
<div class="PageTransition001-counter" id="previewCounter">0%</div>
</div>
</div>
</section>
<section class="controls-section">
<div class="card">
<div class="card-heading">
Progress Bar Settings
<div class="card-actions">
<button class="card-action-btn" id="reset-progress" title="Reset Progress Settings">↺</button>
</div>
</div>
<div class="card-content">
<div class="control-group">
<div class="control-label">
<span class="label-text">
Progress Bar Width
<span class="help-tooltip" title="Width of the progress bar in pixels">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="bar-width-value">300</span>px</span>
<button class="reset-btn" onclick="resetParameter('bar-width', 300)">↺</button>
</div>
</div>
<input type="range" id="bar-width" min="200" max="500" step="10" value="300">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Progress Bar Height
<span class="help-tooltip" title="Height of the progress bar in pixels">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="bar-height-value">6</span>px</span>
<button class="reset-btn" onclick="resetParameter('bar-height', 6)">↺</button>
</div>
</div>
<input type="range" id="bar-height" min="4" max="20" step="1" value="6">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Border Radius
<span class="help-tooltip" title="Rounded corners of the progress bar">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="border-radius-value">3</span>px</span>
<button class="reset-btn" onclick="resetParameter('border-radius', 3)">↺</button>
</div>
</div>
<input type="range" id="border-radius" min="0" max="20" step="1" value="3">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Animation Speed
<span class="help-tooltip" title="Speed of the progress animation">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="animation-speed-value">15</span>ms</span>
<button class="reset-btn" onclick="resetParameter('animation-speed', 15)">↺</button>
</div>
</div>
<input type="range" id="animation-speed" min="5" max="50" step="5" value="15">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Progress Step Size
<span class="help-tooltip" title="How fast the progress increments">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="step-size-value">4</span>%</span>
<button class="reset-btn" onclick="resetParameter('step-size', 4)">↺</button>
</div>
</div>
<input type="range" id="step-size" min="1" max="10" step="1" value="4">
</div>
</div>
</div>
<div class="card">
<div class="card-heading">
Counter Settings
<div class="card-actions">
<button class="card-action-btn" id="reset-counter" title="Reset Counter Settings">↺</button>
</div>
</div>
<div class="card-content">
<div class="control-group">
<div class="control-label">
<span class="label-text">
Counter Font Size
<span class="help-tooltip" title="Size of the percentage counter text">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="counter-size-value">18</span>px</span>
<button class="reset-btn" onclick="resetParameter('counter-size', 18)">↺</button>
</div>
</div>
<input type="range" id="counter-size" min="14" max="32" step="2" value="18">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Counter Margin Top
<span class="help-tooltip" title="Space between progress bar and counter">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="counter-margin-value">15</span>px</span>
<button class="reset-btn" onclick="resetParameter('counter-margin', 15)">↺</button>
</div>
</div>
<input type="range" id="counter-margin" min="5" max="30" step="5" value="15">
</div>
</div>
</div>
<div class="card">
<div class="card-heading">
Background Settings
<div class="card-actions">
<button class="card-action-btn" id="reset-background" title="Reset Background Settings">↺</button>
</div>
</div>
<div class="card-content">
<div class="control-group">
<div class="control-label">
<span class="label-text">
Background Opacity
<span class="help-tooltip" title="Transparency of the overlay background">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="bg-opacity-value">0.8</span></span>
<button class="reset-btn" onclick="resetParameter('bg-opacity', 0.8)">↺</button>
</div>
</div>
<input type="range" id="bg-opacity" min="0.3" max="1" step="0.05" value="0.8">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">Background Color</span>
</div>
<div class="color-list">
<div class="color-row">
<div class="color-picker-container" style="--selected-color: #000000;">
<input type="color" id="bg-color" value="#000000">
</div>
<div class="color-input-group">
<span class="color-label">HEX</span>
<input type="text" class="color-input hex-input" id="bg-color-hex" value="#000000" placeholder="#000000">
</div>
<div class="color-input-group">
<span class="color-label">HSL</span>
<input type="text" class="color-input hsl-input" id="bg-color-hsl" placeholder="hsl(0, 0%, 0%)">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-heading">
Color Settings
<div class="card-actions">
<button class="card-action-btn" id="reset-colors" title="Reset Color Settings">↺</button>
</div>
</div>
<div class="card-content">
<div class="control-group">
<div class="control-label">
<span class="label-text">Progress Gradient</span>
</div>
<div class="gradient-preview" id="gradient-preview"></div>
<div class="color-list">
<div class="color-row">
<div class="color-picker-container" style="--selected-color: #4CAF50;">
<input type="color" id="gradient-start" value="#4CAF50">
</div>
<div class="color-input-group">
<span class="color-label">HEX</span>
<input type="text" class="color-input hex-input" id="gradient-start-hex" value="#4CAF50" placeholder="#4CAF50">
</div>
<div class="color-input-group">
<span class="color-label">HSL</span>
<input type="text" class="color-input hsl-input" id="gradient-start-hsl" placeholder="hsl(122, 39%, 49%)">
</div>
</div>
<div class="color-row">
<div class="color-picker-container" style="--selected-color: #45a049;">
<input type="color" id="gradient-end" value="#45a049">
</div>
<div class="color-input-group">
<span class="color-label">HEX</span>
<input type="text" class="color-input hex-input" id="gradient-end-hex" value="#45a049" placeholder="#45a049">
</div>
<div class="color-input-group">
<span class="color-label">HSL</span>
<input type="text" class="color-input hsl-input" id="gradient-end-hsl" placeholder="hsl(122, 35%, 45%)">
</div>
</div>
</div>
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">Counter Text Color</span>
</div>
<div class="color-list">
<div class="color-row">
<div class="color-picker-container" style="--selected-color: #ffffff;">
<input type="color" id="counter-color" value="#ffffff">
</div>
<div class="color-input-group">
<span class="color-label">HEX</span>
<input type="text" class="color-input hex-input" id="counter-color-hex" value="#ffffff" placeholder="#ffffff">
</div>
<div class="color-input-group">
<span class="color-label">HSL</span>
<input type="text" class="color-input hsl-input" id="counter-color-hsl" placeholder="hsl(0, 0%, 100%)">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="notification" id="notification"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
let transitionConfig = {
barWidth: 300,
barHeight: 6,
borderRadius: 3,
animationSpeed: 15,
stepSize: 4,
counterSize: 18,
counterMargin: 15,
bgOpacity: 0.8,
gradientStart: "#4CAF50",
gradientEnd: "#45a049",
counterColor: "#ffffff",
bgColor: "#000000"
};
const defaultConfig = { ...transitionConfig };
function updateConfig() {
updatePreviewStyles();
updateGradientPreview();
saveConfiguration();
}
function initializePreview() {
updateConfig();
}
function updatePreviewStyles() {
const rgbColor = hexToRgb(transitionConfig.bgColor);
const container = document.getElementById('previewTransitionContainer');
const progressBar = document.getElementById('previewProgressBar');
const progress = document.getElementById('previewProgress');
const counter = document.getElementById('previewCounter');
if (container) {
container.style.backgroundColor = `rgba(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}, ${transitionConfig.bgOpacity})`;
}
if (progressBar) {
progressBar.style.width = transitionConfig.barWidth + 'px';
progressBar.style.height = transitionConfig.barHeight + 'px';
progressBar.style.borderRadius = transitionConfig.borderRadius + 'px';
}
if (progress) {
progress.style.background = `linear-gradient(90deg, ${transitionConfig.gradientStart}, ${transitionConfig.gradientEnd})`;
progress.style.borderRadius = transitionConfig.borderRadius + 'px';
}
if (counter) {
counter.style.fontSize = transitionConfig.counterSize + 'px';
counter.style.color = transitionConfig.counterColor;
counter.style.marginTop = transitionConfig.counterMargin + 'px';
}
}
function updateGradientPreview() {
const gradientPreview = document.getElementById('gradient-preview');
if (gradientPreview) {
gradientPreview.style.background = `linear-gradient(to right, ${transitionConfig.gradientStart}, ${transitionConfig.gradientEnd})`;
}
}
function testTransition() {
const container = document.getElementById('previewTransitionContainer');
const progress = document.getElementById('previewProgress');
const counter = document.getElementById('previewCounter');
if (!container || !progress || !counter) return;
container.classList.remove('PageTransition001-active');
progress.style.width = '0%';
counter.textContent = '0%';
setTimeout(() => {
container.classList.add('PageTransition001-active');
let width = 0;
const interval = setInterval(() => {
if (width >= 100) {
clearInterval(interval);
setTimeout(() => {
container.classList.remove('PageTransition001-active');
progress.style.width = '0%';
counter.textContent = '0%';
}, 300);
} else {
width += transitionConfig.stepSize;
if (width > 100) width = 100;
progress.style.width = width + '%';
counter.textContent = width + '%';
}
}, transitionConfig.animationSpeed);
}, 100);
}
function generateJavaScriptCode() {
const rgbColor = hexToRgb(transitionConfig.bgColor);
return `<div class="PageTransition001-container" id="PageTransition001Container">
<div class="PageTransition001-progress-bar">
<div class="PageTransition001-progress" id="PageTransition001Progress"></div>
</div>
<div class="PageTransition001-counter" id="PageTransition001Counter">0%</div>
</div>
<style>
.PageTransition001-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}, ${transitionConfig.bgOpacity});
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 2147483647;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.PageTransition001-container.PageTransition001-active {
opacity: 1;
visibility: visible;
}
.PageTransition001-progress-bar {
width: ${transitionConfig.barWidth}px;
height: ${transitionConfig.barHeight}px;
background-color: rgba(255, 255, 255, 0.2);
border-radius: ${transitionConfig.borderRadius}px;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.PageTransition001-progress {
width: 0;
height: 100%;
background: linear-gradient(90deg, ${transitionConfig.gradientStart}, ${transitionConfig.gradientEnd});
transition: width 0.3s ease;
border-radius: ${transitionConfig.borderRadius}px;
}
.PageTransition001-counter {
font-size: ${transitionConfig.counterSize}px;
color: ${transitionConfig.counterColor};
margin-top: ${transitionConfig.counterMargin}px;
}
</style>
<script>
(function() {
'use strict';
const transitionContainer = document.getElementById('PageTransition001Container');
const progress = document.getElementById('PageTransition001Progress');
const counter = document.getElementById('PageTransition001Counter');
let isTransitioning = false;
function resetTransition() {
transitionContainer.classList.remove('PageTransition001-active');
progress.style.width = '0%';
counter.textContent = '0%';
transitionContainer.style.display = 'none';
isTransitioning = false;
}
window.addEventListener('load', resetTransition);
window.addEventListener('pageshow', resetTransition);
function isInternalLink(url) {
try {
const link = new URL(url, window.location.origin);
return link.origin === window.location.origin;
} catch {
return false;
}
}
async function startNavigationTransition(targetUrl) {
if (isTransitioning) return;
isTransitioning = true;
transitionContainer.style.display = 'flex';
transitionContainer.classList.add('PageTransition001-active');
let width = 0;
const interval = setInterval(() => {
if (width >= 100) {
clearInterval(interval);
setTimeout(() => {
window.location.href = targetUrl;
}, 300);
} else {
width += ${transitionConfig.stepSize};
if (width > 100) width = 100;
progress.style.width = width + '%';
counter.textContent = width + '%';
}
}, ${transitionConfig.animationSpeed});
}
document.addEventListener('click', function(e) {
const link = e.target.closest('a');
if (link && link.href && isInternalLink(link.href) && !link.target) {
e.preventDefault();
startNavigationTransition(link.href);
}
});
const originalPushState = history.pushState;
const originalReplaceState = history.replaceState;
history.pushState = function(state, title, url) {
if (url && isInternalLink(url)) {
startNavigationTransition(url);
} else {
originalPushState.apply(history, arguments);
}
};
history.replaceState = function(state, title, url) {
if (url && isInternalLink(url)) {
startNavigationTransition(url);
} else {
originalReplaceState.apply(history, arguments);
}
};
window.addEventListener('popstate', function(e) {
resetTransition();
});
})();
<\/script>`;
}
function generateFullSectionJSON() {
return "";
}
function copyJsToClipboard() {
const jsCode = generateJavaScriptCode();
navigator.clipboard.writeText(jsCode)
.then(() => {
showNotification('JavaScript code copied to clipboard!');
})
.catch(err => {
try {
const textArea = document.createElement('textarea');
textArea.value = jsCode;
textArea.style.position = 'fixed';
textArea.style.opacity = '0';
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
showNotification('JavaScript code copied to clipboard!');
} catch (fallbackErr) {
showNotification('Failed to copy to clipboard. Please try again.', 'error');
}
});
}
function showNotification(message, type = 'success') {
const notification = document.getElementById('notification');
notification.textContent = message;
notification.className = `notification ${type}`;
notification.offsetHeight;
notification.style.visibility = 'visible';
notification.classList.add('show');
setTimeout(() => {
notification.classList.remove('show');
setTimeout(() => {
if (!notification.classList.contains('show')) {
notification.style.visibility = 'hidden';
}
}, 400);
}, 3000);
}
function generateRandomTransition() {
transitionConfig.barWidth = Math.floor(Math.random() * 300) + 200;
transitionConfig.barHeight = Math.floor(Math.random() * 16) + 4;
transitionConfig.borderRadius = Math.floor(Math.random() * 20);
transitionConfig.animationSpeed = Math.floor(Math.random() * 45) + 5;
transitionConfig.stepSize = Math.floor(Math.random() * 9) + 1;
transitionConfig.counterSize = Math.floor(Math.random() * 18) + 14;
transitionConfig.counterMargin = Math.floor(Math.random() * 25) + 5;
transitionConfig.bgOpacity = Math.round((Math.random() * 0.7 + 0.3) * 100) / 100;
transitionConfig.gradientStart = generateRandomColor();
transitionConfig.gradientEnd = generateRandomColor();
transitionConfig.counterColor = generateRandomColor();
transitionConfig.bgColor = generateRandomColor();
updateAllInputs();
updateConfig();
showNotification('Random transition generated!');
}
function generateRandomColor() {
return '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');
}
function updateAllInputs() {
document.getElementById('bar-width').value = transitionConfig.barWidth;
document.getElementById('bar-height').value = transitionConfig.barHeight;
document.getElementById('border-radius').value = transitionConfig.borderRadius;
document.getElementById('animation-speed').value = transitionConfig.animationSpeed;
document.getElementById('step-size').value = transitionConfig.stepSize;
document.getElementById('counter-size').value = transitionConfig.counterSize;
document.getElementById('counter-margin').value = transitionConfig.counterMargin;
document.getElementById('bg-opacity').value = transitionConfig.bgOpacity;
document.getElementById('bar-width-value').textContent = transitionConfig.barWidth;
document.getElementById('bar-height-value').textContent = transitionConfig.barHeight;
document.getElementById('border-radius-value').textContent = transitionConfig.borderRadius;
document.getElementById('animation-speed-value').textContent = transitionConfig.animationSpeed;
document.getElementById('step-size-value').textContent = transitionConfig.stepSize;
document.getElementById('counter-size-value').textContent = transitionConfig.counterSize;
document.getElementById('counter-margin-value').textContent = transitionConfig.counterMargin;
document.getElementById('bg-opacity-value').textContent = transitionConfig.bgOpacity;
updateColorInputs('bg-color', transitionConfig.bgColor);
updateColorInputs('gradient-start', transitionConfig.gradientStart);
updateColorInputs('gradient-end', transitionConfig.gradientEnd);
updateColorInputs('counter-color', transitionConfig.counterColor);
}
function updateColorInputs(colorId, color) {
const colorInput = document.getElementById(colorId);
const hexInput = document.getElementById(`${colorId}-hex`);
const hslInput = document.getElementById(`${colorId}-hsl`);
if (colorInput && hexInput && hslInput) {
colorInput.value = color;
hexInput.value = color;
hslInput.value = `hsl(${hexToHsl(color).h}, ${hexToHsl(color).s}%, ${hexToHsl(color).l}%)`;
hexInput.classList.remove('invalid');
hslInput.classList.remove('invalid');
const colorPickerContainer = colorInput.closest('.color-row').querySelector('.color-picker-container');
if (colorPickerContainer) {
colorPickerContainer.style.setProperty('--selected-color', color);
}
}
}
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
function hexToHsl(hex) {
const r = parseInt(hex.slice(1, 3), 16) / 255;
const g = parseInt(hex.slice(3, 5), 16) / 255;
const b = parseInt(hex.slice(5, 7), 16) / 255;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
let h, s, l = (max + min) / 2;
if (max === min) {
h = s = 0;
} else {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return {
h: Math.round(h * 360),
s: Math.round(s * 100),
l: Math.round(l * 100)
};
}
function hslToHex(hsl) {
const match = hsl.match(/hsl\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*\)/);
if (!match) return null;
let h = parseInt(match[1]) / 360;
let s = parseInt(match[2]) / 100;
let l = parseInt(match[3]) / 100;
const hue2rgb = (p, q, t) => {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1/6) return p + (q - p) * 6 * t;
if (t < 1/2) return q;
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
};
let r, g, b;
if (s === 0) {
r = g = b = l;
} else {
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
const p = 2 * l - q;
r = hue2rgb(p, q, h + 1/3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1/3);
}
const toHex = (c) => {
const hex = Math.round(c * 255).toString(16);
return hex.length === 1 ? '0' + hex : hex;
};
return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}
function isValidHex(hex) {
return /^#[0-9A-F]{6}$/i.test(hex);
}
function isValidHsl(hsl) {
return /^hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*\)$/i.test(hsl);
}
function formatHex(value) {
let hex = value.replace(/[^0-9A-Fa-f#]/g, '');
if (!hex.startsWith('#')) {
hex = '#' + hex;
}
if (hex.length > 7) {
hex = hex.substring(0, 7);
}
return hex.toUpperCase();
}
function formatHsl(value) {
const cleanValue = value.replace(/[^\d,\s]/g, '');
const numbers = cleanValue.match(/\d+/g);
if (!numbers || numbers.length < 3) {
const partialMatch = value.match(/(\d+)/g);
if (partialMatch && partialMatch.length >= 1) {
const h = Math.min(360, Math.max(0, parseInt(partialMatch[0]) || 0));
const s = Math.min(100, Math.max(0, parseInt(partialMatch[1]) || 50));
const l = Math.min(100, Math.max(0, parseInt(partialMatch[2]) || 50));
return `hsl(${h}, ${s}%, ${l}%)`;
}
return value;
}
let h = Math.min(360, Math.max(0, parseInt(numbers[0])));
let s = Math.min(100, Math.max(0, parseInt(numbers[1])));
let l = Math.min(100, Math.max(0, parseInt(numbers[2])));
return `hsl(${h}, ${s}%, ${l}%)`;
}
window.resetParameter = function(parameterId, defaultValue) {
const element = document.getElementById(parameterId);
if (element) {
element.value = defaultValue;
const valueElement = document.getElementById(`${parameterId}-value`);
if (valueElement) {
valueElement.textContent = defaultValue;
}
switch (parameterId) {
case 'bar-width':
transitionConfig.barWidth = defaultValue;
break;
case 'bar-height':
transitionConfig.barHeight = defaultValue;
break;
case 'border-radius':
transitionConfig.borderRadius = defaultValue;
break;
case 'animation-speed':
transitionConfig.animationSpeed = defaultValue;
break;
case 'step-size':
transitionConfig.stepSize = defaultValue;
break;
case 'counter-size':
transitionConfig.counterSize = defaultValue;
break;
case 'counter-margin':
transitionConfig.counterMargin = defaultValue;
break;
case 'bg-opacity':
transitionConfig.bgOpacity = defaultValue;
break;
}
updateConfig();
showNotification(`${parameterId.replace(/-/g, ' ')} reset to default`);
}
};
function setupColorInputHandlers(colorId, configProperty) {
const colorInput = document.getElementById(colorId);
const hexInput = document.getElementById(`${colorId}-hex`);
const hslInput = document.getElementById(`${colorId}-hsl`);
if (!colorInput || !hexInput || !hslInput) return;
hslInput.value = `hsl(${hexToHsl(colorInput.value).h}, ${hexToHsl(colorInput.value).s}%, ${hexToHsl(colorInput.value).l}%)`;
colorInput.addEventListener('input', () => {
const color = colorInput.value;
hexInput.value = color;
hslInput.value = `hsl(${hexToHsl(color).h}, ${hexToHsl(color).s}%, ${hexToHsl(color).l}%)`;
hexInput.classList.remove('invalid');
hslInput.classList.remove('invalid');
transitionConfig[configProperty] = color;
const colorPickerContainer = colorInput.closest('.color-row').querySelector('.color-picker-container');
colorPickerContainer.style.setProperty('--selected-color', color);
updateConfig();
});
hexInput.addEventListener('input', (e) => {
let hex = e.target.value;
hex = formatHex(hex);
e.target.value = hex;
if (isValidHex(hex)) {
colorInput.value = hex;
hslInput.value = `hsl(${hexToHsl(hex).h}, ${hexToHsl(hex).s}%, ${hexToHsl(hex).l}%)`;
transitionConfig[configProperty] = hex;
e.target.classList.remove('invalid');
hslInput.classList.remove('invalid');
const colorPickerContainer = colorInput.closest('.color-row').querySelector('.color-picker-container');
colorPickerContainer.style.setProperty('--selected-color', hex);
updateConfig();
} else {
e.target.classList.add('invalid');
}
});
hexInput.addEventListener('blur', (e) => {
if (!isValidHex(e.target.value)) {
e.target.value = colorInput.value;
e.target.classList.remove('invalid');
}
});
hslInput.addEventListener('input', (e) => {
let hsl = e.target.value;
if (isValidHsl(hsl)) {
const hex = hslToHex(hsl);
if (hex) {
colorInput.value = hex;
hexInput.value = hex;
transitionConfig[configProperty] = hex;
e.target.classList.remove('invalid');
hexInput.classList.remove('invalid');
const colorPickerContainer = colorInput.closest('.color-row').querySelector('.color-picker-container');
colorPickerContainer.style.setProperty('--selected-color', hex);
updateConfig();
return;
}
}
e.target.classList.add('invalid');
});
hslInput.addEventListener('blur', (e) => {
let hsl = e.target.value;
if (!isValidHsl(hsl) && hsl.trim()) {
const formatted = formatHsl(hsl);
if (isValidHsl(formatted)) {
e.target.value = formatted;
const hex = hslToHex(formatted);
if (hex) {
colorInput.value = hex;
hexInput.value = hex;
transitionConfig[configProperty] = hex;
e.target.classList.remove('invalid');
hexInput.classList.remove('invalid');
updateConfig();
return;
}
}
}
if (!isValidHsl(e.target.value)) {
e.target.value = `hsl(${hexToHsl(colorInput.value).h}, ${hexToHsl(colorInput.value).s}%, ${hexToHsl(colorInput.value).l}%)`;
e.target.classList.remove('invalid');
}
});
}
function saveConfiguration() {
try {
localStorage.setItem('bricksfusion-transition001-config', JSON.stringify(transitionConfig));
} catch (e) {
}
}
function loadConfiguration() {
try {
const saved = localStorage.getItem('bricksfusion-transition001-config');
if (saved) {
const savedConfig = JSON.parse(saved);
Object.assign(transitionConfig, savedConfig);
updateAllInputs();
updateConfig();
}
} catch (e) {
}
}
function initializeUI() {
const instructionsToggle = document.getElementById('instructions-toggle');
const instructionsContent = document.getElementById('instructions-content');
const instructionsCard = document.getElementById('instructions-card');
const toggleIcon = instructionsToggle.querySelector('.toggle-icon');
instructionsToggle.addEventListener('click', () => {
const isVisible = instructionsContent.classList.contains('show');
if (isVisible) {
instructionsContent.classList.remove('show');
instructionsCard.classList.remove('expanded');
toggleIcon.classList.remove('expanded');
} else {
instructionsContent.classList.add('show');
instructionsCard.classList.add('expanded');
toggleIcon.classList.add('expanded');
}
});
document.getElementById('download-config').addEventListener('click', () => {
copyJsToClipboard();
});
document.getElementById('randomize-transition').addEventListener('click', () => {
generateRandomTransition();
});
const backgroundPicker = document.getElementById('preview-background-picker');
const previewContainer = document.getElementById('transition-preview');
backgroundPicker.addEventListener('input', (e) => {
const selectedColor = e.target.value;
previewContainer.style.backgroundColor = selectedColor;
showNotification(`Preview background changed to ${selectedColor}`);
});
previewContainer.style.backgroundColor = '#000000';
previewContainer.addEventListener('click', testTransition);
document.getElementById('reset-progress').addEventListener('click', () => {
transitionConfig.barWidth = defaultConfig.barWidth;
transitionConfig.barHeight = defaultConfig.barHeight;
transitionConfig.borderRadius = defaultConfig.borderRadius;
transitionConfig.animationSpeed = defaultConfig.animationSpeed;
transitionConfig.stepSize = defaultConfig.stepSize;
document.getElementById('bar-width').value = defaultConfig.barWidth;
document.getElementById('bar-height').value = defaultConfig.barHeight;
document.getElementById('border-radius').value = defaultConfig.borderRadius;
document.getElementById('animation-speed').value = defaultConfig.animationSpeed;
document.getElementById('step-size').value = defaultConfig.stepSize;
document.getElementById('bar-width-value').textContent = defaultConfig.barWidth;
document.getElementById('bar-height-value').textContent = defaultConfig.barHeight;
document.getElementById('border-radius-value').textContent = defaultConfig.borderRadius;
document.getElementById('animation-speed-value').textContent = defaultConfig.animationSpeed;
document.getElementById('step-size-value').textContent = defaultConfig.stepSize;
updateConfig();
showNotification('Progress settings reset');
});
document.getElementById('reset-counter').addEventListener('click', () => {
transitionConfig.counterSize = defaultConfig.counterSize;
transitionConfig.counterMargin = defaultConfig.counterMargin;
document.getElementById('counter-size').value = defaultConfig.counterSize;
document.getElementById('counter-margin').value = defaultConfig.counterMargin;
document.getElementById('counter-size-value').textContent = defaultConfig.counterSize;
document.getElementById('counter-margin-value').textContent = defaultConfig.counterMargin;
updateConfig();
showNotification('Counter settings reset');
});
document.getElementById('reset-background').addEventListener('click', () => {
transitionConfig.bgOpacity = defaultConfig.bgOpacity;
transitionConfig.bgColor = defaultConfig.bgColor;
document.getElementById('bg-opacity').value = defaultConfig.bgOpacity;
document.getElementById('bg-opacity-value').textContent = defaultConfig.bgOpacity;
updateColorInputs('bg-color', defaultConfig.bgColor);
updateConfig();
showNotification('Background settings reset');
});
document.getElementById('reset-colors').addEventListener('click', () => {
transitionConfig.gradientStart = defaultConfig.gradientStart;
transitionConfig.gradientEnd = defaultConfig.gradientEnd;
transitionConfig.counterColor = defaultConfig.counterColor;
updateColorInputs('gradient-start', defaultConfig.gradientStart);
updateColorInputs('gradient-end', defaultConfig.gradientEnd);
updateColorInputs('counter-color', defaultConfig.counterColor);
updateConfig();
showNotification('Colors reset to default');
});
const rangeInputs = document.querySelectorAll('input[type="range"]');
rangeInputs.forEach(input => {
const valueElement = document.getElementById(`${input.id}-value`);
if (valueElement) {
valueElement.textContent = input.value;
}
input.addEventListener('input', () => {
if (valueElement) {
valueElement.textContent = input.value;
}
switch (input.id) {
case 'bar-width':
transitionConfig.barWidth = parseInt(input.value);
break;
case 'bar-height':
transitionConfig.barHeight = parseInt(input.value);
break;
case 'border-radius':
transitionConfig.borderRadius = parseInt(input.value);
break;
case 'animation-speed':
transitionConfig.animationSpeed = parseInt(input.value);
break;
case 'step-size':
transitionConfig.stepSize = parseInt(input.value);
break;
case 'counter-size':
transitionConfig.counterSize = parseInt(input.value);
break;
case 'counter-margin':
transitionConfig.counterMargin = parseInt(input.value);
break;
case 'bg-opacity':
transitionConfig.bgOpacity = parseFloat(input.value);
break;
}
updateConfig();
});
});
setupColorInputHandlers('bg-color', 'bgColor');
setupColorInputHandlers('gradient-start', 'gradientStart');
setupColorInputHandlers('gradient-end', 'gradientEnd');
setupColorInputHandlers('counter-color', 'counterColor');
document.addEventListener('keydown', (e) => {
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
return;
}
if (e.ctrlKey || e.metaKey) {
switch (e.key.toLowerCase()) {
case 'd':
e.preventDefault();
const downloadBtn = document.getElementById('download-config');
if (downloadBtn && downloadBtn.hasAttribute('data-protection-animation')) {
downloadBtn.click();
} else {
copyJsToClipboard();
}
break;
}
} else {
switch (e.key.toLowerCase()) {
case 'r':
generateRandomTransition();
break;
case 'b':
document.getElementById('preview-background-picker').click();
break;
}
}
});
loadConfiguration();
initializePreview();
setTimeout(() => {
showNotification('BricksFusion Transition 001 Configurator loaded!');
}, 500);
}
initializeUI();
});
</script>
</body>
</html>LIGHT
Transition 001
Animated loading bar transition with gradient progress and counter. Create smooth page transitions with a customizable progress indicator that keeps users engaged during navigation. Configure colors, timing, and visual style directly in Bricks Builder. Perfect for adding professional polish to your site's navigation experience.
Loading Transition
Click anywhere to preview the transition effect.
Animation
Duration
Number (milliseconds)
Total animation duration in milliseconds. Lower creates faster transitions. Higher produces slower, more relaxed animations. Recommended range: 400-800ms for optimal user experience.
Default: 600ms (Range: 100-3000ms)
Easing
Dropdown choice
Animation timing function that controls the speed curve. Linear provides constant speed. Ease In starts slow and accelerates. Ease Out starts fast and decelerates. Ease In Out combines both for natural motion.
Default: Ease Out (Options: Linear, Ease In, Ease Out, Ease In Out)
Show on Initial Load
Toggle (checkbox)
Display transition animation when page first loads. Not recommended as it can interfere with initial page rendering and user experience. Best used only for navigation between pages.
Default: Off (false)
Progress Bar
Bar Width
Percentage
Width of the progress bar relative to screen size. Lower creates compact, subtle indicators. Higher produces prominent, screen-spanning bars. Automatically adapts to screen width for responsive design.
Default: 80% (Range: 50-100%)
Bar Height
Pixels
Thickness of the progress bar. Smaller creates delicate, minimal indicators. Larger produces bold, prominent bars. Consider visibility and design aesthetic when choosing size.
Default: 6px (Range: 2-20px)
Border Radius
Pixels
Roundness of the progress bar corners. Zero creates sharp, rectangular bars. Higher values produce smooth, rounded edges. Maximum value creates fully circular ends.
Default: 50px (Range: 0-50px)
Counter
Counter Size
Pixels
Font size of the percentage counter text displayed above progress bar. Smaller creates subtle, unobtrusive counters. Larger produces prominent, attention-grabbing text. Balance with overall design scale.
Default: 48px (Range: 14-100px)
Counter Margin
Pixels
Space between the percentage counter and progress bar. Lower creates tight, compact layouts. Higher produces airy, spacious arrangements. Adjust for visual hierarchy and breathing room.
Default: 20px (Range: 5-50px)
Background
Background Opacity
Decimal (0-1)
Transparency of the overlay background during transition. Lower allows more content visibility underneath. Higher creates more dramatic, focused transitions that block previous content completely. Balance between continuity and focus.
Default: 0.95 (Range: 0-1, where 0 is transparent and 1 is opaque)
Background Color
Color picker
Color of the full-screen overlay that appears during transition. Choose colors that match your brand or provide proper contrast for the progress bar and counter. Dark colors are common for professional appearance.
Default: Black (#000000)
Colors
Gradient Start
Color picker
Starting color of the progress bar gradient. Creates left side of the gradient effect. Combine with Gradient End to create smooth color transitions that add visual interest and brand identity.
Default: Light Green (#b4ff99)
Gradient End
Color picker
Ending color of the progress bar gradient. Creates right side of the gradient effect. Works with Gradient Start to produce smooth color blends. Choose complementary colors for harmonious appearance.
Default: Medium Green (#7ed957)
Counter Color
Color picker
Text color of the percentage counter. Ensure sufficient contrast with background color for readability. White or light colors work well on dark backgrounds. Consider accessibility guidelines.
Default: White (#ffffff)
Performance & Usage
This transition uses CSS transforms and opacity for smooth GPU-accelerated animations. Automatically intercepts all internal link clicks to provide consistent navigation experience. Includes easing functions for natural motion. Very lightweight with minimal performance impact. Add to header or footer template to enable site-wide. Only one transition element needed per site. Respects reduced motion preferences automatically.
0%