Welcome Guest ! Please   Login or Register


Check out our latest Premium Themes, Majestic , Majestic - Dark and Musk Themes for MyBB 1.8 Click to Shop Now

Now open for Custom Theme requests : Click to Order Now





 
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Making a simple css3 progress bar with inline text and infinite scroll

envira Offline
Doctor Web
*******

Posts: 1,245
Joined: Aug 2012
Likes Received : 303

Facebook Google Plus Twitter
Nationality: India

Mood: Lazy

Points: 63,357.44Points
Post: #1
Smile Making a simple css3 progress bar with inline text and infinite scroll

Hello,
Its been long since i made a tutorial, and here is one for you guys.
The tut is about css3 progress bars with inline text.

First lets build the css part :

Code:
.slider-wrap {
background: #FFF;
padding: 3px;
border-radius: 3px;
-moz-box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0px 1px 5px rgba(194, 194, 194, 0.2);
}

.slider {
-webkit-user-select: none;
background-color: #FFD600;
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, rgba(0, 0, 0, 0)), color-stop(.5, rgba(0, 0, 0, 0)), color-stop(.5, rgba(255, 255, 255, .15)), color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
background-image: linear-gradient(135deg, rgba(146, 146, 146, .15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(146, 146, 146, .15) 50%, rgba(146, 146, 146, .15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
-webkit-animation: animate-stripes 3s linear infinite;
-moz-animation: animate-stripes 3s linear infinite;
border-radius: 4px;
-webkit-background-size: 30px 30px;
-moz-background-size: 30px 30px;
background-size: 30px 30px;
}

.slider {
overflow: hidden;
white-space: nowrap;
text-align: center;
border-right: 1px solid #EBEBEB;
padding: 10px 0px;
-webkit-animation: slideit 1.5s;
-moz-animation: slideit 1.5s;
}

@-webkit-keyframes slideit {
        0% { width: 0; }
}

@-moz-keyframes slideit {
        0% { width: 0; }
}

Now into the Html :

Code:
<div class="slider-wrap">
<div class="slider" style="width: 50%;">Inline Text</div>
</div>


You will have your super simple css3 based progress bar ready with the few lines of code.

demo : link

Hope this helps , regards

[Image: lt79ucY.png]
(This post was last modified: 06-21-2013 10:41 AM by envira.)
06-21-2013 10:25 AM
Find
1
Quote




LeakBoard Offline
Junior Member
**

Posts: 28
Joined: Oct 2013
Likes Received : 1

Nationality:

Mood: Addicted

Points: 597.11Points
Post: #2
RE: Making a simple css3 progress bar with inline text and infinite scroll

Nice tutorial envira!Thanks.

[Image: y7rjTGP.png]
12-08-2013 10:12 PM
Find
0
Quote





Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  How To Scroll To Top Smoothly In MyBB? Silver Knight 11 5,904 10-04-2014 05:20 PM
Last Post: Diyar Baban

Forum Jump:


User(s) browsing this thread: 1 Guest(s)

About Myskins

MySkins Studio is MyBB Themes Resource Website.

At MySkins Studio, We procreate MyBB Themes both custom MyBB Themes and premium Mybb Themes.We believe in quality and assure you the best MyBB themes at a very reasonable price , that suits your taste.

Feel free to drop in a request and get a quote.