Custom Angular Flyout

While working recently on a project I came across an issue where I had a finite amount of space and a bunch of actions that would be visible or hidden based on its current state.  I put some time into thinking how I could fit everything I needed and I thought that +90% of the time the user won't be performing any actions beyond just viewing the data so I started thinking about how to minify the amount of space my buttons took up.  I first thought about using icons, but unless they are so universal, it is typically better to just go with text.  So I thought about a button that has a popup menu.  I'm not sure if flyout is the technical term for it, but that sounded right to me so that is what I went with.  One of the benefits of this approach was if I needed to add more buttons down the road I know it won't cause any issues.  Likewise I will always know exactly how much real estate it will take up.

You could have infinite benders take up a finite space!

I knew that I wanted my angular directive to have a couple of things.  First I wanted the flyout to be driven by the developer so it can be reused over and over.  This can be easily solved with an ng-transclude directive.  Secondly, I wanted to make sure that it was smart enough to figure out where it was positioned in the window and dynamically display based on its position in the window.

The HTML for the flyout should be pretty straight forward.  An outer container, .flyoutContainer,  for the control, a container for the flyout, .flyout, and a div for the text/button to expand the flyout, .expanderContainer.  The .flyoutContainer has a couple events on it, blur and click, to figure out when to display the .flyout, and a ng-class directive to help with any styles you want to apply as well.  Here is the HTML result:

 
<div class='flyoutContainer' tabindex='0'  ng-click='click();' 
   ng-blur='lostFocus();' ng-class='{"expanded": options.isExpanded}'>
     <div class='expanderContainer' >
       {{options.display || 'Expand'}}
     </div>
     <div class='flyout'  ng-transclude ></div>
</div>

Next is the bare bones CSS to handle what we need.  We want the .flyout to be absolutely positioned, to start off hidden, and to go on top of other elements.  When the .expanded class is applied we will then want to change the visibility so the .flyout and its contents will be displayed.  The .flyoutContainer styles are pretty simple.  Change the positioning to relative so the absolutely positioned .flyout will be relative to it, and remove any outlining (unless you are into that kind of thing).  For the .expanderContainer I just added css to change the pointer to a cursor to make it explicit that it is clickable.  Here is the css:

    
.flyoutContainer{
    outline:none;
    position: relative;
}

.expanderContainer{
    cursor:pointer;
}

.flyout{
    position:absolute;
    top:auto;
    left:auto;
    z-index:1;
    visibility:hidden;
}

.expanded .flyout{
    visibility:visible;
}

Finally we come to the JS code to put it all together.  The easy part of the code is to just set the options.isExpanded appropriately based on the current state and event.  This will drive the CSS above.  The more difficult part of the code is making sure that the positioning of the .flyout is set appropriately based on where it is located in the window.  For this we pass in the $window parameter to the directive to get the window height and width.  We use the $window param instead of the window global element to make life easier for unit testing.  We can then compare those values with the getBoudingClientRect values of the .flyout to determine how much you need to update the top and left properties of it.  Here is the resulting JS:

function link(scope, element){
    scope.lostFocus = function lostFocus(){
        scope.options.isExpanded = false;
        clearFlyoutPosition();
    };

    scope.click = function click(){
        updateFlyoutPosition();
        scope.options.isExpanded = !scope.options.isExpanded;

        if (!scope.options.isExpanded){
            clearFlyoutPosition();
        }
    };
       
    function clearFlyoutPosition(){
        var $flyoutElement = angular.element
            element[0].querySelector('.flyout'));
        $flyoutElement.css('top', 'auto');
        $flyoutElement.css('left', 'auto');
    }

    function updateFlyoutPosition(){
        var flyoutElement = element[0].querySelector('.flyout'),
            $flyoutElement = angular.element(flyoutElement);

        if ($window.innerHeight < 
            flyoutElement.getBoundingClientRect().bottom){
            $flyoutElement.css('top', '-' +
                (flyoutElement.getBoundingClientRect().height ) + "px");
        }
        else{
            // set the top to the flyout container so it starts right at the bottom.
            $flyoutElement.css('top','auto');
        }

        if ($window.innerWidth < 
            flyoutElement.getBoundingClientRect().right){
            $flyoutElement.css('left', "-" +
                (flyoutElement.getBoundingClientRect().right -
              $window.innerWidth + 10) + "px");

        }
        else{
            $flyoutElement.css('left', 'auto');
        }

    }

}

