css animation bicycle preloader | HTML CSS

codinglabsolution

            

css animation bicycle preloader | HTML CSS




css animation  bicycle preloader |  HTML CSS











**Introduction: css animation bicycle preloader | HTML CSS**

In the realm of web design and user experience, captivating preloader animations have become an integral element to engage visitors during the brief moments before a webpage fully loads. One such creative and visually appealing preloader is the "Bicycle Preloader." This animated design mimics the movement of a bicycle, featuring rotating wheels and a connecting frame. Through a harmonious blend of HTML and CSS, this preloader not only serves its functional purpose but also adds a touch of dynamism and charm to the loading process. In this introduction, we delve into the intricacies of the Bicycle Preloader, exploring how it is crafted to enhance the overall user experience and contribute to the aesthetics of web development.


ScreenShots

css animation  bicycle preloader |  HTML CSS







Source Code

start, add the following HTML codes to your index.html file. 

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title> Bicycle Preloader</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><link rel="stylesheet" href="./style.css">

</head>
<body>

<svg class="bike" viewBox="0 0 48 30" width="48px" height="30px">
    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1">
        <g transform="translate(9.5,19)">
            <circle class="bike__tire" r="9" stroke-dasharray="56.549 56.549" />
            <g class="bike__spokes-spin" stroke-dasharray="31.416 31.416" stroke-dashoffset="-23.562">
                <circle class="bike__spokes" r="5" />
                <circle class="bike__spokes" r="5" transform="rotate(180,0,0)" />
            </g>
        </g>
        <g transform="translate(24,19)">
            <g class="bike__pedals-spin" stroke-dasharray="25.133 25.133" stroke-dashoffset="-21.991" transform="rotate(67.5,0,0)">
                <circle class="bike__pedals" r="4" />
                <circle class="bike__pedals" r="4" transform="rotate(180,0,0)" />
            </g>
        </g>
        <g transform="translate(38.5,19)">
            <circle class="bike__tire" r="9" stroke-dasharray="56.549 56.549" />
            <g class="bike__spokes-spin" stroke-dasharray="31.416 31.416" stroke-dashoffset="-23.562">
                <circle class="bike__spokes" r="5" />
                <circle class="bike__spokes" r="5" transform="rotate(180,0,0)" />
            </g>
        </g>
        <polyline class="bike__seat" points="14 3,18 3" stroke-dasharray="5 5" />
        <polyline class="bike__body" points="16 3,24 19,9.5 19,18 8,34 7,24 19" stroke-dasharray="79 79" />
        <path class="bike__handlebars" d="m30,2h6s1,0,1,1-1,1-1,1" stroke-dasharray="10 10" />
        <polyline class="bike__front" points="32.5 2,38.5 19" stroke-dasharray="19 19" />
    </g>
</svg>
</body>
</html>





































Next, add the following CSS codes to your style.css 

* {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
:root {
    --hue: 223;
    --bg: hsl(var(--hue),90%,90%);
    --fg: hsl(var(--hue),90%,10%);
    --primary: hsl(var(--hue),90%,50%);
    --trans-dur: 0.3s;
    font-size: calc(16px + (32 - 16) * (100vw - 320px) / (2560 - 320));
}
body {
    background-color: var(--bg);
    color: var(--fg);
    display: flex;
    font: 1em/1.5 sans-serif;
    height: 100vh;
    transition:
        background-color var(--trans-dur),
        color var(--trans-dur);
}
.bike {
    display: block;
    margin: auto;
    width: 16em;
    height: auto;
}
.bike__body,
.bike__front,
.bike__handlebars,
.bike__pedals,
.bike__pedals-spin,
.bike__seat,
.bike__spokes,
.bike__spokes-spin,
.bike__tire {
    animation: bikeBody 3s ease-in-out infinite;
    stroke: var(--primary);
    transition: stroke var(--trans-dur);
}
.bike__front {
    animation-name: bikeFront;
}
.bike__handlebars {
    animation-name: bikeHandlebars;
}
.bike__pedals {
    animation-name: bikePedals;
}
.bike__pedals-spin {
    animation-name: bikePedalsSpin;
}
.bike__seat {
    animation-name: bikeSeat;
}
.bike__spokes,
.bike__tire {
    stroke: currentColor;
}
.bike__spokes {
    animation-name: bikeSpokes;
}
.bike__spokes-spin {
    animation-name: bikeSpokesSpin;
}
.bike__tire {
    animation-name: bikeTire;
}



/* Animations */
@keyframes bikeBody {
    from { stroke-dashoffset: 79; }
    33%,
    67% { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -79; }
}
@keyframes bikeFront {
    from { stroke-dashoffset: 19; }
    33%,
    67% { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -19; }
}
@keyframes bikeHandlebars {
    from { stroke-dashoffset: 10; }
    33%,
    67% { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -10; }
}
@keyframes bikePedals {
    from {
        animation-timing-function: ease-in;
        stroke-dashoffset: -25.133;
    }
    33%,
    67% {
        animation-timing-function: ease-out;
        stroke-dashoffset: -21.991;
    }
    to {
        stroke-dashoffset: -25.133;
    }
}
@keyframes bikePedalsSpin {
    from { transform: rotate(0.1875turn); }
    to { transform: rotate(3.1875turn); }
}
@keyframes bikeSeat {
    from { stroke-dashoffset: 5; }
    33%,
    67% { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -5; }
}
@keyframes bikeSpokes {
    from {
        animation-timing-function: ease-in;
        stroke-dashoffset: -31.416;
    }
    33%,
    67% {
        animation-timing-function: ease-out;
        stroke-dashoffset: -23.562;
    }
    to {
        stroke-dashoffset: -31.416;
    }
}
@keyframes bikeSpokesSpin {
    from { transform: rotate(0); }
    to { transform: rotate(3turn); }
}
@keyframes bikeTire {
    from {
        animation-timing-function: ease-in;
        stroke-dashoffset: 56.549;
        transform: rotate(0);
    }
    33% {
        stroke-dashoffset: 0;
        transform: rotate(0.33turn);
    }
    67% {
        animation-timing-function: ease-out;
        stroke-dashoffset: 0;
        transform: rotate(0.67turn);
    }
    to {
        stroke-dashoffset: -56.549;
        transform: rotate(1turn);
    }
}






























































































































































































































إرسال تعليق

ملفات تعريف الارتباط
نستخدم ملفات تعريف الارتباط (Cookies) لفهم كيفية استخدامك لموقعنا وتحسين تجربتك في المحتوى والإعلانات. باستمرارك في تصفح الموقع، فإنك توافق على استخدامنا لملفات تعريف الارتباط وفقًا لسياسة الخصوصية لدينا.
أُووبس!
يبدو أن هناك خطأ ما في اتصالك بالإنترنت. يرجى الاتصال بالإنترنت وبدء التصفح مرة أخرى.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.