see code

Loading Bar

A loading bar in two different sizes. Use the .loading class Add the .tall class for the larger size. For the candy cane styling, use .img-ld class instead of the .ld class on the inner element.

HTML

<button type="button" class="cc-btn cc-default mr-2" onclick="load(event)">LOAD</button>
<div class="loading">
    <div class="ld"></div>
</div>

<button type="button" class="cc-btn cc-default mr-2" onclick="load(event)">LOAD</button> <div class="loading tall"> <div class="img-ld"></div> </div>
see code

Text Field

A simple, minimalistic text field with a smooth focus animation and themed highlights. Use an <input> tag with the .cc-text class and wrap it in a div using the .cc-form-group class. Be sure to use a <label> tag with the .cc-text-border class to get the colored and animated line.

HTML

<div class="cc-form-group">
    <input name="name-input"
           type="text"
           class="cc-text"
           placeholder="Enter your name"
           spellcheck="false">
    <label class="cc-text-border" for="name-input"></label>
</div>

Parallax

see code

A parallax scroll effect that supports up to eight image layers.

Toast

see code

A simple way to pop a temporary alert to the user. If firing from a button, set the data-target attribute to the ID of the div with the .cc-toast class.

HTML

<div class="cc-toast toast-top blue" id="toastTop">
    I'm a toast on the top!
</div>
<div class="cc-toast toast-right blue" id="toastRight">
    I'm a toast on the right!
</div>
<div class="cc-toast toast-bottom blue" id="toastBottom">
    I'm a toast on the bottom!
</div>
<div class="cc-toast toast-left blue" id="toastLeft">
    I'm a toast on the left!
</div>

Carousel

Coming Soon

Collapsible

see code

An expandable and collapsible container that can also be used as list item if the collection is wrapped in a div using the .cc-collapse-stack class.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

HTML

<div class="cc-collapse-stack">
<button class="collapse-hdr" data-toggle="collapse" data-target="#collapseItem1">
    <i class="fas fa-plus mr-05"></i>
    Click to Expand
</button>
<div id="collapseItem1" class="cc-collapse">
    <div class="collapse-body dark">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam.
        </p>
    </div>
</div>

<button class="collapse-hdr" data-toggle="collapse" data-target="#collapseItem2">
    <i class="fas fa-plus mr-05"></i>
    Click to Expand
</button>
<div class="cc-collapse" id="collapseItem2">
    <div class="collapse-body dark">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam.
        </p>
    </div>
</div>

Shake

Modal

Modal

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

I'm a toast on the top!
I'm a toast on the right!
I'm a toast on the bottom!
I'm a toast on the left!