Here is the end result with one flyout in the top left and one in the bottom right!

Create Your Own Angular Confirm Dialog

Modal dialogs have always been kind of iffy to use in regards to UX.  This goes 1000000x for web dialogs.  While most browsers somewhat support showModalDialog, it definitely isn't recommended to use for a lot of reasons.    I do believe that dialogs like other maligned things still have their place if used properly.

Loud Noises!

The type of dialogs I am referring to on the web are typically not traditional dialogs, but a transparent div of height/width of 100%.  You can find these types of dialogs all over the internet for all kinds of various things.  Even as I create this blog post blogger had a custom dialog to insert an image, and a hyperlink.

Blogception

So I wanted to create something that I could reuse and style easily as well as incorporate in my work.  An angular directive seemed like the right approach for this.  I ended up creating a simple confirm dialog that you could set the text for the title, detail, and buttons, as well as the confirm and cancel button callbacks.  

The first thing I started out with was the HTML for the dialog.  It should be pretty straightforward,  one container to take the entire page, one div that is centered in the middle of the page and is the height and width of whatever we desire it to be, the title, the detail, and the buttons.  Here is what that looks like: 

      
    <div class='confirm' ng-hide='!showPrompt'> 
        <div class='confirmContainer'>
            <div class='confirm-title'>{{confirmTitle}}</div> 
            <div class='confirm-detail'>{{detailText}}</div> 
            <div class='confirm-actions'>
                <button class='ok' btn' ng-click='ok()'>{{okText || 'OK'}}</button>
                <button class='cancel btn' ng-click='cancel()'>{{cancelText || 'Cancel'}}</button> 
            </div> 
      </div>
</div>

Next lets add some basic CSS for this dialog to center everything, and set the height/width appropriately.  We want the dialog to take the entire height & width of the page with a transparent background.  To center the container vertically we put the top at 50% and then set a negative margin top to move it back up.  We then put the buttons container to the bottom right of the confirmContainer.   

      
.confirm{
    height:100%;
    width:100%;
    position: fixed;
    top:0;
    opacity: 1;
    left:0;
    background-color: rgba(3, 3, 3, .25);
    z-index: 1000;
}

.confirm .confirmContainer{
    position: relative;
    top:50%;
    width:50%;
    margin: 0 auto;
    height:200px;
    margin-top: -50px;
    background-color: rgba(255, 255, 255, 1);
}

.confirm .confirm-actions{
    position: absolute;
    bottom:10px;
    right:10px;
}

Finally lets get to the directive code.  We are going to use an isolated scope to bind whatever properties we want as well as the 2 functions we want to call.  We will also bind a showDialog property on the scope that will show the dialog when it is set to true.  When we want it to hide we will then set it back to false in our button code.  Pretty easy.  Here is the whole directive:

 
.directive('confirm', function(){
    var template ="<div class="confirm" ng-hide="!showPrompt">
" + 
        "<br />
<div class="confirmContainer">
" + 
            "<br />
<div class="confirm-title">
{{confirmTitle}}</div>
" + 
            "<br />
<div class="confirm-detail">
{{detailText}}</div>
" + 
            "<br />
<div class="confirm-actions">
"+
                "<button btn="" class="ok" ng-click="ok()">{{okText || 'OK'}}</button>"+
                "<button class="cancel btn" ng-click="cancel()">{{cancelText || 'Cancel'}}</button>" + 
            "</div>
" + 
        "</div>
</div>
";
    
    function link(scope){
        scope.cancel = function cancelFunc(){
            scope.showPrompt = false;
            scope.cancelFunction();
        };
        
        scope.ok = function okFunc(){
            scope.showPrompt = false;
            scope.okFunction();
        };
    }
    
    
    return {
        template: template,
        link:link,
        scope:{
            confirmTitle: '=',
            detailText: '=',
            cancelText: '=',
            okText: '=',
            okFunction: '&',
            cancelFunction: '&',
            showPrompt: '='
        },
        restrict : "E"
    };
});

Now the dialogs in action:

Some next steps for this would be to create an even more generic dialog using ng-transclude so you can have your own picture upload dialog.  Likewise, another way I thought of using this confirm dialog was to use this in conjunction with a dialog service that had access to the rootScope.  That way you could have 1 dialog in your root page and have your service open/close that one as necessary.  

Custom Dropdown With Angular.

The more I get into front-end development the more I end up disliking standard HTML inputs.  I dislike them for different reasons, but my biggest issue has been the inability to style them how I need them to.  This goes especially double for new HTML 5 elements that you pretty much have to jump through hoops to get any kind of custom styling.  I already took on restyling a checkbox since it doesn't really work well for my fat fingers.  Now I am going to take on the select tag.

What styling a select feels like.

I don't really dislike the select tag.  Overall it is pretty simple and you can style most of it.  However. if you end up deciding to style it with colors of any type, then you will hate it.  You will hate it because you can't change the hover color when it is expanded.  You will hate it because you can't change the arrow/box at the end that indicates it is a drop down.  You will hate it even more because not only can these styles not be modified, but they are different per browser/OS combo.

So after googling a bit, I didn't find anything I completely liked, so I decided I would handle it myself.  I decided that since I would be using it for angular development that I would make it a directive and have it function as a select element, that can be customized.

Here is the end result.

Creating A Resortable Drag & Drop List With Angular JS.

I recently ran into a requirement that required a user to be able to resort a given list elements via drag and drop.  As soon as I heard about the requirement I shuddered a bit.  I had the vague memory of trying drag and drop once and it not being as intuitive as it should have been.

I started with a quick Google search to see what was out there and while there were some good starting points, there wasn't anything that was exactly what I wanted.  Pretty much all the examples I found were dragging from area A to area B like this.  Nothing showed resorting in the same list like I had hoped.  What was even a bit more dismaying was when I searched specifically for angular.js implementations of drag and drop I found that it didn't even come with directives for those events.  There were some directives that others implemented for drag and drop, but I decided I should figure it out for myself instead of trying to fiddle with other people's code.

So to get started I decided to break my angular code into 3 directives.  One for making an element, draggable, one for making an element droppable, and one for making the entire list sortable.

Three sir.

Draggable directive.

To make something draggable we want to create a directive that can be applied to any element that we want to make draggable.  So I restricted the directive to "A" for attribute, and added a link function that attached event handlers to the dragstart and dragend events.  In the dragstart event I needed to do a couple of things.  First set the data that is going to be transferred (this could be anything but I set mine to an attribute on the element ), tell the browser what type of transfer is happening, and finally I want to add a class to the element I'm dragging so I can style the element more appropriately.  In the dragend event handler I just want to remove said class.

The end result ends up looking like this:

directive('draggable', function(){
    return {
        restrict: 'A',
        link: function (scope, element, attributes) {
            var el = element[0];
            el.draggable = true;
            
            el.addEventListener('dragstart', handleDragStart, false);
            el.addEventListener('dragend', handleDragEnd, false);
            function handleDragStart(e){
              this.classList.add('dragging');
              
              e.dataTransfer.effectAllowed = 'move';
              e.dataTransfer.setData('data', attributes.dragData);                
                
            }
            
            function handleDragEnd(e) {
              // this/e.target is the source node.
              this.classList.remove('dragging');
            
                           
            }
        }
    }
})

What is important to note here is whatever effectAllowed property you set, will dictate certain styles like the mouse cursor, and it limits where it can be dragged to other elements that have that same effect allowed.

Likewise, for the setData attribute, you can name that whatever you like.  It is a message for you to handle later.  So if you actually have multiple sets of data to drag and drop, you can limit what accepts it by having different "types".

Droppable directive.

The droppable directive is going to be similar.  Once again I am going to limit it to be an attribute on the element and to mostly adding events to the element.  The first events that I am going to handle are dragenter and dragleave.  All I am going to end up doing with these events is adding and removing a class to the element we are dragging over so we can add an additional style to it.  Next I am going to handle the dragover event where I am going to set the dropEffect of the element to match what is in the effectAllowed above.  Finally I am going to handle the drop event in which I will grab the data specified in the draggable directive above, and call a function on the scope.

Here is what it looks like:

.directive('droppable', function(){
    return {
        restrict:"A",
        link: function(scope, element, attributes) {
            var el = element[0];
            el.addEventListener('dragenter', handleDragEnter, false);
            el.addEventListener('dragover', handleDragOver, false);
            el.addEventListener('dragleave', handleDragLeave, false);
            el.addEventListener('drop', handleDrop, false);
            
            function handleDragOver(e) {
              if (e.preventDefault) {
                e.preventDefault(); // Necessary. Allows us to drop.
              }
              e.dataTransfer.dropEffect = 'move';  
            
              return false;
            }
            
            function handleDragEnter(e) {
                // this / e.target is the current hover target.
                this.classList.add('dragover');
            }
            function handleDrop(e){
                // Stops some browsers from redirecting.
                if (e.stopPropagation) e.stopPropagation();
                var data =e.dataTransfer.getData('data');
                
                if ('function' == typeof scope.ondrop) {      
                    scope.ondrop(data, attributes.dropData , e);
                }
                this.classList.remove('dragover');  
            }
            function handleDragLeave(e) {
                if (e.preventDefault) e.preventDefault();
                this.classList.remove('dragover');  
               
            }
        }
    };
})

Reorder Directive

The reorder directive is tied to an Array object and attaches the draggable and droppable directives onto each element in the array.  I decided to make the reorder directive based on an element ("E") and enabled transclude on it allow you to style each list element yourself.  The rest of the directive creates 1 <li> element for each object in the array and implements the drop handler needed in the draggable directive.  In the drop handler I had to add an $apply call to notify the UI that changes had been made to the array and that it should be updated.

Here is the directive:

directive('reorder', function () {
    return {
        restrict: 'E',
        transclude: true, 
        scope: {
            list: '='
        },
        template: '

',
        link: function (scope, element) {
            scope.ondrop = function resort(dragIndex, dropIndex, event){
                if (dragIndex == dropIndex){
                    return;
                }
                scope.$apply(function(){
                    dragIndex = Number(dragIndex);
                    // grab element to move
                    var elementToMove = scope.list[dragIndex];
                    // remove the element
                    scope.list.splice(dragIndex, 1);
                    // insert the element
                    scope.list.splice(Number(dropIndex), 0, elementToMove);
                });                
            };
        }
    };
});

Here is the end result:
Cheers!

Restyling the checkbox.

When you start to work on webpages that need to function well in other devices, you start to learn that certain native HTML elements aren't really made for touch.  When using a mouse, you can be pretty precise with your mouse movements and your clicking.  However, when you attempt to touch something, smaller elements will cause the user to miss often.  There are some good articles on the interwebs on the recommended size of elements that will require touch, including some guidelines from Microsoft.  One of the elements that I have been getting frustrated with recently is the check box.  My fingers had a rough time clicking them on a tablet device.

This episode is almost 20 years old.

So I decided to come up with something that would be easier for a user with a touch interface to use, but still act as a check box.  Like most of my element redesign, I wanted to avoid using any JavaScript and rely on solely on CSS.  Taking a look around the web and other places I decided to settle on an on/off switch looking element.

The first thing we want to define is the button HTML.  First we define a container element for the class.  We are going to use this element as the container and anchor for everything inside it.  Next, we add a checkbox (because we still want to use the functionality of the checkbox for binding, form submitting, etc.  I then added a "background" element that would span the entire width and change based on the input being checked or unchecked (I'll get to this more later).  Lastly, we add a few elements to give it the "switch" feel.  That is a label for "On", "Off", and label that is going to act as the "slider" for the switch.  Our HTML is going to look like this:

<span class='toggleContainer'>
        
    <input class='toggleInput' type='checkbox' id='chk'></input>
    <span class='background'></span>
    <label class='slider' for='chk'></label>
    <label class='on' for='chk'>On</label>
    <label class='off' for='chk'>Off</label>

</span>

So you might think it is odd that I am using labels for these elements, especially for the "slider".  The reason that I do this, has to do with the "for" property of the label.  By clicking on the label, it will click the element for you.*

So now that we have our structure designed we need to style everything to turn it into a toggle button.  First we will style the container.  We are going to use this to determine the size of everything.  So we need to set the position it to be relative to give us an anchor for all the child elements, set overflow to hidden so nothing flows out of  the container, and finally just set a nice border.

.toggleContainer{
    border: 1px solid white;
    border-radius:6px;
    display:inline-block;
    width:50px;
    height:20px;
    position: relative; 
    overflow:hidden;
}

Next, lets style the check box.  We really just want to make it invisible, and not effect the rest of the HTML.

.toggleInput{
    position: absolute;
    opacity: 0;
}

Now we want to style the on, off, slider, and background.  I include these all together because they all need two styles each.  One for checked and one for unchecked.  So let's start with the first state which is unchecked.  For the background we are going to set it as the entire width and height of the container (including the border radius), and set the background-color for when the we are unchecked which I will set to red.  I am going to also set the transition of the background color which will give a smoother transition feel.

.toggleContainer .background {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    background-color: red;
    opacity: 0.2;
    -moz-transition: background-color .3s;
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
}

The slider will be defaulted to the left side of the toggle, with the on element hidden off the left, and the off displayed to the right of the slider.  Instead of just hiding the elements, I want to make it look smoother by moving objects to the left and right.  So I added a transition to the elements below.

.toggleContainer .toggleInput ~ .slider {
    position: absolute;
    width: 45%;
    height: 100%;
    content: "";
    background-color: white;
    border-radius: 6px;
    display: inline-block;
    z-index: 1;
    left: 0;
    -moz-transition: left 0.3s;
    -webkit-transition: left 0.3s;
    transition: left 0.3s;
}

.toggleContainer .toggleInput ~ .off, .toggleContainer .toggleInput ~ .on {
    width: 50%;
    position: relative;
    z-index: 10;
    display: inline-block;
    overflow: hidden;
    height: 100%;
    top: 50%;
    margin-top: -8px;
}

.toggleContainer .toggleInput ~ .on {
    left: -50%;
    float: left;
    -moz-transition: left 0.3s;
    -webkit-transition: left 0.3s;
    transition: left 0.3s;
    color: green;
}

.toggleContainer .toggleInput ~ .off {
    right: 0;
    -moz-transition: right 0.3s;
    -webkit-transition: right 0.3s;
    transition: right 0.3s;
    float: right;
    color: red;
}

Now that we have a default style, we need to add styles for when the element is checked.  To do this we can use the :checked css selector and apply the styles that we want to change.  Mostly we want to move everything to the right which gives the appearance of a switch being moved.  The only exception is the background which we will change from red to green.

.toggleContainer .toggleInput:checked ~ .background {
    background-color: green;
    -moz-transition: background-color 0.3s;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
}

.toggleContainer .toggleInput:checked ~ .slider {
    left: 55%;
    -moz-transition: left 0.3s;
    -webkit-transition: left 0.3s;
    transition: left 0.3s;
}

.toggleContainer .toggleInput:checked ~ .on {
    left: 5px;
    -moz-transition: left 0.3s;
    -webkit-transition: left 0.3s;
    transition: left 0.3s;
}
.toggleContainer .toggleInput:checked ~ .off {
    right: -50%;
    -moz-transition: right 0.3s;
    -webkit-transition: right 0.3s;
    transition: right 0.3s;
}

Here is the end result:
I think the best way to use this would be to create a widget, directive, or whatever your JS framework supports. With a little bit of extra JS you can add some additional classes such as a class to the entire module and style the entire element differently.

*If you are putting this on the web, you should really think about accessibility.  Having those extra labels for one input might confuse some screen readers, and by extension your users.  A couple of extra click handlers for the labels won't kill anyone. 

Using Iconic Fonts

One of the new things I've started incorporating in my development is the use of iconic fonts.

No No No!

I'm talking about fonts that have icons in their character set like font awesome, batch icons, ico moon, and many many more.

So why would you use a font with icons in them instead of just images?  Well there are a lot of really good reasons, that other blogs talk about, really well so I will summarize my thoughts and what I have learned.

1. Really easy to use.
2. You can style them like you would a normal font (color size etc.)
3. You load them 1x.
4. Pretty much all browsers support them.

But wait, what about accessibility and users that might need to use screen readers?  Won't using these trip them up?

Dr. Says No.

Well, not if they do it right.  If an icon font is working correctly it will use the Private Unicode character range.  So it won't trip up the reader.

So now that we have established the reasons of why to use them, we need to see how to use them.

First thing you need to do is load the font via CSS as follows:

@font-face{
    font-family:Batch;
    src:url('https://googledrive.com/host/0B4QQSpfhQZN5bFZ1ckV4QTRPb2s/batch-icons-webfont.eot');
    src:url('https://googledrive.com/host/0B4QQSpfhQZN5bFZ1ckV4QTRPb2s/batch-icons-webfont.eot?#iefix') format('embedded-opentype'),
        url('https://googledrive.com/host/0B4QQSpfhQZN5bFZ1ckV4QTRPb2s/batch-icons-webfont.woff') format('woff'),
        url('https://googledrive.com/host/0B4QQSpfhQZN5bFZ1ckV4QTRPb2s/batch-icons-webfont.ttf') format('truetype'),
        url('https://googledrive.com/host/0B4QQSpfhQZN5bFZ1ckV4QTRPb2s/batch-icons-webfont.svg#batchregular') format('svg');
    font-weight:normal;
    font-style:normal;
}

Next you use that character in your html.  

.batch {
    font-family:"Batch"; /*or whatever you've decalred your font name as*/
    font-size:16px;
    line-height:1;
    
}

Super easy!


That is nice, but I want to be awesome.  I want to have a button that does X (settings, cancel, ok, etc) and I don't want to have to have that code everywhere I have an ok button.  I just want to to have my class know about the font and character.

You can be that awesome.  We can use the ::before and ::after pseudo-elements to do that.

.before::before{
    font-family:"Batch";
    content: "\f000";
}

That is awesome! But you know, after thinking about it, I don't want my content in my css it doesn't feel right. I still think pseudo elements are sweet though. Good News! You can still use them and even use the 'data-' attributes as well. Just put the character code in a data attribute of your choice, and add the following class.

.data::before{
    font-family:"Batch";
    content: attr(data-icon);
}

Here is the final output of everything!
view the tif file.

Making Some Progress

I just started on a new project recently and one of the things on the page I was working on was displaying progress bars in different colors.  The progress bars need to display an indeterminate state and after talking with a co-worker we thought making it look like KITT from Night Rider was the best (and most awesome) way to display that.

Is that you Mr. Feeny?

Because of a lot of my work being done on the canvas, and to have communication being done with web sockets, I am only supporting modern browsers for this app.  I knew there are a ton of new elements in HTML 5 and one of my personal goals is to become better at writing semantically correct html.  A quick look through the elements, and I found the <progress> tag.  Even better, it comes with an indeterminate state and is supported in the browsers I care about.  My next requirement was just to style the progress elements different colors based on their states.  I thought this is going to be easy.  All I need to do is add some classes to set the color and I'm done!

So after a quick search I find out you pretty much can't do anything to style a progress element.  Which made me think...  how do you expect people to use this element if they can't make it look how they need it to?

I was determined to use CSS only to get this to work and make my page semantically awesome.  I found some sites like this that show you how to clear out the native browser appearance and add your own.  So I started with that and then added my own classes to style them how I needed.  A lot of CSS later, I came up with the following:

.progressContainer{
    position:relative;
    width: 100px;
}

progress{
  height:5px;
  border:0;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  width:100% !important;
 
}

progress.connected::-webkit-progress-value{
  background: green;
} 
progress.connected::-moz-progress-value{
  background: green;
}
progress.connected::progress-value{
  background: green;
}
progress.connected::-webkit-progress-bar{
  background: green;
} 
progress.connected::-moz-progress-bar{
  background: green;
}
progress.connected::progress-bar{
  background: green;
}
progress.connected:not([value])::-webkit-progress-bar{
  background:green;
}
progress.connected:not([value])::-moz-progress-bar{
  background:green;
}
progress.connected:not([value])::progress-bar{
  background:green;
}

With the lower half repeated for each class that I wanted, I was almost done. While verbose, I was able to style the progress as necessary. The only thing left was to get KITT to work. After some quick thinking I figured I would use a ::before pseudo element and animate it.

@-webkit-keyframes knightRider {
   0% {
 left: 0%;
      }
 
  50% {
 left:100%;
        margin-left:-10px;
      }
  100%{
 left:0%;
      }
}
@keyframes knightRider {
   0% {
 left: 0%;
      }
 
  50% {
   left:100%;
        margin-left:-10px;
      }
  100%{
 left:0%;
      }
}

progress.searching::before{
  content:"";
  background-color:blue;
  width:10px;
  height:5px;
  position: absolute;
  animation: knightRider 2s infinite linear;
  -webkit-animation: knightRider 2s infinite linear;
}

A quick refresh of my fiddle and BOOM it was working.  Now I just need to make sure it is working in Firefox which should be just a formality, right?  Wrong!  Only webkit browsers support ::before and ::after on progress for some bizzaro reason.  So I ended up adding a hidden div next to the progress bar that would use the animation from above and only show up when a specific class is added to the progress bar.

See the Pen Progress by Andy (@andyjmeyers) on CodePen.

Finally some progress...